The <table> tag creates an HTML table. Within that tag, you include one or more <tr> tags, which define the table’s rows, and within each <tr> tag, you define one or more <td> tags, which define the cells:

<table>
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
   </tr>
   <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
   </tr>
</table>

Displayed in a browser, this code creates a table that looks like what’s shown in Figure 12-1.

Figure 12-1. A simple table with no borders.

This table is not very interesting to look at in its default state. And because by default HTML tables have no borders or shading, you can barely even tell it’s a table at all. The text simply appears where it’s supposed to appear according to the table’s specification. (That’s a big hint about how you will use tables for layout later in the chapter.)

The number of columns within a table is equal to the largest number of <td> tags in any given row. Watch what happens when I add another <td> tag to the second row. I’m also going to add a border=“1” attribute in the <table> tag to make the table borders visible so you can see what’s going on more clearly (see Figure 12-2).

Figure 12-2. A table with two cells in the first row and three cells in the second row.

The additions are shown in bold text in the following code:

<table border="1">
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
   </tr>
   <tr>
      <td>Cell 3</td>
      <td>Cell 4</td>
      <td>Cell 5</td>
   </tr>
</table>

As shown in Figure 12-2, notice that because the rows do not have the same number of cells, the browser inserts a blank space in the row that doesn’t include the extra cell. In the section Spanning (Merging) Table Cells on page 215, you will learn how to merge multiple cells into a single cell.

In the following exercise, you will create a simple table.

By default, a table sizes itself to accommodate all of its cells, and each cell’s height and width changes to accommodate the largest entry in that row or column. The table structure expands or contracts as needed when you add or remove cells or content within cells.

With these default settings, a table can end up looking rather cramped, especially if you don’t use borders between cells (which you’ll learn more about in Chapter 13). In the table from the previous exercise, for example, some extra space would be welcome.

One way to add extra spacing in this instance would be to set the overall size of the table to 100 percent. This forces the table to expand horizontally to fill the available space in the browser window. To do this, add a width attribute to the opening <table> tag:

<table width="100%">

Alternatively, you can place the width specification in a style:

<table style="width: 100%">

To apply the width specification to all tables, place it in a style sheet:

table {width: "100%"}

You don’t need to specify 100 percent; you could also set the table’s width to 50, 75, or any other percentage. You can do the same thing with table height, making it expand to fill the entire browser window vertically by using the following:

table (height: "100%")

The only drawback to specifying width and/or height by percentage is that you cannot be certain which size browser window the visitors to your site will be using. This example looks great in a moderate-sized window (see Figure 12-3).

Figure 12-3. In a moderately sized window, this table looks good.

But in a smaller window (see Figure 12-4), it becomes just as cramped as before and the text wraps to multiple lines.

Figure 12-4. When the window size is smaller, the table is cramped.

And in a larger window, the extra space between the columns becomes exaggerated (see Figure 12-5).

Figure 12-5. When the window size is large, the table appears too spread out.

An alternative approach is to specify a number of pixels for the table’s width. That way, the width the table requires in pixels does not change no matter what the size of the browser window.

For example, to lock the table to a width of 750 pixels, use the following:

<table width="750px">

When a browser renders a fixed-width table in a smaller browser window, a horizontal scroll bar appears in the window. When displayed in a larger window, extra horizontal space displays to the right of the table (assuming the table is left-aligned) rather than being distributed throughout the table.

Although it is less common, there might also be cases where it is useful to set a specific table height, either in percentage or pixels. You do this by using the same method, except you specify height instead. For example, in a tag, use this:

<table height="400px">

To specify height in a style rule, use this:

table (height: 400px}

In the following exercise, you will change a table’s width using two different methods and then check its appearance in various browser window sizes.

Setting the overall table size is useful, but for more control, you might prefer to set the width of each column separately. To set the width of a column to a certain minimum amount, specify a width in the <td> tag for any cell within that column. You can use the same method you used for the <table> tag in the preceding section, as shown in the following:

<td width="200px">

To specify the width of a column by using a style, use this:

<td style="width: 200px">

The traditional place to set the column width is in the first row of the table, but that is not a requirement; you can set a width for any cell in any row. The column as a whole will be as wide as the widest cell in that column.

In the following code, specific values are set for the column widths:

<table border="1">
   <tr>
      <td width="100px">&nbsp;</td>
      <td width="400px">&nbsp;</td>
      <td width="100px">&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
</table>

This code creates a table that looks like that shown in Figure 12-6.

Figure 12-6. A blank table with specific widths for each column.

If you enter some text in one of the cells that exceeds the column’s width, Internet Explorer wraps the text into multiple lines, as needed (see Figure 12-7).

Figure 12-7. Because the first column is fixed in width, text wraps to additional lines.

If you widen the browser window, the text remains wrapped because the column width is fixed.

You can also specify column width in percentages, for different wrapping and resizing behavior at different browser window widths. Suppose in the previous example that you specified 20 percent, 60 percent, and 20 percent for each of the three columns, respectively:

<table border="1">
   <tr>
      <td width="20%">&nbsp;</td>
      <td width="60%">&nbsp;</td>
      <td width="20%">&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   </tr>
</table>

You would start out with a very small table, because the table is only as large as it needs to be to hold its content (see Figure 12-8).

Figure 12-8. The table starts out small but will expand as you enter text into it.

However, when you add text to a cell, the table expands. Keep in mind that the table expands proportionally; the first column will always be 20 percent of the width of the entire table, the second column 60 percent, and so on. The width of the browser window determines how much that first column can expand while still maintaining the proportion. Figure 12-9 shows what the example table looks like in an 800 x 600 browser window, with sample text entered in the first cell, as in the previous example.

Figure 12-9. The second and third columns adjust their sizes proportionally.

However, if you expand the browser window to, for example, 1024 x 768, the table cells stretch out to fill the available space, keeping their 20/60/20 percent proportions (see Figure 12-10).

Figure 12-10. The same table shown in Figure 12-9 but in a wider browser window.

As you might guess, things can get complicated when you start combining overall table widths with individual cell widths. If a table doesn’t turn out the way you expected, try removing all width specifications from the <table> and <td> tags and all width-related style rules from the style sheet, and then start over.

In the following exercise, you will set specific widths for each column in a table.

As you have seen in the preceding sections, every cell in a given row must be the same height and every cell in a given column must be the same width. You can’t make individual cells different heights or widths, but you can span (merge) two or more adjacent cells so that one cell spans multiple rows and/or columns. This technique is useful for centering text across several columns. It also comes in very handy when creating table-based page layouts, which you’ll learn about on Key Points.

To merge a cell into adjacent cells to its right, use the colspan attribute and specify the number of columns to be spanned:

<td colspan="3">

To merge a cell into adjacent cells below it, use the rowspan attribute and specify the number of rows to be spanned:

<td rowspan="2">

Using those two attributes, you can create sophisticated table layouts. For example, the following table has five columns and five rows, but some of the cells span multiple columns or rows:

<table border="1">
   <tr>
      <td colspan="2" rowspan="2">Survey Results</td>
      <td colspan="3">Age</td>
   </tr>
   <tr>
      <td>12 to 25</td>
      <td>26 to 40</td>
      <td>Over 40</td>
   </tr>
   <tr>
      <td rowspan="3">"What is your dream vacation destination?"</td>
      <td>Disneyworld</td>
      <td>25%</td>
      <td>50%</td>
      <td>25%</td>
   </tr>
   <tr>
      <td>Las Vegas</td>
      <td>25%</td>
      <td>50%</td>
      <td>25%</td>
   </tr>
   <tr>
      <td>Europe</td>
      <td>25%</td>
      <td>50%</td>
      <td>25%</td>
   </tr>
</table>

The preceding code creates the table shown in Figure 12-11.

Figure 12-11. Several cells have been merged to create this look.

In the following exercise, you will create two simple column spans.

In addition to their value in laying out tabular data, tables are also useful in HTML for their page-structuring capabilities.

It is customary for a webpage to have a navigation bar at the top or on the left side. It is fairly easy to create a horizontal navigation bar with regular paragraphs, as you learned in Chapter 10, but to create a vertical navigation bar, you must somehow break the page into sections. One way to do that is by using divisions, as you learned in Chapter 11. Another way is to use a table.

When using a table for page layout, you might place your navigation hyperlinks in the column farthest to the left and then place the body of your content in the other columns. The table cells act as containers into which you can put anything: paragraphs, lists, headings, graphics, and so on.

Some web designers prefer to place everything in the table and use row and column spans to merge cells where needed. Others place only certain content in a table, letting the rest of the text float around it.

The skills you have learned so far in this chapter will serve you well when creating table-based layouts. You can specify the exact widths of the columns by pixels or their relative width in percentages, and you can create row or column spans as needed.

In the following exercise, you will convert a page with a horizontal navigation bar to one with a vertical bar by using a table.