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 HTML Tables

Posted by Justin Stephens
Justin Stephens
3,375 Points

How come my colspan is not working?

<table border="1"> <thead> <tr> <th>Author(s)</th> <th>Book Title</th> </tr> </thead> <tfoot> <tr> <td colspan="2"align="center"> thanks </td> </tr> </tfoot> <tbody> <tr> <td>John Steinbeck</td> <td>The Grapes of Wrath</td> </tr> </tbody> </table>

Jeff Busch
Jeff Busch
19,287 Points

Can we see your code?

2 Answers

Alessandra Vaughn
Alessandra Vaughn
13,915 Points
Alessandra Vaughn
Alessandra Vaughn
13,915 Points

I find the easiest way to troubleshoot with tables is to add a border.

<table border="1">
  <tr>
    <td>something</td>
    <td>here</td>
  </tr>
</table>
Blake Hutchinson
Blake Hutchinson
21,695 Points
Blake Hutchinson
Blake Hutchinson
21,695 Points

A COLSPAN is an attribute for the TH and TD tags, both part of the overall TABLE tag. The tricky thing about tables is that if opening and closing tags are not matching, then the table won't look like it should. Also, make sure number of TD tags match (with the exception of those using COLSPAN and/or ROWSPAN attributes) from beginning to end. If you have any empty table cells, then putting   (non-breaking space) in them will keep the cells looking consistent.

Here's some example code which you can save as an HTML file and preview in a browser. Just remember it's not valid HTML5.

<html>
  <head>
    <title>Example Table</title>
    <style>
      table, th, td { border: 1px solid gray; }
    </style>
  </head>
  <body>
    <table border="1" width="100%" cellspacing="0">
      <th>1</th><th>2</th><th>3</th>
        <!-- 1 td tag as colspan = 3 -->
      <tr bgcolor="blue"><td colspan="3">&nbsp;</tr>
        <!-- 2 td tags as colspan = 2 -->
      <tr><td colspan="2" bgcolor="red">&nbsp;</td>       
      <td rowspan="2" bgcolor="yellow">&nbsp;</td></tr>
        <!-- 2 td tags as rowspan from above = 2 -->
      <tr><td bgcolor="green">&nbsp;</td><td bgcolor="lime">&nbsp;</td></tr>
        <!-- 3 td tags as no colspan on line or any intercepted rowspan from above -->
      <tr><td bgcolor="teal">&nbsp;</td><td bgcolor="orange">&nbsp;</td>
      <td bgcolor="black">&nbsp;</td></tr>
    </table>
  </body>
</html>