Page 1 of 3: Introduction

Tables are an integral part of any well designed website, providing structured ways to display data. Tables can be edited and manipulated in many ways to make them look appealing and stylish, and they can also be heavily modified using css (Cascading style sheets)

Fundamental tags for using tables are <TABLE>, <TR> and <TD> - these tags are the base tags for creating a table. The table tag simply instructs the browser that the next piece of code to render on the page will be a table, and define any attributes for that table, the tr tag indicates a new row within the table and the td tag defines table cells within that row.

It is important to nest table tags in the correct order, or they may not render as expected on your HTML page. <TABLE> comes at the very start, <TR> contains all <TD> tags and content, of which </TD> must preceed </TR> before the whole thing is closed with </TABLE> Large, complex nested tables may have multiple instances of opening tags before any are closed, this is fine as long as all the tags are closed in the same order they were opened. Another useful table-tag and one that can optionally be used is the <TH> (table heading) tag. This tag provides each column, or row with a title.

Below is the basic make-up of how an HTML table is setup. The next page of this tutorial will explain more of the syntax and coding in detail, but this is an example of the typical structure a HTML table will feature.

<table border="1"> - The opening table tag and border attribute declaration.
   <th>Heading 1</th> - The heading for the first column (left hand side)
   <th>Heading 2</th> - The heading for the second column (right hand side)
    <tr> - The start of the first row
     <td>Content 1</td> - the first cell, where our text/content will be
     <td>Content 2</td> - the second cell, where the text/content will be
    </tr> - Indicate the end of a row.
  </table> - Indicate the end of the table

The code above will produce the following output. (* Output varies depending on browser defaults)

Heading 1	Heading 2
Content 1	Content 2

Ok, lets look at the attributes that make up the core attributes of a table, namely table, tr and td. Table attributes can be defined "inline" (i.e. within the table tag itself, as name/value pairs) or alternatively within a stylesheet. The following inline attributes can be applied to tables in order to change the way they look and behave on the page. This is not an exhaustive list, but lists the most common attributes that you are most likely to use.

Common attributes for <TABLE>:

• width - specifies the width of the table, expressed in pixels (e.g. 170) or percentage (e.g. 45%)
• border - specifies the border which surrounds the table(if any), in pixels
• cellspacing - defines the spacing between cells
• cellpadding - defines the spacing inside a cell
• align - specifies where to align the table on the page
• bgcolor - defines the background colour of the table

Common attributes for <TR> (Table Row):

• align - alignment of cells, horizontally
• valign - alignment of cells, vertically
• bgcolor - background colour of the specific row

Common attributes for <TD> (Table Data Cell):

• rowspan - amount of rows spanned
• colspan - amount of columns spanned
• align - alignment of cell, horizontally
• valign - alignment of cell, vertically
• width - width of cell
• height - height of cell
• bgcolor - background colour of cell
• bordercolor - optional colour of border

Go to: Next page >>> | Top | Home