Lesson 3
<tr> & <td>
Today's lesson is on the <tr> and <td> tags.
The <tr> tag is used to start each row. The </tr> tag is used to close each row. <table>
<tr> <!-- open a row -->
Cells go here.
</tr> <!-- close the row -->
<tr> <!-- open another row -->
Cells go here.
</tr> <!-- close the row -->
</table>
The one <tr> Attribute:
You can add bgcolor to a row. It will override the table bgcolor for that row.
The <td> (table data) tag defines a cell. The cell is where your "stuff" goes. The cell is where the "action" in tables occurs. A cell can have anything in it: text, an image, links, chunks of code, even another table.
Close each cell with </td>.
The td tag can give each cell in a table it's own look: <table>
<tr>
<td <!-- open a cell -->
bgcolor="?"
background="URL"
height="?"
width="?"
align="?" (left, center or right)
valign="?" (top, middle or bottom)>
<!-- Put your stuff here -->
</td> <!-- close the cell -->
</tr>
</table>
Each cell can have its own bgcolor. Enter a color.
Each cell can have its own background. Enter the URL of an image.
You can specify height and/or width for a cell by percentage or pixels. If you don't use these attributes, the cell will simply adjust itself to match your data.
Key Concepts (the BIG SECRETS)
- Each cell in a row determines a column.
- All cells in the same row will have the same height regardless of what is in them.
- All cells in the same column will have the same width regardless of what is in them. Imagine that a ruler is being used to line up the edges of the cells in any one column.
- Each row in the same table must have the same number of cells.
You can align data in each cell horizontially. Use align="left", align="center" or align="right". The default is "left".
You can also align the data in each cell vertically. Use valign="top", valign="middle" or valign="bottom". The default is "middle".
We'll add more <td> attributes later. As always, questions and comments are welcome. One more time:
I love tables!
Tables are my friend!
I am the mighty creator!
Happy tabling!
Gnubee
|