Today's discussion is on the <tr> and <td> tags.
Don't try to learn all of this now. We're just making a list. We'll learn what everything does as we work with our tables one step at a time.
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>
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>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.
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.
Again, we have a lot of (too much) info, but we'll learn what each attribute does one at a time.
Ok, let's roll up our sleeves and start making some tables.
Make a 1x1 table and put a small image in it. Then we'll play with some attribures to see what they do.
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td>
<img src="URL">
</td>
</tr>
</table>
|
|
As always, questions and comments are welcome.
Happy tabling,
Gnubee