HTML 4_01 Weekend Crash Course - G. Perry

<th>Quantity</th>

<th>Price</th>

Laughing Kids 24 $19.95

I Stood Still 13 $7.95

Make Money Now 52 $22.95

</table>

Title will appear at the top of the table’s first column; Quantity will appear at the top of the table’s second column; Price will appear at the top of the third column.

Specifying the rows

When you use the <tr> tags, your table begins to look like a real table. Insert <tr> before the data value that begins each row and </tr> at the end of each row. The code looks like the following:

<table>

<tr>

<th>Title</th>

<th>Quantity</th>

<th>Price</th>

</tr>

<tr>

Laughing Kids 24 $19.95

</tr>

<tr>

I Stood Still 13 $7.95

Afternoon Saturday—III Part

12 Session

Note

The <th> tag automatically boldfaces the header cells to help separate them from the data cells. You can always format the header and data further with the available formatting tags.

<td>I Stood Still</td> <td>13</td> <td>$7.95</td>

</tr>

<tr>

<td>Make Money Now</td> <td>52</td> <td>$22.95</td>

</tr>

The table now appears in nice rows and columns, with each column wide enough to hold either the longest cell data or the longest header. Here is the table as it now stands:

Much work is left, but the basic structure is now in place. It may seem as though HTML tables are time-consuming to create. However, you’ll combine many of the steps that this session has broken down individually when you create your tables. In addition, you’ll begin formatting the tables more appropriately earlier in

the process. The next few minutes concentrate on table formatting.

Improving the Look of Your Table

Think of all the improvements needed to make the book inventory a more useful table. The table’s look would benefit from lines around and in between the table cells. Headers should consistently center or left-justify over the columns, and the cell widths need to change somewhat.

Adding borders

The <table> tag supports a border= attribute that draws borders (or lines) around and between your table’s cells. The format of the tag and attribute are as follows:

<table border=width>

Afternoon Saturday—III Part

12 Session

Spanning individual cells and columns across multiple rows in the table (discussed next) is when you need to vertically align data.

Spanning cells

One of the most useful aspects of HTML tables is that each cell in each row does not have to conform to the width or height of each cell in other rows. The uniqueness of the cells lends HTML tables to entire and complex Web page design.

When the cells in each row are not the same height and width, you can span individual cells and columns across multiple rows. For example, you can put the table’s title in your first row and span the title across the entire table.

When using the <caption> tag to add a table title, in many ways, the <caption> tag offers little more than regular HTML text offers. The only exception is that

the caption stays with the table when you move the table and is actually part of the table. The <caption> tag falls directly below the <table> tag, as follows:

<table border=8>

<caption>Our In-Stock Books</caption>

Again, the caption appears above the table. The browser does not even boldface the text as it does for column header cells. You are welcome to apply any formatting tags to the caption as long as you place those tags after the start tag, <caption>. Your other option for folding a table title into the table itself is to place the

title directly into the first cell of the first row and then span, or lengthen, that cell to consume the entire width of the table. To span across columns, you use

the <colspan=width> tag, and to span across rows, you use the <rowspan=width> tag. The width value is the number of columns or rows that you want the cell

to span.

The code in Listing 12-1 generates the table shown in Figure 12-3, with the table title appearing directly inside the table. Because of the colspan=3 attribute, the first row spans all three columns. Without the colspan=3 attribute, the row would consume only the first column of the table, and the rest of the table would fall beneath that.

Afternoon Saturday—III Part

12 Session

<td>Make Money Now</td> <td>52</td> <td>$22.95</td>

</tr>

</table>

More Powerful Tables

Some of the formatting tricks discussed in this section can enhance the appearance of your tables. Although tables hold data effortlessly, the page layout tricks and tips you learn here make tables almost a requirement for anything more than a simple sequential, flat Web site. They lend themselves to more powerful Web page design.

Adding a background color to a table

Adding a background color to your table makes the table stand out. You can do this by adding the bgcolor= attribute inside the <table> tag to colorize all the cells in the table. As with all HTML color-related attributes, you can specify either a hexadecimal color code such as #20CCFF or one of the 16 named colors such as red (as discussed in Session 8).

The following statement colors the cell’s background blue:

<td valign=top align=left bgcolor=blue>

Adjusting table spacing

Two attributes, cellpadding= and cellspacing=, enable you to place cells more precisely in relation to each other. You must specify the attributes in pixels with the width value as follows:

cellpadding=width cellspacing=width

By adjusting the cellpadding= attribute, you add some room around your cell’s text that is greater than the default pixel value of 1. The cellspacing= attribute increases the size of the space between the cells. The inner lines that divide the cells increase in width as you increase the cellspacing= attribute value.

Afternoon Saturday—III Part

12 Session

Figure 12-4

Tables make professional Web site elements possible.

Actually, the bottom table is larger but more straightforward. The Web page author created the one-row, three-column table, centered the text and graphic images inside each of the three cells, set the border size to 2 pixels, set the cellpadding to 10 pixels, and set the cellspacing to 5 pixels. (The border determines the thickness of the border lines, and the cellspacing attribute determines how wide apart the lines are that comprise the border.) In addition, the Web page author set the width= attribute in the bottom of the table to 100 percent. The table spans the user’s Web browser screen no matter how wide the screen becomes.

The following code defines the bottom table:

<table border=2 width=100% height=177 cellspacing=5 cellpadding=10> <tr>

<!-- First cell of the bottom table -->

<td width=33% height=137 valign=top align=center><font face=”Arial” size=3>

<b>Investor’s Roundtable</b></font>

<p><font face=”Arial” size=3>Listen to the experts debate the where’s and why’s of investing in today’s volatile market.</font></p>

<p><img border=0 src=”BD04972_.gif” width=136 height=104 align=middle>

Afternoon Saturday—III Part

12 Session

Note

Notice that each cell in the lower table, defined with the <td> tag, consumes 33 percent of the screen width. The fact that three cells at 33 percent consume 99 percent of the screen means that the bottom table will be slightly smaller, by about a pixel or two, than the top row with the black band. However, the difference is negligible and noticeable by only the author and you.