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

Posted by Matt Bloomer
Matt Bloomer
10,608 Points

table border

I am having some trouble with a page that I am working on. I had a table, but the border of the table was taken away when I put in the section about people in my life. Is this a spacing issue, or what do I need to do to get that border back? Also what is the best way to replace the boxes under people in my life with pictures?

here is the code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Matt Bloomer| Designer</title> </head>

<body> <header> <h1>Matt Bloomer</h1>
<h2>A great person! </h2>

<nav> <ul> <li><a href="index.html">intelligence</a></li> <li><a href="about.html">kind</a></li> <li><a href="hooka.html">funny</a></li> </ul> </nav> </header> <section> <p>This is my first website; I hope you like it. If you don't, you can fuck off.</p> <ul> <li> <img src="317992_10151380653005465_1214684987_n.jpg"> </li> </ul> </section> <h3>people in my life</h3> <ul class="filter-select"> <li><button>Sharon</button></li> <li><button>mom</button></li> <li><button>Boogie</button></li> <li><button>dad</button></li> </ul>

<table> <caption>My Life</caption> <thead> <tr> <th>Year</th> <th>Location</th> <th>Girlfriend</th> <th>School/Job</th> </tr> </thead>

<tfoot>
  <tr>
  <td colspan="9">"Ups and downs, strikes and gutters" -the Dude.</td>
  </tr>
</tfoot>

<tbody>
  <tr>
    <td>2002</td>  
    <td>Lawrence</td>
    <td>Holly</td>
    <td>KU</td>
  </tr>
  <tr>
    <td>2004</td>
    <td>Wichita</td>
    <td>Gloria</td>
    <td>Wichita State</td>
  </tr>
  <tr>
    <td>2007</td>
    <td>Liberty</td>
    <td>Melanee</td>
    <td>Dunbar</td>
    </tr>
    <tr>
      <td>2009</td>
      <td>South KC</td>
      <td>none</td>
      <td>none</td>
  </tr>
  <tr>
      <td>2015</td>
      <td>Blue Springs</td>
      <td>Sharon</td>
      <td>UCM</td>
  </tr>
</tbody>

</table>

<h1>Kansas basketball</h1> <iframe width="700" height="415" scrolling="yes" src="https://www.youtube.com/embed/KhJF5vvltzU" frameborder="0" allowfullscreen></iframe> <track label="English" kind="subtitles" srclang="en" src="DreamOn.vtt" default/>

<footer> <p>© 2015 Matt Bloomer.</p> </footer>

</body> </html>

Matt Bloomer
Matt Bloomer
10,608 Points

Sorry I didn't put all the code in :

thead {color:orange;}
  tbody {color: blue;}
  tfoot{color: green}
  table, th, td{
    border: 2px solid black;
  }

body { background: slategrey;

}

video, audio { margin: 0 auto; display: block; }

Jonathan Chua
Jonathan Chua
4,136 Points

Matt, I see a closing ul tag here, but no opening tag. Missing tags can cause strange things to happen to your site. Try adding an opening tag. 

  <li> 
 <img src="317992_10151380653005465_1214684987_n.jpg"> 
 </li>
  </ul>
Jonathan Chua
Jonathan Chua
4,136 Points

Hey Matt, After looking at your code more closely, it seems your have other missing tags.

You should have a ul tag above this line.

<li><a href="index.html">intelligence</a></li>

And a tr tag above this line 

<th>Year</th>

I don't see any other obvious reason why the boarder would dissappear when you add the section. The other thing I would try is using your browser's debugger to see if the CSS style is being applied to the table or if it is being overridden by something else.

5 Answers

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

Ok I did that; now what do I need to do?

Matt Bloomer
Matt Bloomer
10,608 Points

Does anyone else have any answers for me?

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

It was kind of weird-when I put the CSS on the index.html page, it worked, but when I tried to put it on the main CSS page, it didn't. I guess I didn't link it correctly?

Jonathan Chua
Jonathan Chua
4,136 Points
Jonathan Chua
Jonathan Chua
4,136 Points

That must be the problem. You should add the following code under your DOCTYPE declaration.

<html>
<head>
   <link rel="stylesheet" href="styles.css">
</head>
<body>

Your page content should go here, in the body tag.

</body>
</html>

Change "styles.css" to the name of your css file.

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

That didn't work.

Jonathan Chua
Jonathan Chua
4,136 Points

Can you post the code you are using to link your CSS document?

Matt Bloomer
Matt Bloomer
10,608 Points
Matt Bloomer
Matt Bloomer
10,608 Points

I have the CSS linked now. Now my question is how to put pics on the buttons that I have. Do you know which video that is? Here is the code for my buttons: <ul class="filter-select"> <li><button>Sharon</button></li> <li><button>mom</button></li> <li><button>Boogie</button></li> <li><button>dad</button></li> </ul>

Jonathan Chua
Jonathan Chua
4,136 Points

Glad you got it working, Matt. If you have a new question, you should start a new thread so that others can jump in and help. I don't know what video would teach you to add pictures to your buttons, but I would write it like this.

<ul>
        <li><button><img src="sharon-pic.jpg">Sharon</button></li>
</ul>

Then use CSS to style the buttons and images the way you want. Good luck with your site!