HTML Tutorial - Tables

Tables

Tables are used to make data easier to interpret or to just give your document more impact.

Tables are one of the most challenging things to code with HTML. It isn't very hard, it just takes a while to get the hang of. Tables start with the <table> tag, and MUST end with a </table> tag, or the table will not appear at all.

Table Borders

Tables usually contain the border=n attribute within the opening tag. If the border=0, then the table's border is invisible. Usually when you do not use the border attribute the table border will become invisible. This is useful when you want to align text in rows and columns, but don't want a table border around it. If border=1 there is a thin border. border=2 is a little thicker, border=3 a little more thick...and so on.

What you type: What you see:

  <table>
  <tr>
  <td>
  This table has no border.
  </td>
  </tr>
  </table>

  This table has no border.

  <table border="1">
  <tr>
  <td>
  This table has a border of 1.
  </td>
  </tr>
  </table>

  This table has a border of 1.

Table Rows and Cells

From the previous example you may have noticed the <tr> and <td> tags. The <tr> tags define the rows within the table while the <td> tags are the table cells within each row. Most table rows contain more than one cell.

Many times, you will need a heading for a column of cells of the first row. To do this, you will use the <th> opening and </th> closing tag. The table heading tag makes the text in that cell BOLD and CENTERED. You only need use the heading cells when necessary.

What you type:

  <table border="1">
    <tr>
      <th>Heading One</th>
      <th>Heading Two</th>
      <th>Heading Three</th>
    </tr>
    <tr>
      <td>Cell One</td>
      <td>Cell Two</td>
      <td>Cell Three</td>
    </tr>
    <tr>
      <td>Cell Four</td>
      <td>Cell Five</td>
      <td>Cell Six</td>
    </tr>
  </table>

What you see:

Heading One Heading Two Heading Three

Cell One Cell Two Cell Three

Cell Four Cell Five Cell Six

Rowspan and Colspan

The <td> tag has attributes to change the look of the table. For example, in the previous table you may want Cell One and Four to be combined or Cell Two and Cell Three to be combined. In order to do this, you can use the rowspan=n or colspan=n attributes. The rowspan=n allows you to span rows and colspan=n allows you to span columns.

What you type:

  <table border="1">
    <tr>
      <th>Heading One</th>
      <th>Heading Two</th>
      <th>Heading Three</th>
    </tr>
    <tr>
      <td rowspan="2">Cell One & Cell Four</td>
      <td colspan="2">Cell Two & Cell Three</td>
    </tr>
    <tr>
      <td>Cell Five</td>
      <td>Cell Six</td>
    </tr>
  </table>

What you see:

Heading One Heading Two Heading Three

Cell One &
Cell Four Cell Two & Cell Three

Cell Five Cell Six

Other Attributes

You may wish to use the ALIGN and VALIGN attributes to align the contents of cells. If you wish to change the horizontal alignment of the contents of a certain cell, add align=left, align=center, or align=right to the opening <td> tag. If you wish to change the vertical alignment of the contents of a cell, use the valign=top, valign=middle, or valign=bottom attributes. You may also want to try out the WIDTH="n%" attribute, to change the width of a table or a cell.

What you type:

  <table border="1" width="100%">
    <tr>
      <td align="left">Left Align</td>
      <td align="center">Center Align</td>
      <td align="right">Right Align</td>
    </tr>
  </table>

What you see:

Left Align Center Align Right Align

**Putting together everything we have learned so far, you could produce an HTML document that looks like this:

<html>

   <body vlink="red" link="#330066">
    <h2>My First Web Page</h2>
    <hr>
    <div align="center"><img src="http://www.winona.edu/warrior_head.gif" alt="WSU Warrior Head"></div><p>
    <table align="center" width="60%" border="1" cellpadding="5">
     <tr>
      <td>
       <h4>Things I Like To Do:</h4>
       <font size="+2" face="verdana" color="blue"><ul>
        <li>Read
        <li>Run the lakes
        <li>Climb the bluffs
        <li>Watch T.V.
       </ul></font>
      </td<
      <td align="left">
       <h3>My favorite links</h3>
        <font face="arial"><a href="http://www.winona.edu/">Winona State</a><p>
        <a href="http://www.winona.edu/athletics">Warrior Athletics</a><p>
        <a href="http://www.espn.com">ESPN.com</a><p>
        <a href="http://www.weather.com">Weather</a></font><p>
      </td>
     </tr>
    </table>
   </body>

</html>

To view this web page, click here.

<---Back to Definition Lists HTML Tutorial Index--->