173 users online (0 members and 173 guests)  


  HTML Table Detailed Example





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.

Example source code for HTML frames
<table border="2" bgcolor="#888888" width="70%" cellpadding="2" cellspacing="0"> 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

  • Be creative!


Back to the HTML menu.