Tutorial Tuesday

Tables

The code for a sample table looks like this:

<table border="1" cellpadding="1" cellspacing="1" width="100">
<caption>Table Elements</caption>
<tr>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>13.95</td>
<td align="center">72</td>
</tr>
</table>

Table Elements

Table
<table>...</table>
Required to create a table; contains all other table elements.


Table caption
<caption>...</caption>
Optional; adds a caption or title, which appear above the table by default.

Table row
<tr>...</tr>
Required; contains all data for a table row.

Table header
<th>...</th>
Optional; typically designates the top row or left column. By default, text in a header cell will appear bold and centered.

Table data
<td>...</td>
Required, unless <th> is being used; designates table cell contents.


Attributes for <table>

align
Aligns the entire table horizontally on the page.
Values include "left", "center", and "right".

border
Determines whether a border will appear around the table. By default, boders do not appear on tables.
Values include "1" (higher number = thicker border) and "0" (no border).

cellpadding
Determines the amount of space between cell content and the inner cell border.
Values can be specified in pixels or percentage of the browser window.

cellspacing
Determines the amount of space between table cells.
Values can be specified in pixels or percentage of the browser window.

width
Determines how far the table will extend horizontally across the page.
Values can be specified in pixels or percentage of the browser window.


Attributes for <tr>

align
Aligns content horizontally in all cells in the row.
Values include "left", "center", and "right".

valign
Aligns content vertically in all cells in the row.
Values include "top", "bottom", "middle", and "baseline".

bgcolor
Determines the background color for a row of cells.
Values can be specified by color name or hexadecimal code (e.g., "green", "#00FF00").

style
Specifies custom formatting for a row of cells.
Values are a text or numeric definition (font, size, color, etc.).


Attributes for <td>

align
Aligns content horizontally within a single cell.
Values include "left", "center", and "right".

valign
Aligns content vertically within a single cell.
Values include "top", "bottom", "middle", and "baseline".

colspan
Specifies the number of columns that a cell will span across (i.e., occupy).
Values are specified by number.

rowspan
Specifies the number of rows that a cell will span across (i.e., occupy).
Values are specified by number.

bgcolor
Determines the background color for a row of cells.
Values can be specified by color name or hexadecimal code (e.g., "green", "#00FF00").

height
Determines the vertical height of a cell.
Values are specified in pixels.

width
Determines the horizontal width of the cell.
Values can be specified in pixels or percentage of the browser window.


For more about tables, visit: w3schools.com