Go to Lesson #11: More With ImagesGo to lesson #13: More About TablesTable Basics

Now it's time to learn about one of the most useful and important features in HTML: tables. Using tables you can do some extraordinary formatting of your web pages - formatting that would be very difficult without these constructs.

Creating your basic table

In it's simplest form, a table consists of an opening <TABLE> tag, some rows and columns. The <TABLE> tag defines the start of the table and the characteristics such as the border type, color, background image and so forth.

You define the rows of the table with the <TR> tag.  Each <TR> and corresponding </TR> tag is one row. 

The columns are defined with the <TD> tag. Each <TD> and it's closing </TD> is one column.

A basic three column, two row table is shown below.

Your basic 3 by 2 table
 
1 2 3
4 5 6 
<table border="1">
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

You can see that there is a one pixel border, two rows (the <TR> tags) and three columns (the <TD> tags). Within each cell of the table is one character. As you can see, the data goes within the column tags.

Now let's play around with the borders for a bit. The next example removes the border from the table entirely.

Your basic 3 by 2 table without a border
 
1 2 3
4 5 6 
<table>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

You can also make a wider border, as shown below. This is a 12 pixel wide border.

Your basic 3 by 2 table with a wide border
 
1 2 3
4 5 6 
<table border="12">
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

The colors of the borders may be changed as well.

Your basic 3 by 2 table with a colored border
 
1 2 3
4 5 6 
<table border="1" bordercolor="#FF0000">
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

You can set the background colors of the entire table.

Your basic 3 by 2 table with a colored border and background
 
1 2 3
4 5 6 
<table border="1" bordercolor="#FF0000" bgcolor="#008000">
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

You also have control over each individual cell. In the example below, we have set a cell to have  a different background color than the rest of the table.

Your basic 3 by 2 table: changing the color of a single cell
 
1 2 3
4 5 6 
<table border="1" bordercolor="#FF0000" bgcolor="#008000">
   <tr>
      <td bgcolor="#800000">1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

By setting the cell padding and spacing, you can create some nice effects.

Your basic 3 by 2 table: setting cell padding and spacing
 
1 2 3
4 5 6 
<table border="1" bordercolor="#FF0000" bgcolor="#008000" cellspacing="6" 
cellpadding="10">
   <tr>
      <td bgcolor="#800000">1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

You can give the table a nice caption if you want.

Your basic 3 by 2 table with a caption
 
Sample Table
1 2 3
4 5 6 
<table border="1" bordercolor="#FF0000" bgcolor="#008000">
<caption><font size="1">Sample Table</font></caption>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
    </tr>
</table>

The text around the table can be made to flow to the left or right.

Your basic 3 by 2 floating to the right
Sample Table
1 2 3
4 5 6

So here is some sample text designed to take up space and show how this alignment thing works. As you can see, the table and caption is off to the right while the text is here on the left. Pretty darn cool, eh? This is a great effect for creating very nice looking documents. 

<table border="1" bordercolor="#FF0000" bgcolor="#008000" align="right">
<caption><font size="1">Sample Table</font></caption>
  <tr>
     <td>1</td>
     <td>2</td>
     <td>3</td>
  </tr>
  <tr>
     <td>4</td>
     <td>5</td>
     <td>6</td>
  </tr>
</table>So here is some sample text designed to
take up space and show how this alignment thing works. As you can see,
the table and caption is off to the right while the text is here on
the left. Pretty darn cool, eh? This is a great effect for creating
very nice looking documents.

You can also put tables within tables (this is called nesting) for some very nice effects.

Your basic 3 by 2 table with a nested table
 
1 2 3
4 5 6
6a 6b
6c 6d 
<table border="1" bordercolor="#FF0000">
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
   </tr>
   <tr>
      <td>4</td>
      <td>5</td>
      <td>6
         <table border="1" bordercolor="#FF00FF">
            <tr>
               <td>6a</td>
               <td>6b</td>
            </tr>
            <tr>
               <td>6c</td>
               <td>6d</td>
            </tr>
         </table>
      </td>
   </tr>
</table>