Teach yourself HTML: Part 4 Tables

This Multi-Part series will teach you the Beginnings of HTML. HTML Has many applications, from creating webpages, to .hta files to even formatting blog posts how you want.

These lessons are simple, easy to follow, and critically will remain relevant going forward. You can find the previous parts of the series:

Part 1; Part 2; Part 3

For Addtional Resources, try HTML5: Up and Running or The Definitive Guide to HTML5 

4.1 Tables
This entire section is devoted to one element of html. This element is the table. It can be used to display scientific data or for page layout. It should be noted that people who use text only browsers, such as lynx, are incapable of displaying tables, so they arrange the table verticly, the first column on top of the second, the second column on top of the third and so on.

Table Setup

Tables are defigned useing the <TABLE></TABLE> tags. Between these tags go the tags that tell the browser how to display the data. The <CAPTION></CAPTION> tags go dirrectly bellow the <TABLE> tag. This tag tells the browser what the caption of the table should be. Next is the table row tag <TR></TR>. This tag defigns the rows. The tags that defign the individual cells that make up the columns go between the starting and ending tags. All of the table rows are defigned useing this tag. To defign individual cells you use the table defign tag <TD></TD>. The exception to this rule is if you want the cell to serve as a caption for the collumn, in wich case you would use the table heading <TH></TH>
tag to define the cell.

Sample Table

Below you will find a table that shows what each line of code does . The table has 2 rows and 2 columns with a caption.

<TABLE>
<CAPTION>The Caption</CAPTION>
<TR>
<TH>1stRow 1stColumn</TH>
<TH>1stRow 2stColumn </TH>
</TR>
<TR>
<TD>2stRow 1stColumn </TD>
<TD>2stRow 2stColumn </TD>
</TR>
</TABLE>

This will give you something that looks like this:

The Caption

1stRow 1stColumn	1stRow 2stColumn
2stRow 1stColumn	2stRow 2stColumn

Table Attributes

You can set the background color of the table, row, or individual cells by inserting the BGCOLOR attribute as described in lesson 4 to the <TABLE> tag, the <TR> tag, the <TH> tag, and to the <TD> tag. In the <TABLE> tag you can also set the border thickness useing the border attribute. The default is 1, 0 is no border. An example of this is showen below:

<TABLE BORDER="0"></TABLE>

an example of adding color to a cell is showen below

<TD BGCOLOR="BLUE"></TD>

You can aso set the alignment of the table in the <TABLE> tag to either left, center, or right. Also you can set the width of a table, cell, or row by adding the width attribute to any of these elements. Any width attribute can be expreesed as a percentage of screen size or as a fixed number of pixals. An exampl show ing the alignment and width of a table is below

<TABLE BORDER="0" ALIGN="CENTER" WIDTH="75%"></TABLE>

I should also mention the COLSPAN= and ROWSPAN= attributes. these attributes are applied to the <TD> tags and allow that cell to span the specified number of rows or columns. this is handy for tabular data, where multiple cells can be grouped.

In the example below, we span the first row, and the first column. The code

<TABLE >
<TR>
<TH >1stRow 1stColumn</TH>
<TH COLSPAN=2>1stRow 2ndColumn COLSPAN=2 </TH>
<!-- skip spanned column -->
</TR>
<TR>
<TD ROWSPAN=2>2ndRow 1stColumn </TD>
<TD>2ndRow 2ndColumn </TD>
<TD>2ndRow 3rdColumn </TD>
</TR>
<!-- skip spanned row -->
<TD>3rdRow 2ndColumn </TD>
<TD>3rdRow 3rdColumn </TD>

</TR>
</TABLE>

Produces the following table:

1stRow 1stColumn	1stRow 2stColumn COLSPAN=2
2stRow 1stColumn ROWSPAN=2	2ndRow 2ndColumn	2ndRow 3rdColumn
	3rdRow 1stColumn	3rdRow 3rdColumn

It should be worth noting that most tables have also been replaced by CSS, especially for page layout. that said, tables are still valid, and quick and easy to do.