TABLES in HTML
Version 3.1 - April 27, 2006
Hold mouse here for list of most recent changes.
Receive notice whenever this page is updated.
(This page presumes familiarity with basic HTML. If you wish to refresh the basics, or do not yet have the basics, please see the Basics in HTML page, then click back here for instruction in Tables.)
These are placed within the <body> portion of a web page. They are:
<table></table> specifies the Table itself.
<tr></tr> specifies a Table Row.
<td></td> specifies Table Data for each successive column of the row.
<td> tags go within <tr> tags. <tr> tags go within <table> tags. This is simply the same thing as saying that data goes in rows, and rows go in a table. You can also nest them, e.g., putting a <table> within a <table>.
The simplest table coding, therefore, would be:
<table> <!-- Starts the Table -->
<tr> <!-- Starts the first Table Row -->
<td> <!-- Starts the first column in the row -->
<!-- A no-break space just to have something there (yet look empty). -->
</td> <!-- Ends the first column in the row -->
<tr> <!-- Ends the first Table Row -->
</table> <!-- Ends the TABLE -->
Indentation and other spacing is only for visual formatting — to make your code easier to read. You could code the same table this way:
<table><tr><td> </td></tr></table>
align="left/right/center"
Tells whether the table is placed left, right, or center in terms of the web page.
background="n"
where n is the pathname (URL) of an image file. This behaves differently in Internet Explorer (which applies the image to the background of the entire table) than in Netscape (which applies it to the background of each individual cell).
border="n"
where n is a number (0 or larger). This specifies the table’s border width. (border="0" gives no visible border.)
HINT: When you start to code a table, add a border even if you don’t want one in the final table. Why? So that you can see what you’re doing while you code it! You need something in each cell for that cell to display properly so, if you still have empty cells, add a (no-break space character). When you’re finished with the table in all other respects, reduce the border to 0, and your “construction guide lines” vanish.
frame="n"
The FRAME attribute in a TABLE tag (not to be confused with the FRAME tag in a FRAMESET document) sets some of the most general characteristics about the lines framing a table. n may be any of the following:
cellpadding="n"
Specifies the amount of space (in pixels) between the table cell’s border and the actual data (contents) of the cell. The default is cellpadding="1".
cellspacing="n"
Specifies the amount of space (in pixels) between the table’s border and the boundary of the cell, and between any two cells. The default is cellspacing="2".
width="n%" or width="n"
Determines the table’s width in terms of a percentage of the viewer’s screen, or in pixels. (It’s flexible according to the monitor size, screen resolution, whether the browser is maximized, etc.)
height="n"
Determines the table’s height in pixels
align="left/right/center"
Tells how the Table Data are placed in terms of the cell (left, right, center). The default is align="left" for <tr> and <td>, and align="center" for <th>.
valign="top/middle/bottom"
Determines the Vertical ALIGNment of the data within its cell (top, middle, bottom). The default is valign="middle".
colspan="n"
Specifies how many columns one <td> tag’s data are to stretch across. The default is colspan="1". For all other formatting purposes, the resulting multi-column cell is treated as a single cell.
rowspan="n"
Specifies how many rows one <td> tag’s data are to stretch down. The default is rowspan="1". For all other formatting purposes, the resulting multi-row cell is treated as a single cell.
nowrap
Prevents word-wrapping within that cell (within that <td> or <th> tag).
width="n"% or width="n" and height="n"
These may be used, as with the <table> tag. See above for details.
If you specify these attributes within a <tr> tag, they become the new default for all cells in the specified row. However, attributes in an individual <td> or <th> tag override them. As is usually true in HTML, the more local specification supercedes the more general one.
The first three tags above are basic to coding a table. Every table will use all three of them. There are other basic table tags, too, though these are not used as often:
<caption> ... </caption>
Specifies the Caption (if any) for the table. This goes inside the <table> tags. It will be displayed outside the table’s border. By default, it is at the top of the table (equivalent to an align="top" attribute), and centered. An align="bottom" attribute moves it to the bottom (below the table). An align="left" or align="right" attribute can flush the text left or right. (The default is no caption.)
NOTE: There are no quotation marks with the ALIGN attribute for a caption. Also, though this attribute still works in HTML 4, it is deprecated. Styles are recommended instead.
<th> ... </th>
Specifes the Table Header (if any) for individual columns of the table. By default, this text is centered and bold. In fact, the easiest way to understand Table Header tags is to think of them as being identical to <tr> or <td> tags (depeding on context) except for defaulting to bold and centered. To place headers across the top of columns, place these tags after the <table> tag and before the first <tr> tag; but they also can be placed after a <tr> tag as if they were <td> tags (before any other <td> tags in the row), and then provide labels for each row. The number of <th> tags you put in a row will determine the number of columns that have headings. Attributes of <th> tags override those of <tr> tags for their columns.
Table Header tags can use rowspan=, colspan=, and other text-formatting attributes just like the other tags mentioned earlier.
The BackGround COLOR attribute can be used in either a <table>, <tr>, <td>, or <th> tag. The more local specification supercedes the more general one, as usual. How bgcolor behaves will differ between Internet Explorer and Netscape, and the differences are perhaps best learned by experimentation. It’s syntax is:
bgcolor="n" where n is either a color label (e.g., red) or an RGB code (e.g., #ff0000)
Here is an example of a table, taken from this site. A version of the actual table can be viewed here. Some character formatting was predefined by Style specifications not appearing below (and other parts were brute-force coded to minimize browser version conflicts), but these do not affect the underlying table structure itself, which is the point of this example. I have also removed the hyperlink tags from this example, which would have made it more obscure.
<table border="1" cellspacing="4" width="95%" align="center">
<tr><td><b>1: Disable Fast Shutdown</a></b></td>
<td><b>10: Advanced Power Management</a></b></td></tr>
<tr><td><b>2: Shutdown Troubleshooting Wizard</a></b></td>
<td><b>11: Windows File System settings</a></b></td></tr>
<tr><td><b>3: Damaged exit sound file</a></b></td>
<td><b>12: Windows device drivers</a></b></td></tr>
<tr><td><b>4: Clogged temporary file folders</a></b></td>
<td><b>13: Use Bootlog.txt to troubleshoot</a></b></td></tr>
<tr><td><b>5: AUTOEXEC.BAT or CONFIG.SYS</a></b></td>
<td><b>14: Internal system problem</a></b></td></tr>
<tr><td><b>6: Virtual device driver / SYSTEM.INI</a></b></td>
<td><b>15: Other solutions</a></b></td></tr>
<tr><td><b>7: WIN.INI command lines</a></b></td>
<td><b>Internet Explorer scenarios</a></b></td></tr>
<tr><td><b>8. Programs loading from Startup folder</a></b></td>
<td><b>Windows 98-only scenarios</a></b></td></tr>
<tr><td><b>9: EMM386-related memory conflicts</a></b></td>
<td> </td></tr>
<tr><td><b><font color="red">Windows 98 Second Edition</font></a></b></td>
<td><b><font color="red">Windows Millennium Edition</font></a></b></td></tr>
</table>