Intro to Tables

Topics on This Page

Cells, Columns and Rows
cellpadding and cellspacing
Example

Cells, Columns and Rows

Tables were introduced in Netscape 1.1 as a means of displaying tables of information. It turned out that tables were found to be very useful for laying out all sorts of information on web pages. Almost all sites today rely on tables for much of their layout.

Here's an example of a simple table:

<table border="1">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
    <td> Cell #3 </td>
  </tr>
  <tr>
    <td> Cell #4 </td>
    <td> Cell #5 </td>
    <td> Cell #6 </td>
  </tr>
</table>

A table is made up of cells. The cells are arranged into columns and rows. This example shows a table with three columns and two rows.

The table is constructed one row at a time. The <tr> tag (Table Row) describes one row of the table. It contains one or more <td> (Table Data) tags, one for each cell in the row. You must ensure that all of the rows contain the same number of cells.

cellpadding and cellspacing

cellpadding and cellspacing can be used to space things out within the table. These attributes are placed in the <table> tag and apply to the entire table.

cellpadding specifies the number of pixels of padding inside each cell. It defaults to cellpadding="1".

cellspacing specifies the number of pixels of spacing between cells.

Here's an example of a table with some cellpadding and no cellspacing:

<table border="1" cellpadding="10" cellspacing="0">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
    <td> Cell #3 </td>
  </tr>
  <tr>
    <td> Cell #4 </td>
    <td> Cell #5 </td>
    <td> Cell #6 </td>
  </tr>
</table>

The cells are nice and roomy, and the cells touch each other.

Now lets look at a table that has cellspacing but no cellpadding:

<table border="1" cellpadding="0" cellspacing="10">
  <tr>
    <td> Cell #1 </td>
    <td> Cell #2 </td>
    <td> Cell #3 </td>
  </tr>
  <tr>
    <td> Cell #4 </td>
    <td> Cell #5 </td>
    <td> Cell #6 </td>
  </tr>
</table>

The cells no longer touch each other, and the table looks quite different.

Example

Play around with this table a bit.

Try different cellpadding and cellspacing values until you're comfortable that you understand what they are and how they differ from each other.

Try specifying different values for border. Note how the appearance changes as you increase the value, making a wider border. Find out what happens for border="0".