Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Accessibility Websites CSS: Part 1

Sean Flanagan
Sean Flanagan
33,232 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.

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?

Hi Sean,

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

Sean Flanagan
Sean Flanagan
33,232 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