HTML Tables

Table tags are used for displaying spreadhseet-like data neatly formatted in rows and columns. They can also be used to design page layouts by placing content into invisible rows and columns of a 'table'.

Table - <table> ... </table>
Used to define a table, it contains all row and column tags along with their content. Think of it like the body tag, although there must always be at least one row in a table. It has some attributes to define the table layout.
border="?" - The size of the border (in pixels) surrounding the table
cellspacing="?" - The space (in pixels) between each cell, eg. between rows or columns
cellpadding="?" - The space, or margin, between the content of a cell and its border
Table Row - <tr> </tr>
To start a table row, the tr tags must appear within the table tags.
Table Cell - <td> </td>
A table cell is where the content goes. Cells must exist within rows, where the number of cells in a row determines the number of columns in the table. Cell properties can be set using the attributes:
align="?" - Alignment of text in the cell: left, center or right (*)
valign="?" - Vertical alignment of the cell: top, middle or bottom.
width="?" - Specify a fixed with of a cell, by default they will only take up as much space as they need.
colspan="?" - Column spanning allows a cell to take up more than one column, in order to match layouts of other rows. Replace ? with the number of columns to span.
rowspan="?" - Row spanning, similar to column spanning, forces a cell to occupy more than one row.
nowrap - No text in the cell will be wrapped onto the next line. Similar to the nobr tag for paragraphs
Header Cell - <th> </th>
Similar to a table cell, a header cell must appear within a table row. Normally found in the first row, header cells are usually shown in bold and centered by the browser.

Example:

A simple table with three rows and two columns.

<html>
 <body>
  <table border="1">
   <tr>
    <th>Header 1</th>
    <th>Header 2</th>
   </tr>
   <tr>
    <td>Cell A1</td>
    <td>Cell B1</td>
   </tr>
   <tr>
    <td>Cell A2</td>
    <td>Cell B2</td>
   </tr>
  </table>
 </body>
</html>

See live demo of this example or open in a new window. (Note: close window or tab to return to the guide)

Example:

See another tables example with column and row spanning. Select 'view source' in your browser to view the html code.