TABLES
Basic Examples ~ Cafe Menu (colspans and rowspans)
Tables allow us to display information in columns, much as tables are used in word processing for charts and graphs. Tables are a little tricky to code at first...
Create your table on paper first - it will be much easier to "code"!
HTML tables have:
rows -- horizontal
columns -- vertical
cells -- the intersection of a row and column
Tables must have the same number of cells in each table row.
Borders can be visible or transparent and can vary in thickness.
| Example | |||||||
|
This Table has 3 rows and 2 columns: |
|||||||
|
<table> <tr> <tr>
<tr> </table> |
|
||||||
Tips:
You can create a blank cell:
<td> </td>
you can have a cell "span" several columns to equal the same number of cells per row.
<td colspan="2">
Sometimes you want to have more than one line of text in a cell. Since browsers ignore the ENTER key, you break the line by adding <br / > where you want the line to stop.
Table Summary:
Provides alternative text to the table for those that are blind or have text-only browsers.
<table summary="table example">
Enhancements:
Axis:
This tag provides blind or text-browser users a brief description of cell data.
<td axis="description of cell">Cell Data</td>
Scope:
Scope allows you to transfer attributes from one cell to other cells in a table without retyping the attributes.
· Col - sets the rest of the column
· Colgroup - sets the rest of the colgroup
· Row - sets the rest of the row
· Rowgroup - sets the rest of the rowgroup
<table cellpadding="5" cellspacing="5" summary="table of activities" >
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td>Monday's Book-it</td>
<td>Bridge</td>
<td>Solitares</td>
</tr>
<tr>
<td>Salad</td>
<td>Home cooking</td>
<td>Brunch</td>
</tr>
</table>
Displays as:
| Monday | Tuesday | Wednesday |
|---|---|---|
| Monday's Book-it | Bridge | Solitares |
| Salad | Home cooking | Brunch |