Lessons | previous | next |

21. Tables

Let's set the table...
Once You

 Setup

may

N e v e r

 Go
you Back!
...and completely
revolutionize
ordinary web pages
Tables were introduced into HTML 3.0 and further enhanced by Netscape to add another dimension to web page design. They provide a structure for organizing other HTML elements into "grids" on the page. One of the more obvious uses of tables is when you have to format... columnar tables of text! But, tables also open up the door for many other page layout options.

The HTML for tables can look very complex -- but we will start simple and build up some tables for our Volcano Web lesson.

For starters, keep in mind this concept:

Tables start being built from the top left, then across the columns of the first row, then to the second row, across the columns of the second row... 

      -->  -->  -->  -->  -->  --> 
      ___________________________|
      |
      -->  -->  -->  -->  -->
We will call each grid in a table a cell.

Basic Table Tags

The HTML for the basic table structure is shown below:

HTML Result 
<table border=1>
  <tr>
  <td>Row 1 col 1</td>
  <td>Row 1 col 2</td>
  <td>Row 1 col 3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td>Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 2</td>
  <td>Row 3 col 3</td>
  </tr>

</table>
Row 1 col 1 Row 1 col 2 Row 1 col 3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3

The border=1 attribute in the <table> tag instructs the browser to draw a line around the table with a thickness of 1 pixel. Note how each row is defined by Table Row tags <tr>...</tr> and then cells in each row are defined by Table Data <td>...</td> tags. Each <td>...</td> tag can contain any type of HTML tag we have used in this tutorial -- headers, styled text, hypertext links, inline graphics, etc. Within this tag you can uses several attributes to control the alignment of items in a single cell:

Horizontal Alignment Vertical Alignment
  • <td align=left> aligns all elements to the left side of the cell (this is the default setting)
  • <td align=right> aligns all elements to the right side of the cell
  • <td align=center> aligns all elements to center of the cell
  • <td valign=top> aligns all elements to the top of the cell
  • <td valign=bottom> aligns all elements to the bottom of the cell
  • <td valign=middle> aligns all elements to the middle of the cell (this is the default setting)

You can combine these attributes:

  <td align=left valign=bottom>

This HTML will produce a cell with items aligned along the left and bottom of the cell.

Rows and Columns

The table shown above is pretty simple and square -- three rows by three columns. Look what we can do if using the colspan and rowspan attributes in the <td>...</td> tags.

HTML Result 
<table border>
  <tr>
  <td>Row 1 col 1</td>
  <td align=center colspan=2>
   Row 1 col 2-3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td>Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 2</td>
  <td>Row 3 col 3</td>
  </tr>
</table>
** Note the attribute for the second cell of the first row -- it spans 2 columns. We have also aligned the text in the center of this cell.
Row 1 col 1 Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3
Okay, now that we have had a cell span two columns -- let's make a cell that spans two rows. Remember to follow the HTML as it builds from the top left across, then down, then across...
HTML Result 
<table border=1>
  <tr>
  <td>Row 1 col 1</td>
  <td align=center colspan=2>
   Row 1 col 2-3</td>
  </tr>

  <tr>
  <td>Row 2 col 1</td>
  <td valign=top rowspan=2>
  Row 2 col 2</td>
  <td>Row 2 col 3</td>
  </tr>
  
  <tr>
  <td>Row 3 col 1</td>
  <td>Row 3 col 3</td>
  </tr>
</table>
Row 1 col 1 Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 3
NOTE: Look at the HTML for the first row. The Table Header tags <th>...</th> function exactly like the <td>...</td> tags except that any text is automatically made bold and all items are automatically centered.

Also see that in the cells for "Long Valley" you must use the HTML for the special characters to display the symbols for "<", ">", and "&" (See lesson 10)

previous: "Extra Alignment" | next: "More with Lists and Images" |