Summary

Summary

In this hour you learned to arrange text and images into organized arrangements of rows and columns called tables. You learned the three basic tags for creating tables and many optional attributes and styles for controlling the alignment, spacing, and appearance of tables. You also saw that tables can be used together and nested within one another for an even wider variety of layout options.

Table 11.1 summarizes the tags and attributes covered in this hour.

Table 11.1. HTML Tags and Attributes Covered in Hour 11

Tag/Attribute	Function
<table>…</table>	Creates a table that can contain any number of rows (<tr> tags).

Attributes
border="width"	Indicates the width in pixels of the table borders. Using border="0" or omitting the border attribute makes borders invisible.
cellspacing="spacing"	The amount of space between the cells in the table, in pixels.
cellpadding="padding"	The amount of space between the edges of the cell and its contents, in pixels.
style="width:width"	The width of the table on the page, either in exact pixel values or as a percentage of the page width.
style="height:height"	The height of the table on the page, either in exact pixel values or as a percentage of the page height.
style="background-color:color"	Background color of the table and individual table cells that don't already have a background color.
style="backgroundimage:url(imageurl)"	A background image to display within the table and individual table cells that don't already have a background image (if a background color is also specified, the color will show through transparent areas of the image).
<tr>…</tr>	Defines a table row containing one or more cells (<td> tags).

Attributes
style="text-align:alignment"	The horizontal alignment of the contents of the cells within this row. Possible values are left, right, and center.
style="vertical-align:alignment"	The vertical alignment of the contents of the cells within this row. Common used values include top, middle, and bottom.
style="background-color:color"	Background color of all cells in the row that do not already have a background color.
style="backgroundimage:url(imageurl)"	Background image to display within all cells in the row that do not already have their own background image.
<td>…</td>	Defines a table data cell.

Attributes
style="text-align:alignment"	The horizontal alignment of the contents of the cell. Possible values are left, right, and center.
style="vertical-align:alignment"	The vertical alignment of the contents of the cell. Commonly used values are top, middle, and bottom.
rowspan="numrows"	The number of rows this cell will span.
colspan="numcols"	The number of columns this cell will span.
style="width:width"	The width of this column of cells, in exact pixel values or as a percentage of the table width.
style="height:height"	The height of this row of cells, in exact pixel values or as a percentage of the table height.
style="background-color:color"	Background color of the cell.
style="backgroundimage:	Background image to display within the url(imageurl)" cell.
<th>…</th>	Defines a table heading cell. (Accepts all the same attributes and styles as <td>.)