HTML5 tutorial - The table tag.

The table and related elements

The table tag displays information in rows and columns.

I have spent more hours than I care to think about messing with tables. While not hard to understand, it can be a bit tricky to getting everything opening and closing in the right order.

The following code:

<table>
 <tr>
  <td>
Row 1 - Col 1</td>
  <td>
Row 1 - Col 2</td>
 </tr>
 <tr>
  <td>
Row 2 - Col 1</td>
  <td>
Row 2 - Col 2</td>
 </tr>
</table>

Produces a table that looks like:

Row 1 - Col 1 Row 1 - Col 2
Row 2 - Col 1 Row 2 - Col 2

Inside the <table> tag are <tr> or table row tags which in turn contain <td> or table cell tags.

Data goes in the <td> cell. That data can be text, other tags or whatever. Remember that first comes <table>, then <tr>, then <td>, then and only then, data.

Copy the table above and paste it into one of the pages you made before. If you skipped that lesson (tut-tut) take a look at http://www.html-5-tutorial.com/p-tag.htm.

Below I added some CSS and the border attribute (border="1") to better display the rows and columns.

Row 1 - Col 1 Row 1 - Col 2
Row 2 - Col 1 Row 2 - Col 2

Here's the rub. There has to be the same number of cells in each row unless you indicate a table cell spans multiple columns and/or rows.

Multiple columns:
<table border="1">
 <tr>
  <td colspan="2">
Row 1 - Col 1 & Col 2</td>
 </tr>
 <tr>
  <td>
Row 2 - Col 1</td>
  <td>
Row 2 - Col 2</td>
 </tr>
</table>
Row 1 - Col 1 & Col 2
Row 2 - Col 1 Row 2 - Col 2
Multiple rows:
<table border="1">
 <tr>
  <td>
Row 1 - Col 1</td>
  <td rowspan="2">
Row 1 & Row 2 - Col 2</td>
 </tr>
 <tr>
  <td>
Row 2 - Col 1</td>
 </tr>
</table>
Row 1 - Col 1 Row 1 & Row 2 - Col 2
Row 2 - Col 1
Or a combination of both:
<table border="1">
 <tr>
  <td>
Row 1 - Col 1</td>
  <td>
Row 1 - Col 2</td>
  <td>
Row 1 - Col 3</td>
  <td rowspan="4">
Row 1, 2, 3 & 4 - Col 4</td>
 </tr>
 <tr>
  <td>
Row 2 - Col 1</td>
  <td colspan="2" rowspan="3">
Row 2, 3 & 4 - Col 2 & 3</td>
 </tr>
 <tr>
  <td>
Row 3 - Col 1</td>
 </tr>
 <tr>
  <td>
Row 4 - Col 1</td>
 </tr>
 <tr>
  <td colspan="2">
Row 5 - Col 1 & 2</td>
  <td colspan="2">
Row 5 - Col 3 & 4</td>
 </tr>
 <tr>
  <td colspan="4">
Row 6 - Col 1, 2, 3 & 4</td>
 </tr>
</table>
Row 1 - Col 1 Row 1 - Col 2 Row 1 - Col 3 Row 1, 2, 3 & 4 - Col 4
Row 2 - Col 1 Row 2, 3 & 4 - Col 2 & 3
Row 3 - Col 1
Row 4 - Col 1
Row 5 - Col 1 & 2 Row 5 - Col 3 & 4
Row 6 - Col 1, 2, 3 & 4

As I said, tables can get tricky – and I'm not done. In addition to the <tr> and <td> tags there are:

  • <th> - Table header
  • <colgroup> - Column Group
  • <thead> - Table head
  • <tbody> - Table body
  • <tfoot> - Table foot

The day may come when you want to make a table with all the bells and whistles so it's good to know they exist, but as a beginner you don't need them.

Also, you should know that in HTML 4.01 tables could have various attributes. The opening table tag looked something like this:

<table cellpadding="5" cellspacing="5" border="1">

In HTML5 most attributes (eg. cellpadding="5") have been eliminated. Use CSS instead. This of course assumes you know CSS (which you probably don't) but take my word for it, web design is better off without them. I'll introduce CSS in the div tag page.

As I said above, getting tables right can be a pain in the neck. One attribute that was going to be eliminated but wasn't is the border attribute. I often add the border attribute (<table border="1">) to get the table debugged and then remove it (<table>) when ready to publish. Normally I use CSS to add borders to tables as I don't like the look of the border that the border attribute gives, but I use them on this page so you can see it work.

Take some time and play with tables. Copy and paste the tables above into your webpage, then edit them and see what happens.

As web pages are usually designed in columns and rows it's tempting to use tables for a page's layout. Don't – that's not their purpose.

  1. Spiders don't always read tables well so they can negatively affect SEO.
  2. Tables need to be completely downloaded before they are displayed and that can leave visitors staring at a blank screen – the kiss of death.
  3. A big complicated table can be a nightmare to debug, especially if you haven't looked at it for a while.

Tables are a great way to lay data out. People are used to seeing information in rows and columns. They are an essential and powerful tool – but don't try to do too much. Keep it simple.

CSS or Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language such as HTML.
w3schools · wikipedia