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:
These lessons are simple, easy to follow, and critically will remain relevant going forward. You can find the previous parts of the series:
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:
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.