The table and related tags
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 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>
<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>
<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
Or a combination of both:
<table>
<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 can have various attributes. The most common of which are:
width
height
valign
align
cellpadding
cellspacing
In HTML5 these attributes no longer work. 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 next 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. If you do want to put a border on a table use CSS.
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.
Spiders don't always read tables well so they can negatively affect SEO.
Tables need to be completely downloaded before they are displayed and that can leave visitors staring at a blank screen – the kiss of death.
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
