Tables!
Tables are basically tags that allow you to organize information on a web page. The easiest way to practice tables is to see examples and copy them. You can cut and paste the text you find here into your own pages and substitute your own content until you get the hang of doing it yourself.
I use text only in the following examples but you could use images by simply putting in the image tag we learned last week.
Fair Warning!!! This is not the easiest material but I have tried to make it as simple as possible. You will need a great deal of trial and error. You must follow each key stroke exactly. The smallest mistake will mean major difficulties.
What Is A Table?
| THIS |
IS A |
TABLE! |
| NOW
| SEE
| HOW! |
Let's start simple....We'll use the data from the above table.
<![CDATA[
<TABLE>
<CAPTION>What Is A Table?</CAPTION>
<TD>THIS
<TD>IS A
<TD>TABLE!<TR>
<TD>NOW
<TD>SEE
<TD>HOW!<TR>
</TR>
</TD>
</TABLE>
]]>
You need to put this HTML in the BODY tag of your HTML Page. Here I am using text but you can use any HTML you would like even images!
As you can see, you start by defining the TABLE, you may add a CAPTION (optional), each "CELL" of the TABLE starts with TD (which stands for Table Data) and, does not need to end with /TD until the last Table Data, A TR defines a new Table Row and does not need to end with /TR until the last Table Row and the whole thing ends with a /TABLE!
<![CDATA[
<TABLE>
<CAPTION> What Is A Table? </CAPTION>
<TR>
<TD> THIS </TD>
<TD> IS A </TD>
<TD> TABLE! </TD>
</TR>
<TR>
<TD> NOW </TD>
<TD> see </TD>
<TD> HOW! </TD>
</TR>
</TABLE>
]]>
What Is A Table?
| THIS
| IS A
| TABLE! |
| NOW
| see
| HOW! |
Hey!!! The table doesn't have a border!!! To give a border definition you would simply add to the table line:
<![CDATA[
<TABLE BORDER=1>
]]>
This will give your table a BORDER!
What Is A Table?
| THIS
| IS A
| TABLE! |
| NOW
| see
| HOW! |
You can even define cell's spacing and padding on this line:
<![CDATA[
<TABLE BORDER=2 CELLSPACING=2 CELLPADDING=2>
]]>
Well that's fine and dandy, but the data inside the tables aren't centered like in the above example! That's easy to fix! In each TD you can define the data's alignment. You can use center, top, bottom, left or right. I will show center.
<![CDATA[
<TD ALIGN=CENTER>
]]>
This will center any data within the cell.
What Is A Table?
| THIS
| IS A
| TABLE! |
| NOW
| see
| HOW! |
Well this Black and White on Blue is darn boring!!!! What can I do about it!
<![CDATA[
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">THIS
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">IS A
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">TABLE!<TR>
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">NOW
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">see
<TD ALIGN=CENTER BGCOLOR="#000000"><FONT COLOR="#FFFFFF">HOW!<TR>
</TR>
</TD>
</TABLE>
]]>
Using Hexadecimal Color Codes (the same ones you use to define the body of a page in an earlier item) you can define each cell's characteristics, including font face.
What Is A Table?
| THIS
| IS A
| TABLE!
| NOW
| see
| HOW! |
|
That is the basic table intro. The next bit of information is more advanced so tackle it at your own risk.
Colspan and Rowspan
Say you want one of your rows to take up two or more columns or vice versa. This is where the COLSPAN and ROWSPAN tags come into play.
The easy one to use is COLSPAN. This tag determines how many columns across a cell of a table will be.
<![CDATA[
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER COLSPAN=3>THIS IS A TABLE!<TR>
<TD ALIGN=CENTER>NOW
<TD ALIGN=CENTER>see
<TD ALIGN=CENTER>HOW!<TR>
</TR>
</TD>
</TABLE>
]]>
What happens here is "NOW see HOW" takes up 3 cells in the second table row. Therefore, when the colspan is three, only one cell is shown for the top. This appears like this:
What Is A Table?
| THIS IS A TABLE! |
| NOW
| see
| HOW! |
If a colspan of two was used, one cell would be left over on the top row.
<![CDATA[
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER COLSPAN=2>THIS IS A
<TD ALIGN=CENTER>TABLE!<TR>
<TD ALIGN=CENTER>NOW
<TD ALIGN=CENTER>see
<TD ALIGN=CENTER>HOW!<TR>
</TR>
</TD>
</TABLE>
]]>
What Is A Table?
| THIS IS A
| TABLE! |
| NOW
| see
| HOW! |
The rowspan is a little tricky to keep track of. Since the cell expands down a column the number of rows you specify, the other table rows will be short on cell..... Here's an example:
<![CDATA[
<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=1>
<CAPTION>What Is A Table?</CAPTION>
<TD ALIGN=CENTER ROWSPAN=3>THIS IS A TABLE!
<TD ALIGN=CENTER>NOW<TR>
<TD ALIGN=CENTER>see<TR>
<TD ALIGN=CENTER>HOW!<TR>
</TR>
</TD>
</TABLE>
]]>
What Is A Table?
| THIS IS A TABLE!
| NOW |
| see |
| HOW! |
You see, the first row is "THIS IS A TABLE" and "NOW", but "THIS IS A TABLE" takes up three rows, thus one column is "borrowed" from the next two rows.