Formatting Tables

Now you can add some pizzazz to your simple table. In Table 7.1, you see some of the different style attributes you can apply to HTML tables. Figure 7.3 shows how you can use these attributes to create an HTML table with a little more character. Figure 7.4 shows the way the table appears in a browser.

Table 7.1. Table Style Attributes

Attribute	Default	Use With	Values
align	left	All	Horizontal alignment of cell contents: left, right, center, and char (which aligns around a specific character, usually a decimal or comma).
bgcolor		All	Background color.
border	0	<table>	Width of the border (in pixels).
cellpadding	0	<td>, <th>	Space between border and content (in pixels).
cellspacing	0	<td>, <th>	Space between cells (in pixels).
colspan	1	<td>, <th>	Number of columns that a cell should span (merge).
rowspan	1	<td>, <th>	Number of rows that a cell should span (merge).
rules	none	<table>	Where the lines (rules) appear between cells: rows, cols, or all.
valign	center	<td>, <tr>, <th>	Vertical alignment of cell contents: top, bottom, or baseline.
width	to fit	All	Width of table or cells (in pixels or as a percentage of the page).

Figure 7.3. Table attributes in HTML.

Figure 7.4. That same HTML table as it appears in the browser.

Tip

The World Wide Web Consortium's Web site (www.w3.org/TR/REC-html40/struct/tables.html) has detailed descriptions of all the attributes available for tables, as well as examples of how you can use them.

Pixel

A pixel is the size of a single dot of color on your monitor. The monitor's display resolution affects the size of a pixel. A display resolution of 800x600 means that your monitor displays 800 pixels in width by 600 pixels in height. The pixel size on a monitor that displays at a resolution of 1024x800 would be much smaller than one on a monitor with a resolution of 800x600.

A table with a width attribute fixed at 800 pixels fills a screen that is set to a resolution of 800x600, but only fills a portion of a screen that is set to 1024x800.