Summary

Today, you've learned quite a lot about tables. They enable you to arrange your information in rows and columns so that your visitors can get to the information they need quickly.

While working with tables today, you learned about headings and data, captions, defining rows and cells, aligning information within cells, and creating cells that span multiple rows or columns. With these features, you can create tables for most purposes.

As you're constructing tables, it's helpful to keep the following steps in mind:

• Sketch your table, indicating where the rows and columns fall. Mark which cells span multiple rows and columns.
  
  
• Start with a basic framework and lay out the rows, headings, and data row by row and cell by cell in HTML. Include row and column spans as necessary. Test frequently in a browser to make sure that it's all working correctly.
  
  
• Modify the alignment in the rows to reflect the alignment of the majority of the cells.
  
  
• Modify the alignment for individual cells.
  
  
• Adjust line breaks, if necessary.
  
  
• Make other refinements such as cell spacing, padding, or color.
  
  
• Test your table in multiple browsers. Different browsers might have different approaches to laying out your table, or might be more accepting of errors in your HTML code.
  
  

Table 8.2 presents a quick summary of the HTML elements that you learned about today, and which remain current in HTML 4.01. Attributes that apply to each element are listed in Table 8.3.

Table 8.2. Current HTML 4.01 Table Elements

Tag	Use
<table>...</table>	Indicates a table.
<caption>...</caption>	Creates a caption for the table (optional).
<colgroup>...</colgroup>	Encloses one or more columns in a group.
<col>	Used to define the attributes of a column in a table.
<thead>...</thead>	Creates a row group that defines the heading of the table. A table can contain only one heading.
<tfoot>...</tfoot>	Creates a row group that defines the footer of the table. A table can contain only one footer. Must be specified before the body of the table is rendered.
<tbody>...</tbody>	Defines one or more row groups to include in the body of the table. Tables can contain more than one body section.
<tr>...</tr>	Defines a table row, which can contain heading and data cells.
<th>...</th>	Defines a table cell that contains a heading. Heading cells are usually indicated by boldface and centered both horizontally and vertically within the cell.
<td>...</td>	Defines a table cell containing data. Table cells are in a regular font, and are left-aligned and vertically centered within the cell.

Because several of the table attributes apply to more than one of the preceding elements, I'm listing them separately. Table 8.3 presents a quick summary of the HTML attributes you learned about today that remain current in HTML 4.01.

Table 8.3. Current HTML 4.01 Table Attributes

Attribute	Applied to Element	Use
align	<tr>	Possible values are left, center, and right, which indicate the horizontal alignment of the cells within that row (overriding the default alignment of heading and table cells).
	<th> or <td>	Overrides both the row's alignment and any default cell alignment. Possible values are left, center, and right.
	<thead>, <tbody>, <tfoot>	Used to set alignment of the contents in table head, body, or foot cells. Possible values are left, center, and right.
	<col>	Used to set alignment of all cells in a column. Possible values are left, center, and right.
	<colgroup>	Used to set alignment of all cells in a column group. Possible values are left, center, and right.
	<table>	Deprecated in HTML 4.01. Possible values are left, center, and right. align="center" isn't supported in HTML 3.2 and older browsers. Determines the alignment of the table and indicates that text following the table will be wrapped alongside it.
	<caption>	Deprecated in HTML 4.01. Indicates which side of the table the caption will be placed. The possible values for most browsers are top and bottom. HTML 4.01 browsers also support left and right. In Internet Explorer, the possible values are left, right, and center, and they indicate the horizontal alignment of the caption.
bgcolor	All	(HTML 3.2, deprecated in HTML 4.01.) Changes the background color of that table element. Cell colors override row colors, which override table colors. The value can be a hexadecimal color number or a color name.
border	<table>	Indicates whether the table will be drawn with a border. The default is no border. If border has a value, it's the width of the shaded border around the table.
bordercolor	<table>	(Internet Explorer and Netscape extension.) Can be used with any of the table elements to change the color of the border around that elements. The value can be a hexadecimal color number or a color name.
bordercolorlight	<table>	(Internet Explorer extension.) Same as bordercolor, except it affects only the light component of a 3D-look border.
bordercolordark	<table>	(Internet Explorer extension.) Same as bordercolor, except it affects only the dark component of a 3D-look border.
cellspacing	<table>	Defines the amount of space between the cells in the table.
cellpadding	<table>	Defines the amount of space between the edges of the cell and its contents.
char		Specifies a character to be used as an axis to align the contents of a cell (for example, a decimal point in numerical values). Can be applied to colgroup, col, tbody, thead, tfoot, tr, TD, and th elements.
charoff		Specifies the amount of offset to be applied to the first occurrence of the alignment character specified by the char attribute. Applies to the same elements previously listed in char.
frame	<table>	Defines which sides of the frame that surrounds a table are visible. Possible values are void, above, below, hsides, lhs, rhs, vsides, box, and border.
height	<th> or <td>	Deprecated in HTML 4.01. Indicates the height of the cell in pixel or percentage values.
nowrap	<th> or <td>	Deprecated in HTML 4.01. Prevents the browser from wrapping the contents of the cell.
rules	<table>	Defines which rules (division lines) appear between cells in a table. Possible values are none, groups, rows, cols, and all.
width	<table>	Indicates the width of the table, in exact pixel values or as a percentage of page width (for example, 50%).
span	<colgroup>	Defines the number of columns in a column group. Must be an integer greater than 0.
	<col>	Defines the number of columns which a cell spans. Must be an integer greater than 0.
width	<colgroup>	Defines the width of all cells in a column group.
	<col>	Defines the width of all cells in one column.
colspan	<th> or <td>	Indicates the number of cells to the right of this one that this cell will span.
rowspan	<th> or <td>	Indicates the number of cells below this one that this cell will span.
valign	<tr>	Indicates the vertical alignment of the cells within that row (overriding the defaults). Possible values are top, middle, and bottom.
	<th> or <td>	Overrides both the row's vertical alignment and the default cell alignment. Possible values are top, middle, and bottom.
		In Netscape, valign can also have the value baseline.
	<thead>, <tfoot>, <tbody>	Defines vertical alignment of cells in the table head, table foot, or table body.
	<colgroup>	Defines the vertical alignment of all cells in a column group.
	<col>	Defines the vertical alignment of all cells in a single column.
width	<th> or <td>	Deprecated in HTML 4.01. Indicates width of the cell, in exact pixel values or as a percentage of table width (for example, 50%).