The table Element

To begin creating tables, you start with the table element. This element alerts the browser that a table is about to be drawn. The table

<table>
</table>

As is, nothing displays in the browseryou still have to add other elements to make that happen. But the table element uses a few attributes that you'll want to explore.

Table Width

If you'd like to set your table width, you can do so in the opening table tag. There are two width values to choose from, pixel and percentage. A pixel value is considered a fixed value, in that the table will be fixed to that width (see Example 4-1).

Example 4-1. A table with a pixel, or fixed, width

<table width="250">

</table>

A fixed table with a width of 250 pixels will take up exactly 250 pixels width of the available browser window (see Figure 4-1).

A percentage value is considered a fluid value (also referred to as dynamic or liquid) because the table will expand to the noted percentage of space available (see Example 4-2).

Example 4-2. A table with a percentage, or fluid width

<table width="90%">

</table>

In this case, the table will take up 90% of the available browser window width (see Figure 4-2).

Table Borders and Spacing

You can add a border to your table using HTML, as follows:

<table width="250" border="1">

Doing this places a 1-pixel border around your table and any of its rows and cells.

To add spacing between cells, you use the cellspacing attribute. To add spacing between the content in a cell and the cell itself, you can use the cellpadding attribute:

<table width="90%" border="1" cellspacing="5" cellpadding="5">

As with all presentational attributes, width, border, cellspacing, and cellpadding them in this chapter as you create your data table. You'll modify these features later with CSS.