Free HTML Tutorial

HTML Table Tutorial

HTML Table 1x1

.
.
<table border=1>
   <tr>
     <th>1st Col </th>
   </tr>
</table>
.
.

Web page should look like this.

1st Col

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.

The table codes all reside within the <table></table> tags. The border=1 modifier makes the lines around the table and also between the cells. I've used this as it's easier to see the following examples. Great layouts are possible with this cool HTML code.
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.

more details...

HTML Table 1x3
.
.
<table border=1>
   <tr>
     <th>1st Col </th>
     <th>2nd Col </th>
     <th>3rd Col </th>
   </tr>
</table>
.
.

Web page should look like this.

1st Col	2nd Col	3rd Col

     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.

more details...

HTML Table 2x3

.
.
<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>
.
.

Web page should look like this.

1st Col	2nd Col	3rd Col
A text	B text	C text

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.

more details on <tr>...

more details on <td>...

Color a row or cell

.
.
<table border=1>
   <tr bgcolor="#ff0000" >
     <th>1st Col </th>
     <th>2nd Col </th>
     <th>3rd Col </th>
   </tr><tr>
     <td bgcolor="#00ff00" >
       A text
     </td>
     <td>B text </td>
     <td>C text </td>
   </tr>
</table>
.
.

Web page should look like this.

1st Col	2nd Col	3rd Col
A text	B text	C text

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.

more details...

Make a wider row

.
.
<table border=1>
   <tr bgcolor="#3355ff">
     <td colspan=3 align=center>
       Web Page Title
     </td>
   </tr>
   <tr bgcolor="#ff0000">
     <th>1st Col </th>
     <th>2nd Col </th>
     <th>3rd Col </th>
   </tr><tr>
     <td bgcolor="#00ff00" >
       A text
     </td>
     <td>B text </td>
     <td>C text </td>
   </tr>
</table>
.
.

Web page should look like this.

1st Col	2nd Col	3rd Col
Web Page Title
A text	B text	C text

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.

more details...

Turn off borders

.
.
<table border=0 >
   <tr bgcolor="#3355ff">
     <td colspan=3 align=center>
       Web Page Title
     </td>
   </tr>
   <tr bgcolor="#ff0000">
     <th>1st Col </th>
     <th>2nd Col </th>
     <th>3rd Col </th>
   </tr><tr>
     <td bgcolor="#00ff00" >
       A text
     </td>
     <td>B text </td>
     <td>C text </td>
   </tr>
</table>
.
.

Web page should look like this.

1st Col	2nd Col	3rd Col
Web Page Title
A text	B text	C text

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.

more details...