Attempting to place a table within a page layout consisting of three columns

Question

Attempting to place a table within a page layout consisting of three columns

I am having difficulty placing a table in the main content area of a three-column HTML file. Despite my efforts, the table keeps appearing below the header section. I have reviewed my CSS stylesheet thoroughly but haven't been able to identify a solution. Any suggestions or assistance would be greatly appreciated.

Here is the source code for the HTML file:

<html lang="en">
<head>
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->
<title>Enoch Bagwell's Lawn Service</title>
<meta charset="utf-8>
<link href="enoch.css" rel="stylesheet">
</head>
... (HTML file continues)

...And here are some snippets from the style sheet mentioned:

(CSS styles here...)

If you know what might be causing the table placement issue, please feel free to share your insights with me!

css html

Answer 1

Answer №1

Don't forget to close the table tag properly.

<html lang="en">
<head>
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->

<title>Enoch Bagwell's Lawn Service</title>
<meta charset="utf-8">
<link href="enoch.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <header role="banner">
        <span><a href="#special">Skip to Current Specials</a></span>
        <h1>Enoch Bagwell's Lawn Service</h1>
    </header>
    <nav role="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
        <img src="ridingmower.jpg" width="125" height="94" alt="Enoch Hard At Work">
    </nav>
    <aside role="customerssay">
        <h3>What Our Customers Say</h3>
        <p class="customers">
        <i>After hiring Enoch Bagwell's Lawn Service to prune my trees, I came home to
        find one of their workers cutting down my magnolia trees with a chainsaw. This
        man is clearly not stable, nor even knows anything about basic lawn care.</i><br>
        - Jack Morris, Norcross

        <p class="customers">
        <i>Enoch, I know this is a customer praise column, I'm really happy for ya, and I'm a 
        let you finish, but Beyonce has the best lawn care service of all time. BEST. LAWN CARE 
        SERVICE. OF ALL TIME!</i><br>
        - Kanye West, Anywhere There's Opportunity For Attention
        </aside>

        <main role="main">
            <h2>Our Services</h2>
            <img class="centered" src= "pruning.jpg" height="314" align="middle" width="519" alt="Tree Pruning"/>
            <p>Our prices vary from season to season. Here's a table of our services and charges by season. For
            our lawn care services, we strictly use <a href=https://www.deere.com/en_US/products/equipment/riding_mowers/riding_mowers.page target=_blank>John Deere</a> 
            mowers and products.
            <table border="1">
                <tr>
                    <td><b>Service</b></td>
                    <td><b>Spring</b></td>
                    <td><b>Summer</b></td>
                    <td><b>Fall</b></td>
                    <td><b>Winter</b></td>
                </tr>
                <tr>
                    <td>Lawn Mowing</td>
                    <td>$40/sq ft.</td>
                    <td>$45/sq ft.</td>
                    <td>$30/sq ft.</td>
                    <td>$20/sq ft.</td>
                </tr>
                </table>
            </p>

            <footer role="contentinfo">Copyright &copy;2015 Enoch Bagwell's Lawn Service International LLC.<br>
            Site Design by <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d10091512100d0e484d4a4c3d0e090819181309531a0a14131318090909181e1553181908">[email protected]</a>">mthomps</a><br>
            </footer>
</main>
</div>
</body>
</html>

Answer 2

Don't forget to close the table tag properly.

<html lang="en">
<head>
<!--[if lt IE9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"
</script>
<![endif]-->

<title>Enoch Bagwell's Lawn Service</title>
<meta charset="utf-8">
<link href="enoch.css" rel="stylesheet">
</head>
<body>
<div id="container">
    <header role="banner">
        <span><a href="#special">Skip to Current Specials</a></span>
        <h1>Enoch Bagwell's Lawn Service</h1>
    </header>
    <nav role="navigation">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="contact.html">Contact Us</a></li>
        </ul>
        <img src="ridingmower.jpg" width="125" height="94" alt="Enoch Hard At Work">
    </nav>
    <aside role="customerssay">
        <h3>What Our Customers Say</h3>
        <p class="customers">
        <i>After hiring Enoch Bagwell's Lawn Service to prune my trees, I came home to
        find one of their workers cutting down my magnolia trees with a chainsaw. This
        man is clearly not stable, nor even knows anything about basic lawn care.</i><br>
        - Jack Morris, Norcross

        <p class="customers">
        <i>Enoch, I know this is a customer praise column, I'm really happy for ya, and I'm a 
        let you finish, but Beyonce has the best lawn care service of all time. BEST. LAWN CARE 
        SERVICE. OF ALL TIME!</i><br>
        - Kanye West, Anywhere There's Opportunity For Attention
        </aside>

        <main role="main">
            <h2>Our Services</h2>
            <img class="centered" src= "pruning.jpg" height="314" align="middle" width="519" alt="Tree Pruning"/>
            <p>Our prices vary from season to season. Here's a table of our services and charges by season. For
            our lawn care services, we strictly use <a href=https://www.deere.com/en_US/products/equipment/riding_mowers/riding_mowers.page target=_blank>John Deere</a> 
            mowers and products.
            <table border="1">
                <tr>
                    <td><b>Service</b></td>
                    <td><b>Spring</b></td>
                    <td><b>Summer</b></td>
                    <td><b>Fall</b></td>
                    <td><b>Winter</b></td>
                </tr>
                <tr>
                    <td>Lawn Mowing</td>
                    <td>$40/sq ft.</td>
                    <td>$45/sq ft.</td>
                    <td>$30/sq ft.</td>
                    <td>$20/sq ft.</td>
                </tr>
                </table>
            </p>

            <footer role="contentinfo">Copyright &copy;2015 Enoch Bagwell's Lawn Service International LLC.<br>
            Site Design by <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d10091512100d0e484d4a4c3d0e090819181309531a0a14131318090909181e1553181908">[email protected]</a>">mthomps</a><br>
            </footer>
</main>
</div>
</body>
</html>

Answer 3

Answer №2

<table border="1">
    <tr>
        <td><b>Category</b></td>
        <td><b>Spring</b></td>
        <td><b>Summer</b></td>
        <td><b>Autumn</b></td>
        <td><b>Winter</b></td>
    </tr>
    <tr>
        <td>Lawn Care</td>
        <td>$40/sq ft.</td>
        <td>$45/sq ft.</td>
        <td>$30/sq ft.</td>
        <td>$20/sq ft.</td>
    </tr>
</table>

Try changing </p> to </table> and see if that makes a difference.

Answer 4

<table border="1">
    <tr>
        <td><b>Category</b></td>
        <td><b>Spring</b></td>
        <td><b>Summer</b></td>
        <td><b>Autumn</b></td>
        <td><b>Winter</b></td>
    </tr>
    <tr>
        <td>Lawn Care</td>
        <td>$40/sq ft.</td>
        <td>$45/sq ft.</td>
        <td>$30/sq ft.</td>
        <td>$20/sq ft.</td>
    </tr>
</table>

Try changing </p> to </table> and see if that makes a difference.

Attempting to place a table within a page layout consisting of three columns

Answer №1

Answer №2

Similar questions

Can an ID and a "<?php echo ''.$variable.'' ?>" be included in the same input or video tag?

I am interested in showcasing a card when it is hovered over

Is there a way to replicate this exact toggle selection functionality from Angular Material using just HTML and CSS?

Creating a fixed column with DataTables in Bootstrap 4 and applying transparency to it within a

What is the best way to arrange cards in a specific order with breaks in between each flip

having difficulty retrieving website content using the ui.router

Tips on toggling the visibility of a div using jQuery and CSS via a toggle switch

Guide to positioning an image at the center across 2 columns using Bootstrap

Creating adaptable breakpoints for content using Bootstrap or pure CSS

Enhance Material-UI's SwipeableDrawer by incorporating a clickable handle

Invoking a function in an Angular 4 component using a <td> element

Modify the class of a div element based on the user's login status

What is the best way to add a gradient color to the bottom of your content?

Side navigation bar expands to the right with Bootstrap

Incorporating text onto an HTML webpage

Ways to determine if content is visible within a div

Is it possible to adjust the size of my image based on the browser's zoom level?

My JavaScript functions are not compliant with the HTML5 required tag

Having difficulty removing padding from material-ui TabPane

Having trouble getting the equirectangular panorama example from Three.js to work on your device even though WebGL is supported?