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 HTML: Part 2

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

How to get the table onto the same page as the Widget image

Hi. I'm trying to get the table at the bottom onto the same page as the Widget image. I've uploaded everything to Workspaces. The image shows but the table doesn't. How do I get the table there?

Here's 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 in advance.

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

I downloaded the assets before uploading them to Workspaces.

3 Answers

myackley35
myackley35
34,574 Points
myackley35
myackley35
34,574 Points

Hi Sean!

I built a quick workspace based the "HTML: Part 2" video progress with your code above. Can you post a screenshot of what you're seeing for your results with the same code?

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Hey Sean ,

please let me know if I answered any of your questions.

"Hi. I'm trying to get the table at the bottom onto the same page as the Widget image." Is it the size of the different elements on the page thats the problem and you need it all to fit on the first page?

" I've uploaded everything to Workspaces. The image shows but the table doesn't." The image element doesn't appear try playing with the directory, either remove "/images" from the image element or add periods to the end try 2 or 3 ".../images".

"How do I get the table there?" If you are looking to create a border try adding this property and value to your table element:

<table id="product_table" border="1">

Hope this helps

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

Hello Mark. Hello Tommy.

Just to let you both know that since I started this thread, the situation has been resolved.

Thank you

Sean :-)