Previously I showed you an example of a basic HTML table. It
incorporates just the basics of HTML tables, making rows, making cells, all
that stuff. You could use this kind of HTML table to make columns, but not much
more. To do much more with your HTML tables you have to start joining cells
Here I will show you how to join cells vertically and
horizontally. Horizontally joined cells can be used as headers, and
vertically joined cells can be used to spice things up for variety.
Here is a table with joined cells:
SAN ANTONIO SPURS
World Champs
Keys
Tim Duncan
David Robinson
Here is the source code with a step by step guide.
Starts the table, the table will have a 2 pixel wide border, grey background, will be 70% of the available width. Cellpadding will be 2 pixels and cellspacing is set to 0
<tr>
Starts first row
<th colspan="2">
Starts a header cell, two cells are joined horizontally
SAN ANTONIO SPURS
Header cell content
</th>
Ends header cell
</tr>
Ends first row
<tr>
Starts second row
<th rowspan="2" width="50%">
Starts secondary header cell; this cell will be joined with the
one below it, half the width of the table
World Champs
Header cell content
</th>
Ends header cell
<th>
Starts second cell of the second row
Keys
Cell content
</th>
Ends second cell of second row
</tr>
Ends second row
<tr>
Starts third row. This row will only have one cell, remember we told the first cell of the second row to extend down with the rowspan attribute
<td align="left" valign="middle">
Starts table cell
Tim Duncun<br>David Robinson
Content of third row cell, note the line break
</td>
Ends cell
</tr>
Ends third row
</table>
Ends table
Very simple, eh? It would be good for you to learn to make
some basic tables and learn how to read the tags for tables before you try
anything more complex. It is very simple to have the whole table messed up
because of one little mistake and you can't find it... (I've had that
happen) That happens especially when you're a beginner.
Tips For HTML Tables
Here are some tips for your adventures in the wild world of
tables
I've said this before, but I can't say it enough, keep your source
code neat or you might have some serious problems
Try using transparent tables to place text and images exactly where
you want them.
Use tables to create columns on your web page
Use the columns to create a navigation bar down the left side
Make an ongoing design for your page with tables
Use tables without borders and with a background color in between
little articles of text as separators
