| colspan | The number of columns a value should span.
If greater than the number of columns, then the entire width of the
table is spanned plus a little bit extra for each additional column.
This will cause the right table border to be uneven.
The table width is the maximum of the widest row. |
| rowspan | The number of rows this value should span. |
| cellspacing | The width of the line between cells |
| cellpadding | Makes the cells taller and wider |
| width | Either a fixed value or a percentage i.e. width="39%" |
| height | For TD and TH only |
| border | width of highlight - 0=none, 1=good |
| valign | top | center | bottom |
| align | left | center | right (version 3.2) |
| align | left | center | right | justify | char (version 4.0 - tr, th, td) |
| align | top | bottom (for caption only) |
| nowrap | keeps the data in a field from wrapping |
| bgcolor | Sets the background color |
| Tag | align | valign | colspan | rowspan | width | border | cellspacing | cellpadding | nowrap | align (top|bottom) |
|---|---|---|---|---|---|---|---|---|---|---|
| table | x | x | x | x | x | |||||
| caption | x | |||||||||
| tr | x | x | ||||||||
| td/th | x | x | x | x | x | x |
bgcolor="#00ffff is supported by IE 3.02 and Netscape Communicator 4.05, but not by Netscape 3.x. Communicator 4.05 prints gray if the background color is set except that empty cells are left white.
<table align=center> is specified but not supported by either IE 3.02 or Netscape 3.x
Do not use <pre>...</pre> blocks in a table. Explorer will wrap the text but Netscape will not. (All data exported from MS Word, including that in tables, is enclosed in a preformatted block. This is fixed in MS Word 97.)
To get lines around an empty cell, use a non-breakable space -
cellpadding=2 looks the best on the screen but prints poorly. Increasing the value displays well in IE 3.02 and Netscape Communicator 4.05. However, the value has little effect when printing from IE 3.02. cellpadding=4 prints well with Communicator with and without lines.
<table align=center width=50% bgcolor="#00ffff" cellspacing=0 cellpadding=2 border=1> <caption align=top> ... table caption ... </caption> <tr align=center valign=top> <th colspan=6 align=center> headers are bold <tr valign=top> <td colspan=2 rowspan=3 nowrap align=right > regular row definition </table>
| North America - bgcolor="#C0C0C0" cellspacing=0 cellpadding=2 border=1 | |||||
| Column 1 (width=150 th) | Column 2 (th) | Column 3 (th) | Column 4 (td) | Column 5 (td) | |
|---|---|---|---|---|---|
| data 1 | data 2 | data 3 | data 4 | ||
| empty cell ---> | data 3 | ||||
| North America - cellspacing=0 cellpadding=5 border=1 | |||||
| data | data | data | data | data | |
| data 1 | data 2 | data 3 | data 4 | ||
| North America - cellspacing=4 cellpadding=6 border=2 | ||||
| data | data | data | data | data |
| data 1 | data 2 | data 3 | data 4 | |
| North America - cellspacing=0 cellpadding=2 border=4 | |||||
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | |
| data 1 | data 2 | data 3 | data 4 | ||
| North America - cellspacing=2 cellpadding=2 border=8 | |||||
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 | |
| data 1 | data 2 | data 3 | data 4 | ||
| North America - cellspacing=2 cellpadding=2 border=1 width=100% | ||||
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| data 1 | data 2 | data 3 | data 4 | |
| North America - Default Parameters | ||||
| Column 1 | Column 2 | Column 3 | Column 4 | Column 5 |
| data 1 | data 2 | data 3 | data 4 | |
| data 1 | data 2 | data 3 | data 4 | data 5 |
| 8 | |||||||||
| 7 | |||||||||
| 6 | |||||||||
| 5 | |||||||||
| 4 | |||||||||
| 3 | |||||||||
| 2 | |||||||||
| 1 | |||||||||
| 0 | |||||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
IE shows 7 blocks of color
Netscape Navigator/Communicator 4.05 show only 2 blocks of color -
the 2 blocks with
When tables contain several columns, and you are programming in Notepad, it is hard to remember which column is which. The following code fragment illustrates one way to place each column on a separate row and to identify which column is which.
Notice: If you use a dummy parameter for some non-html purpose, be sure to comment your code.
<!-- lan= is an unknown parameter and, therefore, it is ignored.
This is used as a note to keep the table columns straight.
-->
<table border = 1>
<tr><th>
<th lan=Basic >Basic
<th lan=C++ >C++
<th lan=Pascal>Pascal
<th lan=Java >Java
<tr><td>Declare
<td lan=Basic >Dim str1 As String<br>Dim str1 As String * 5
<td lan=C++ >char str1[256]
<td lan=Pascal>string str1
<td lan=Java >string str1 <br>or same as C++
</table>
| Basic | C++ | Pascal | Java | |
|---|---|---|---|---|
| Declare | Dim str1 As String Dim str1 As String * 5 | char str1[256] | string str1 | string str1 or same as C++ |
If you want to indent a table or text, just enclose it in an outer table with 2 columns. Leave the first column blank and manually set its width, then place the second table inside the second column of the first table. Be sure to include a comment explaining what you have done. Placing a table in a <ul> .. </ul> block produces similar results but you can not control the size of the indent.