How can I customize my Tables?
In the last tutorial we discussed the very basic steps and tags needed to create an HTML Table. In this tutorial we will be discussing how to manipulate and format individual cells, inside the table.
To do this we need to learn how to code the <TD> </TD> tag set and its many Attributes, correctly.
THE TABLE CELL <TD> TAG ATTRIBUTES:
Each table cell requires an Opening <TD> tag and a Closing </TD> tag to work properly. You can insert text, images, anything that you would put on any other portion of your page, into a table cell. There are several attributes you can use to modify your cells:
ALIGN=
This Attribute allows you to define HORIZONTAL ALIGNMENT of text or objects in the cell. Correct values for this attribute are "left", "center" and "right" We code it like this:
ALIGN="right"
VALIGN=
This attribute lets you define the VERTICAL ALIGNMENT of text or objects in the cell. Correct values for this attribute are "top", "absmiddle" or "bottom". We code it like this:
VALIGN="bottom"
COLSPAN=
This attribute allows you to specify how many columns a cell should span across. The correct value is a numerical value entered like this:
COLSPAN="2"
The number you use depends on how many columns you wish to span.
ROWSPAN=
This attribute allows you to specify how many rows a cell should span across. The correct value is a numerical value entered like this:
ROWSPAN="2"
The number you use depends on how many rows you wish to span.
BGCOLOR=
This attribute lets you specify the background color of that individual cell. You complete this attribute by entering a Hexadecimal Color Value, like this:
BGCOLOR="#000000"
WIDTH=
This attribute lets you specify how wide the individual cell should be. You can use the percentage method or the absolute pixel width method.
Percentage method:
WIDTH="35%"
(Note: Using the percentage method will give you a percentage of the width of the table, not the width of the page.)
Absolute method:
WIDTH="150"
This is the width of the cell in PIXELS.
HOW YOU USE ALL OF THESE ATTRIBUTES:
Here is the simple table we created in the last tutorial:
| Cell A | Cell B | Cell C |
| Cell D | Cell E | Cell F |
| Row 1 Row 2 |
You wil notice each row has 3 cells, but what do we do if we want the
second row to have only two cells? If you simply remove one cell, you will notice your table gets all screwed up.
So, what we need to do is modify the cell <TD> tag with an Attribute that will allow us to span one cell across two existing cells. If we use the COLSPAN= Attribute we can stretch a cell across 2 or more columns of the table:
| Cell A | Cell B | Cell C |
| Cell D | Cell F |
| Row 1 Row 2 |
Notice Cell D is now stretched, or SPANNED, across two cells.
Here is how the above table is coded:
<TABLE BORDER="1"> <-- Opening table tag with the border on
<TR> <-- starting the FIRST row with this tag
<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD> Cell C </TD> <-- defining the individual cell
</TR> <-- ending the FIRST row with this tag
(here is where the second row comes in)
<TR> <-- starting the SECOND row with this tag
<TD COLSPAN="2"> Cell D </TD> <-- defining the individual cell (Notice I removed Cell E entirely)
<TD> Cell F </TD> <-- defining the individual cell
</TR> <-- ending the SECOND row with this tag
</TABLE> <-- finishing the table with this tag
Here is a slightly different variant, using the ROWSPAN= attribute:
| Cell A | Cell B | Cell C |
| Cell D | Cell E |
| Row 1 Row 2 |
Notice Cell C is now stretched, or SPANNED, across two cells and ROWS.
Here is how the above table is coded:
<TABLE BORDER="1"> <-- Opening table tag with the border on
<TR> <-- starting the FIRST row with this tag
<TD> Cell A </TD> <-- defining the individual cell
<TD> Cell B </TD> <-- defining the individual cell
<TD ROWSPAN="2"> Cell C </TD> <-- defining the individual cell
</TR> <-- ending the FIRST row with this tag
(here is where the second row comes in)
<TR> <-- starting the SECOND row with this tag
<TD> Cell D </TD> <-- defining the individual cell
<TD> Cell E </TD> <-- defining the individual cell
(Notice I have removed CELL F entirely because CELL C now occupies it's space)
</TR> <-- ending the SECOND row with this tag
</TABLE> <-- finishing the table with this tag
TABLE TIPS TO REMEMBER:
ALL of the Table tags I have shown you are absolutely necessary to properly code your tables! If you leave out a tag or even a single bracket you could wind up with absolutely nothing showing on your page.
Always start a new Row with the <TR> tag and end the Row with the </TR> tag.
Good Luck building your Tables!
