Note: this tutorial will display oddly on some browsers/screen resolutions because of the combination of "pre" tags and tables. You might try a smaller font and/or a higher screen resolution. We will also offer much of the code and the tables as free standing files you can view via links in the tutorials.
Hopefully you followed along with part 2 and now have your first table under your belt. Now we will explore the attributes available for the second container, the row or 'tr' tag. There are several main attributes that you can use to control the layout of your rows within the table container: align='*', valign='*', and bgcolor='*'.
Tables are broken into horizontal units. A table could have just one row, but often it has many. The table tags can be repeated once for each row in the table. A three row table would look like this:
<table border="2" cellspacing="0" cellpadding="0" width="100%">
<tr>table data</tr>
<tr>table data</tr>
<tr>table date</tr>
</table>
In part four we will discuss what goes into the table data part of a row, because the row container does nothing without the table data tag we will learn in part 4 of this tutorial. But for now, let's discuss the attributes available for the row tag.
Content that fills each row within your table can be forced to the left, right or center of the row horizontally. The default is left. We have an example for you, but your code might look like this to get the results you want:
<tr align='left'><td>left</td></tr>
<tr align='center'><td>center</td></tr>
<tr align='right'><td>right</td></tr>
Simple examples of these attributes don't necessarily describe/show the point being made -- I have to cheat and add a height attribute for demonstration purposes, which isn't fair because height isn't actually an attribute permitted for this container. You'll have to forgive me. If you have content in a row of a specified height, then that content may go into the row at the top, in the middle or at the bottom. You can specify which with this attribute, but the default is 'middle'. We have an example for you, but your code might look like this:
<tr height='100' valign='top'><td>top</td></tr>
<tr height='100' valign='middle'><td>middle</td></tr>
<tr height='100' valign='bottom'><td>bottom</td></tr>
Table rows by default will have your body background color. You can however specify a different color. It looks very nice for example to make every other row a slightly different color to make the eye follow the content horizonally without confusing which row you were studying. Here is an example of that:
<tr bgcolor='#ff0000'><td>red</td></tr>
<tr bgcolor='#00ff00'><td>green</td></tr>
<tr bgcolor='#0000ff'><td>blue</td></tr>
You may also if you wish use a permitted color instead of the red/green/blue color attribute. We also have a sample file of this three color row example using both color formats here.
As you get more advanced with using rows and cascading style sheets (CSS), you can use the id or class attributes as well to apply style sheet formatting to a row. If this means nothing to you now, don't worry, you will learn about CSS at a later time and then realize all it can do for you.
Of course all of these attributes can be combined for each row, just like the attributes for the table tag could be mixed and matched appropriately.
In the next tutorial in this series we look at the attributes applicable to the column or "td" tag as it is known, which is the two letter abbreviation for table data (note coming soon).
Tables Tutorial: part 1 :: part 2 :: part 3
So if you are ready to learn more ...
Back to the Tutorial Index