|
|
|
               |
Tables have two purposes for web developers:
- The first the obvious, arranging data into a table format. For example a menu, or arranging the input fields of a form into columns and rows. This is like the tables function on a word processing document.
- The second is more of a graphic design purpose. Cutting up the design into different sections, there by creating a layout using invisible tables.
Start out with the table tag: <TABLE>…</TABLE>, this just sets up the presence of a table, by itself it isn't very useful since it doesn't have any rows or columns.
The next step is to insert your table rows using the <TR>…</TR> tag. Example:
<TABLE>
<TR> Row 1 </TR>
<TR> Row 2 </TR>
</TABLE>
Note: technically this sets up the rows but it is still not a complete table even with just 1 column you would still need to use the <TD> tag, this is for illustrative purposes only.
Now that you have your rows set up, you can set up your data cells inside of the rows (or columns), using the <TD>…</TD> tag. Example:
<TABLE>
<TR>
<TD> Row 1, Column 1 </TD>
<TD> Row 1, Column 2 </TD>
<TD> Row 1, Column 3 </TD>
</TR>
<TR>
<TD> Row 2, Column 1 </TD>
<TD> Row 2, Column 2 </TD>
<TD> Row 2, Column 3 </TD>
</TR>
</TABLE>
This is how the table will end up looking:
| Row 1, Column 1 | Row 1, Column 2 | Row 1, Column 3 |
| Row 2, Column 1 | Row 2, Column 2 | Row 1, Column 3 |
This is just the basic layout of a simple table, you can also merge rows and columns, but you cannot merge a row and a column at the same time or in the same cell. Basically you cannot have the merged column and the merged row cross each other to for a T or an L shaped configuration.
The next sections will go into customizing your table using the attributes for each of the 3 basic table tags.
© Copyright 2000-2002 by Pepmint.com. All Rights Reserved