HTML Table 1x1
HTML Tables are an advanced HTML code you can use when you make your own web site. Setup much like a checker board, cells are arranged by rows and columns. Each cell holds either text or web page graphics.
Once we learn how to adjust the cells in a table, we can put text or graphics just about anywhere we want on your own web page.
<table border=1>
<tr>
<th>1st Col</th>
</tr>
</table>
...
| 1st Col |
|---|
The <tr></tr> tags define the rows, while the <td></td> or <th></th> tags define the columns. Notice each of these tags have the opening and closing tags. This is extremely important, as some browsers show a blank page if you get this wrong.
HTML Table 1x3
OK, now we add a couple of columns. This is done by including a couple sets of <th></th> tags.
The difference between the <td> tag and the <th> tag is simply that the <th> tag treats the enclosed text like headings.
Notice the indentations. This is not a requirement, but it makes matching up open/close tags so much easier.
<table border=1>
<tr>
<th>1st Col</th>
<th>2nd Col</th>
<th>3rd Col</th>
</tr>
</table>
...
| 1st Col | 2nd Col | 3rd Col |
|---|
The <tr></tr> tags define the rows, while the <td></td> or <th></th> tags define the columns. Notice each of these tags have the opening and closing tags. This is extremely important, as some browsers show a blank page if you get this wrong.
HTML Table 2x3
We can add a second row with another set of <tr></tr> tags for rows, then fill the cells for each column using the <td></td> tags.
If you haven't noticed the pattern, look closely at this example and compare to the last few examples. Understanding this pattern makes the process easy.
<table border=1>
<tr>
<th>1st Col</th>
<th>2nd Col</th>
<th>3rd Col</th>
</tr><tr>
<td>A text</td>
<td>B text</td>
<td>C text</td>
</tr>
</table>
...
| 1st Col | 2nd Col | 3rd Col |
|---|---|---|
| A text | B text | C text |
Color rows or cells
To color a row, just add a bgcolor modifier to the <tr> tag. To color a cell, just add the bgcolor modifier to the <td> tag. You can color the entire table by adding the bgcolor modifier to the <table> tag.
<table border=1>
<tr bgcolor="red">
<th>1st Col</th>
<th>2nd Col</th>
<th>3rd Col</th>
</tr><tr>
<td bgcolor="green">A text</td>
<td>B text</td>
<td>C text</td>
</tr>
</table>
...
| 1st Col | 2nd Col | 3rd Col |
|---|---|---|
| A text | B text | C text |
Make a Row Span Multiple Columns
To color a row, just add a bgcolor modifier to the <tr> tag. To color a cell, just add the bgcolor modifier to the <td> tag.
We threw in an align=center modifier too. Our choices are left, center and right. This can be very useful and the code is shorter than using the <center></center> tags.
<table border=1>
<tr bgcolor="cyan">
<td colspan=3 align=center>
Web Page Title
</td>
</tr>
<tr bgcolor="red">
<th>1st Col</th>
<th>2nd Col</th>
<th>3rd Col</th>
</tr><tr>
<td bgcolor="green">A text</td>
<td>B text</td>
<td>C text</td>
</tr>
</table>
...
| Web Page Title | ||
| 1st Col | 2nd Col | 3rd Col |
|---|---|---|
| A text | B text | C text |
Turn Off Table Borders
Turning off the borders just allows everything to just kind of float in space. If you watch web pages closely as you surf, many pages use this technique. It allows you to place items on the screen virtually anywhere you want them.
You can especially see this on the cells B Text and C Text.
<table border=0>
<tr bgcolor="cyan">
<td colspan=3 align=center>
Web Page Title
</td>
</tr>
<tr bgcolor="red">
<th>1st Col</th>
<th>2nd Col</th>
<th>3rd Col</th>
</tr><tr>
<td bgcolor="green">A text</td>
<td>B text</td>
<td>C text</td>
</tr>
</table>
...
| Web Page Title | ||
| 1st Col | 2nd Col | 3rd Col |
|---|---|---|
| A text | B text | C text |