Tables use three basic tags:
- the table tag: <table>
- the table row tag: <tr>
- the table data tag: <td>
Note: The <th> tag is like a <td> tag, except that it automatically makes contained text centered and bold.
Each type of tag can take many attributes for borders, background colors, padding, spacing, font, etc.
Table Tags
The HTML for a simple table with two rows and two columns looks like:
<table border="1">
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>
|
| row 1, column 1 |
row 1, column 2 |
| row 2, column 1 |
row 2, column 2 |
|
Example
The following table has:
- table attributes of border=1 width="75%" align="center"
- row 2 column 1 attribute of align="center" and bgcolor="#ffff66"
<td align="center" bgcolor="#ffff66">row 2, column 1</td>
- row 3 column 1 attribute of colspan="2"
| r1c1 |
r1c2 |
| r2c1 |
r2c2 |
| This cell spans 2 columns |
------------------
In-Class Work
For 5 points, use your editor to create and save a viewable page with:
- Your name and the course name (Web Dev 1) in the title.
- A table that shows a good use of a table for displaying information with:
- at least three columns and three rows
- one of the rows span columns
- at least one cell display in a different color
- Have the instructor check the pages and assign credit when they are correct.
Hint: good uses of tables include things like price lists and personnel contact information.
Extra Credit Point: Put graphics in at least two different cells with descriptive text centered above or below the graphics in the same cells.
|