| ASP |
| CGI |
| FrontPage |
| HTML |
| Java |
| JavaScript |
The Complete Guide to Tables - part 2
In the last article we discussed some of the more basic functions of tables. In this article we will build on those skills and try to show the importance of using tables in your HTML documents. Tables can be very important in presentations. You can use tables to position data in graphs and lists. Besides being functional tables can also improve the looks of entire presentations, But before we try to make some graphs we need to learn a few more of the options we can use when making a table: the <TH></TH> tag. We will learn the cellspacing, cell padding and border options. We will also learn about backgrounds in tables and table cells. The <TH></TH> tags are like the <TD></TD> tags we learned last week in that they are used to display data that are entered in them, but the <TH></TH> tags are used for table headings. Allow me to demonstrate :
 |
<table border="1">
<tr>
<th>Row 1 Column 1
</th>
<td>Row 1 Column 2
</td>
</tr>
<tr>
<th>Row 2 Column 1
</th>
<td>Row 2 Column 2
</td>
</tr>
</table> |
 |
would create this table:
| Row 1 Column 1 | Row 1 Column 2 |
|---|---|
| Row 2 Column 1 | Row 2 Column 2 |
Cell spacing and padding
Cell spacing and cell padding can be used to separate cells on your tables. These options are handy if your tables data seems to clumped together. To use the cellspacing and cellpadding options simple insert them into your table tag like this.
|
|
<table border="1"
cellspacing="5"
cellpadding="5">
<tr>
<th>Row 1 Column 1
</th>
<td>Row 1 Column 2
</td>
</tr>
<tr>
<th>Row 2 Column 1
</th>
<td>Row 2 Column 2
</td>
</tr>
</table> |
|
|
This would add a 5 pixel space between your table cells.
| Row 1 Column 1 | Row 1 Column 2 |
|---|---|
| Row 2 Column 1 | Row 2 Column 2 |
Table Borders
Table borders are an easy way to make your tables stand out on your pages. This option add a border of a specified width (pixel) on all sides of your table. To use the border option just insert it into your table tag and give it a pixel value just as we with the cellpadding and cellspacing options.
| Row 1 Column 1 | Row 1 Column 2 |
|---|---|
| Row 2 Column 1 | Row 2 Column 2 |
Colored Cells
Tables and their individual cells can be colored using the bgcolor option just like the one you may use in your body tag. You can use this option in the <TABLE> and <TD> tags. The <TABLE> color will fill all cells without their own bgcolor option to its color. Background colors in tables are specified with the same Hexecidecimal codes used to specify the color of your <BODY> background (with the exception of 16 predefined colors i.e. red, green, blue, ect...).
Now that we have learned these new options for tables Lets Make a Bar graph that uses everything we know.
|
|
<table border="2"
bgcolor="gray"
cellspacing="0"
cellpadding="0">
<tr>
<th>Sales
</th>
<td bgcolor="red">
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
</td>
<td bgcolor="red">
</td>
</tr>
<tr>
<td >1.5 mil
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
</td>
<td bgcolor="red">
</td>
</tr>
<tr>
<td >1.0 mil
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
</td>
<td bgcolor="red">
<tr>
<td >.5 mil
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
</tr>
<tr>
<td >0 - .5 mil
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
<td bgcolor="red">
<font color="red">g
</font>
</td>
</tr>
<tr>
<td >
<font color="gray">g
</font>
</td>
<td >Nov
</td>
<td>Dec
</td>
<td>Jan
</td>
<td>Feb
</td>
</tr>
<tr>
<th colspan="5">Year
</th>
</tr>
</td>
</tr>
</table>
|
|
|
| Sales | g | |||
|---|---|---|---|---|
| 1.5 mil | g | g | ||
| 1.0 mil | g | g | ||
| .5 mil | g | g | g | |
| 0 - .5 mil | g | g | g | g |
| g | Nov | Dec | Jan | Feb |
| Year | ||||
Absolute Spacing with Tables
Absolute pixel spacing with tables allows you to get your pages to look the same for any resolution. This can be easily accomplished by using tables to control the entire layout of your HTML pages. Next weeks article will demonstrate this with some working examples for you to look at.
Author: Rich Stock
Date: [09/21/97]
More articles about HTML
More articles by Rich Stock
Author Biography