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 HTML Tables Structuring Tables Add the Table Footer Element

Posted by Elizabeth Chipendo
Elizabeth Chipendo
Courses Plus Student 6,468 Points

how to add a colspan attribute to the table cell inside the table footer so that it spans the width of the table

how to add a colspan attribute to the table cell inside the table footer so that it spans the width of the table

index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Tables</title>
  </head>
  <body>

    <table>
      <thead>
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Job</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Nick</td>
          <td>Designer</td>
        </tr>
        <tr>
          <td>Andrew</td>
          <td>Developer</td>
        </tr>
        <tr>
          <td>Dave</td>
          <td>Developer</td>
        </tr>
           <tfoot>
             <tr>
               <td>data is updatedv everyb 15 minutes</td> 
             </tr>
             <tr>
             <td>colspan="width:100%"</td>
             </tr>
      </tfoot>
      </tbody>
    </table>
    <tfoot></tfoot>
  </body>
</html>

7 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Elizabeth,

You have slightly too much markup meaning the second td element in your tfoot isn't required as the colspan attribute allows us to span a single td over multiple columns rather than needing extra and redundant td elements.

The colspan attribute only accepts values that are integers starting from 0 so in this case we need to span two columns therefore the value required is 2, see the below.

<tfoot>
  <tr>
    <td colspan="2">Data is updated every 15 minutes.</td> 
  </tr>
</tfoot>

Happy coding!

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML Tables</title> </head> <body>

<table>
  <caption>Employee Information</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Job</th>
    </tr>
Elizabeth Chipendo
PLUS
Elizabeth Chipendo
Courses Plus Student 6,468 Points
Elizabeth Chipendo
Elizabeth Chipendo
Courses Plus Student 6,468 Points

thank you Chris, this was giving me problems but i succeeded after following your advice

Chris Shaw
Chris Shaw
26,676 Points

You're welcome.

Elizabeth Chipendo
PLUS
Elizabeth Chipendo
Courses Plus Student 6,468 Points
Elizabeth Chipendo
Elizabeth Chipendo
Courses Plus Student 6,468 Points

how thwen do i add a cation element that says 'employee data'.

Chris Shaw
Chris Shaw
26,676 Points

Nick explains how to do this in the video.

https://teamtreehouse.com/library/html-tables/structuring-tables/the-caption-element

Elizabeth Chipendo
PLUS
Elizabeth Chipendo
Courses Plus Student 6,468 Points
Elizabeth Chipendo
Elizabeth Chipendo
Courses Plus Student 6,468 Points

thank you then

monica shoriwa
monica shoriwa
5,260 Points
monica shoriwa
monica shoriwa
5,260 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML Tables</title> </head> <body>

<table>
   <caption>Employee Information</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Job</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">Data is updated every 15 minutes.</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Nick</td>
      <td>Designer</td>
    </tr>
    <tr>
      <td>Andrew</td>
      <td>Developer</td>
    </tr>
    <tr>
      <td>Dave</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>

</body> </html>

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML Tables</title> </head> <body>

<table>
  <caption>Employee Information</caption>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Job</th>
    </tr>