Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Accessibility Websites CSS: Part 1

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

How do I make the table appear in the browser please?

Hello. I've done all the HTML on this. Everything appears in the browser except the table under the cog. Is anything wrong with my HTML?

<!DOCTYPE html>
<html>
  <head>
    <title>Widget, Inc.</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div id="wrapper">

      <div id="header">
        <h1>Widget</h1>

        <ul id="nav">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Company</a></li>
          <li><a href="#">Blog</a></li>
        </ul>
      </div>



      <div id="content">
        <div id="about">
          <p>Widget has always offered the best quality and the best price in the industry, but now it's made of even higher quality materials. Widget is also the most environmentally friendly product ever made.</p>
          <div id="cta">
            <h3 id="just_10">The new widget is just $10.</h3>
            <a href="#" id="buy_now">Buy Now</a>
          </div>
        </div>
      </div>

      <div id="widget_pic">
        <img src="images/gear.png" alt="A drawing of a widget, which looks similar to a gear.">
      </div>

      <p id="compare">Compare Widget to other products.</p>
      <table id="product_table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Quality</th>
            <th>Speed</th>
            <th>Strength</th>
            <th>Price</th>
          </tr>
        </thead>
        <tr>
          <td>
            <strong>Widget</strong>
          </td>
          <td>
            High Quality
          </td>
          <td>
            Fast
          </td>
          <td>
            Strong
          </td>
          <td>
            $10
          </td>
        </tr>
        <tr>
          <td>
            <strong>Gadget</strong>
          </td>
          <td>
            Good Quality
          </td>
          <td>
            Slow
          </td>
          <td>
            Weak
          </td>
          <td>
            $15
          </td>
        </tr>
        <tr>
          <td>
            <strong>Gizmo</strong>
          </td>
          <td>
            Poor Quality
          </td>
          <td>
            Slowest
          </td>
          <td>
            Weakest
          </td>
          <td>
            $25
          </td>
        </tr>
      </table>

    </div>
  </body>
</html>

Thanks.

lukebiggerstaff
lukebiggerstaff
27,534 Points

I copied your html and the table is showing up fine in the html format.

Could there be something in your CSS that is stopping it from displaying?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sean,

As Luke is suggesting, I would post the css you have for this.

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Luke, hi Jason. Sorry for the delay. I'm trying to juggle this course with other things.

There is no CSS, but since starting this thread, I've managed to fix this with help using an application called Brackets, which allows you to see it live while you type. It's all sorted. Thanks for your help.

Sean