Back: Frames

Next: CSS General Guidelines

HTML Tables

Tables are a very useful way to organize and place your content in HTML. Without tables, you can't have two object beside eachother - An image with text, for example. However, with the use of tables, just like any other table of values you can create rows and columns; By placing objects such as images and text into the rows and columns you can place things side-by-side. Remember that when you form rows and columns, the "boxes" formed are called cells. (See the example below for more info.)

A table is always started by the <table> tag, and ended with </table>.

A little warning

Tables can be very confusing to understand at once, so don't worry if you have to re-read this page many times to grasp them.

How things work

Tables are as said above always started with the <table> tag. However inside <table> there must be <tr>s, which represent rows in your table. To make things worse, <td>s which represent your table data or cells, are nested inside these <tr> rows. And it's only inside the <td>s you can place your own content such as images or text! Essentially a table has four layers, listed in detail below.
(Click on any 'Example' link to see the code used to create that table)

  • <table>: This is the highest layer.
    Example: The table is outlined the table in red.

  • <tr>: The rows in the table.
    Example: The table is outlined the table in red, each row in green.

  • <td>: The cells in the rows.
    Example: The table is outlined the table in red, each row (tr) in green and each cell (td) is outlined in blue.

  • Your content: This depends on what you want to put inside the table cells. It can be images, text or anything at all.
    Example: The outlines are the same as the example before, however this time there is text placed within in the cells.

    I am cell 1 in row 1

    I am cell 2 in row 1

    I am cell 1 in row 2

    I am cell 2 in row 2

There are many attributes that can be used with tables to help design how they look.

<table>'s attributes

  • border=: The border, in pixels, a table will have. Since table borders are pretty ugly, you usually want to set this to "0" to disable the border.
  • width=: Manually set the width of the table. Remember, this screen is probably around 1024 pixels wide so don't make this number too big (over 975), or too small (below 400) either! Width can be used (just as with the frames) in units of pixels, as a percentage (use "xx%") or a "*".
  • height=: Manually set the height of the table. Unless you have a specific reason to do this, don't. Your table will get bigger as they need to.
  • cellspacing=: The space in pixels in between each cell in the table
  • cellpadding=: Similar to cellspacing=, however this is the the space in pixels between the content and the border inside a cell rather than outside.
  • align= "left" || "center" || "right": Align the table on the screen according to the value passed.

<tr>'s attributes

  • bgcolor=: The value of this, given either by name (eg "blue") or by hex code (eg "#f5e6a2") will be set as the background color for the entire row.
  • valign= "top" || "middle" || "bottom": Vertically align the text according to the value passed.
  • height=: Manually set the height of the row. Unless you have a specific reason to do this, don't. Your row will get bigger as they need to.

<td>'s attributes

  • width=: Manually set the width of the cell. Careful, pushing a cell to big will squish nearby cell's contents! Width can be used (just as with the frames) in units of pixels, as a percentage (use "xx%") or a "*".
  • height=: Manually set the height of the cell. Unless you have a specific reason to do this, don't. Your cells will get bigger as they need to.
  • align= "left" || "center" || "right": Align the contents of the cell according to the value passed.
  • colspan=: The value of colspan is the number of columns (cells) a given <td> will occupy (including itself). For example, if you wanted one big image at the top of a page and then three columns of text like a newspaper, you could use code like this:
    <table border="1" width="500">
      <tr>
        <td colspan="3">
          <p align="center">[     I M A G E   H E R E     ]</p>
        </td>
      </tr>
      <tr>
        <td>
          <p align="center">Text Column 1<br>Text Column 1<br>Text Column 1<br></p>
        </td>
        <td>
          <p align="center">Text Column 2<br>Text Column 2<br>Text Column 2<br></p>
        </td>
        <td>
          <p align="center">Text Column 3<br>Text Column 3<br>Text Column 3<br></p>
        </td>
      </tr>
    </table>
    

    That would create a table like the one below:

    [ I M A G E H E R E ]

    Text Column 1
    Text Column 1
    Text Column 1

    Text Column 2
    Text Column 2
    Text Column 2

    Text Column 3
    Text Column 3
    Text Column 3


  • rowspan=: The value of rowspan is the number of rows a given <tr> will occupy (including itself). For example, if you wanted one big image with three rows to the left of the image for three blurbs of text, you could use code like this:
    <table border="1" width="500">
      <tr>
        <td rowspan="3">
          <p align="center">[     I M A G E   H E R E     ]</p>
        </td>
        <td>
          <p align="center">Text Row 1<br>Text Row 1<br>Text Row 1<br></p>
        </td>
      </tr>
      <tr>
        <td>
          <p align="center">Text Row 2<br>Text Row 2<br>Text Row 2<br></p>
        </td>
      </tr>
      <tr>
        <td>
          <p align="center">Text Row 3<br>Text Row 3<br>Text Row 3<br></p>
        </td>
      </tr>
    </table>
    

    That would create a table like the one below:

    [ I M A G E H E R E ]

    Text Row 1
    Text Row 1
    Text Row 1

    Text Row 2
    Text Row 2
    Text Row 2

    Text Row 3
    Text Row 3
    Text Row 3


  • bgcolor=: The value of this, given either by name (eg "blue") or by hex code (eg "#f5e6a2") will be set as the background color for the individual cell.

Once you have your table layout finished, you can now place things inside the <td> like you would inside the <body>.

Back: Frames

Next: CSS General Guidelines