The first table in this example page is very simple (lesson 6a.htm):
------------------------------------------------------------
<html>
<head>
<title> Lesson 6 </title>
</head>
<body text = "blue">
<h1 align = "center"> TABLES </h1>
<br>
<table border = "1">
<caption> A Simple Table</caption>
<tr>
<td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
<br>
<table border = "1" bgcolor = "yellow">
<caption align="bottom"> Same table with bottom caption and background color</caption>
<tr>
<td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
<br>
<table border = "2" cellspacing = "10">
<caption> Table 3 with 10 pixel cellspacing and 2 pixel border</caption>
<tr>
<td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
<br>
<table border = "2" cellpadding = "10">
<caption> Table 4 with 10 pixel cellpadding and 2 pixel border</caption>
<tr>
<td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
<br>
<table border = "2" cellpadding = "10" align = "center" bgcolor = "fuchsia">
<caption> Table 5 center aligned with 10 pixel cellpadding and 2 pixel border</caption>
<tr>
<td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
<br>
<table border = "2" align = "center" bgcolor = "fuchsia" height = "100" width = "500">
<caption> Table 6 100 pixels by 500 pixels and alignment within cells</caption>
<tr>
<td> Cell A1 </td> <td align = "center"> Cell A2 </td> <td align = "right"> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
<br>
<table border = "5" align = "center" bgcolor = "fuchsia" height = "100" width = "75%">
<caption> Table 7 with vertical alignment in row and cells</caption>
<tr valign = "top">
<td valign = "bottom"> Cell A1 </td> <td align = "center"> Cell A2 </td> <td align = "right"> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td valign = "top"> Cell B2 </td> <td> Cell B3 </td>
</tr>
</table>
</body>
</html>
------------------------------------------------------------
Note that I used the attribute border = 1 to make a border around the table. The number is the border thickness in pixels. Also,a table doesn't come with any space around it, so you will generally need to either use a <br> tag or put the table inside a paragraph to get space above and below it. I also used a background color for the second table.
The third and fourth tables show the attributes cellspacing (space between cells) and cellpadding <space within cells). In table 5 I added alignment (can be center, left, or right.) I have specified height and width for table 6 (you can also do this in a cell or row). In Table 6, I aligned a couple of cells center and right using the align attribute. The default alignment as you can guess is left.
The final variant (Table 7) in this example is the vertical alignment attribute valign which can be center, top, or bottom. Center is the default. I also used a percentage for width rather than number of pixels. Try resizing the window to see the table change its size when a percent is used.
Tip: You can use the <th> </th> tag in place of the <td> </td> tag to make a heading instead of data item. The only difference is that the table heading will be bold and centered.
More Table Attributes:
Suppose I want the top cell to span across more than one table, or a left cell to span across more than one row. I can use the colspan or rowspan attributes inside the <td> </td> tags. (The first table in the next example page). In the example, I specified that the 2nd data item on the first row would span 3 columns, and that the first cell on the 2nd row would span 2 rows. In the next table I put our favorite image file in that column spanning cell. Note that the table expands to allow the image to fit.
You can also use background colors or images in tables, cells, or rows just like you use them in a page background. It looks ugly but that's life.
2nd Example (lesson6b.htm):
------------------------------------------------------------
<html>
<head>
<title> Lesson 6B </title>
</head>
<body text = "blue">
<h1 align = "center"> ADVANCED TABLE ATTRIBUTES </h1>
<br>
<table border = "4" align = "center">
<caption> <i> COLUMN AND ROW SPANNING </i> </caption>
<tr>
<td> Col 1 </td> <td align = "center" colspan = "3"> 1, 2, and 3 </td>
<tr>
<td rowspan = "2" valign = "center"> A-B <td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
<tr>
<td> C </td><td> Cell C1 </td> <td> Cell C2 </td> <td> Cell C3 </td>
</tr>
</table>
<br>
<br>
<table border = "4" align = "center">
<caption> <i> An image in a cell</i> </caption>
<tr>
<td> Col 1 </td> <td align = "center" colspan = "3"> <img src = "button.gif"></td>
<tr>
<td rowspan = "2" valign = "center"> A-B <td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
<tr>
<td> C </td><td> Cell C1 </td> <td> Cell C2 </td> <td> Cell C3 </td>
</tr>
</table>
<br>
<br>
<table border = "4" align = "center" background = "button.gif" cellspacing = "15">
<caption> <i> Table background image</i> </caption>
<tr>
<td> Col 1 </td> <td align = "center" colspan = "3"> 1, 2, and 3</td>
<tr>
<td rowspan = "2" valign = "center"> A-B <td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
<tr>
<td> C </td><td> Cell C1 </td> <td> Cell C2 </td> <td> Cell C3 </td>
</tr>
</table>
<br>
<br>
<table align = "center" background = "button.gif" height = "315" width = "630">
<tr>
<td>
<table align = "center" cellspacing = "15" height = "300" width = "600" bgcolor = "white" border = "5" >
<caption> <i> Nested tables</i> </caption>
<tr>
<td> Col 1 </td> <td align = "center" colspan = "3"> 1, 2, and 3</td>
<tr>
<td rowspan = "2" valign = "center"> A-B <td> Cell A1 </td> <td> Cell A2 </td> <td> Cell A3 </td>
</tr>
<tr>
<td> Cell B1 </td> <td> Cell B2 </td> <td> Cell B3 </td>
</tr>
<tr>
<td> C </td><td> Cell C1 </td> <td> Cell C2 </td> <td> Cell C3 </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
-----------------------------------------------------------
When you use a dark image for a table background, you will likely have to use a light font. You will have to put font tags in every cell if different than the default. You may want to use a dark background color for the table as well in case someone has images turned off in their browser. You may run into some problems with IE vs Netscape. In older versions, Netscape only put the background image between the cells while IE put it behind the whole table. In Netscape, the background image tag takes precedence over colors set in the <tr> or <td> tags, while in IE it's the other way around. (may not be true in all versions.)
Here is a final trick for borders: If you want to have a textured border of some sort, you can put your table inside another 1 cell table and have the image in the outer table as shown in the last table in this example. Again, there are better images you can use for this. Note that I gave the inner table a white background to cover the image in the table underneath.