The table Element

<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).

Figure 4-1. No matter how wide the browser window becomes, a fixed-width table remains fixedin this case, to 250 pixels.

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).

Figure 4-2. A percentage-based table width will cause the table to fill the browser window to that percentagein this case, 90%.

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 are all going to be ultimately managed with CSS, which provides many more options in terms of how such presentation is applied. However, it's important to be familiar with these attributes and to use them in this tutorial as you create your data table. You'll modify these features later with CSS.