Spring.Into.HTML.and.CSS [Electronic resources] نسخه متنی

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 element is considered not empty because it contains text content. So it's written with an open and closing tag, as follows:

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

NOTE

Width changes vary because of resolution differences between computer displays and also because people tend to resize their browsers on the desktop. A fluid table will always reflow to fit the available space.

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 chapter as you create your data table. You'll modify these features later with CSS.Chapter 8, "Working with Color and Images Using CSS."