Приглашаем посетить
Хемницер (hemnitser.lit-info.ru)

Creating a Simple Table

Previous Page
Table of Contents
Next Page

Creating a Simple Table

A table consists of rows of information with individual cells inside. To make tables, you have to start with a <table> tag. Of course, you end your tables with the </table> tag. If you want the table to have a border, use a border attribute to specify the width of the border in pixels. A border size of 0 or none (or leaving the border attribute out entirely) will make the border invisible, which is often handy when you are using a table as a page layout tool.

Did you Know?

There are some style properties that allow you to take much more control over table borders. For example, you can set the border width (border-width), style (border-style), and color (border-color). These properties work fine but you have to apply them to each table element, which can be cumbersome.


With the <table> tag in place, the next thing you need is the <tr> tag. The <tr> tag creates a table row, which contains one or more cells of information before the closing </tr>. To create these individual cells, you use the <td> tag (<td> stands for table data). You place the table information between the <td> and </td> tags. A cell is a rectangular region that can contain any text, images, and HTML tags. Each row in a table is made up of at least one cell. Multiple cells within a row form columns in a table.

There is one more basic tag involved in building tables: The <th> tag works exactly like a <td> tag, except <th> indicates that the cell is part of the heading of the table. Most web browsers render the text in <th> cells as centered and boldface.

You can create as many cells as you want, but each row in a table should have the same number of columns as the other rows. The HTML code in Listing 11.1 creates a simple table using only the four table tags I've mentioned thus far. Figure 11.1 shows the resulting page as viewed in a web browser.

Listing 11.1. Creating Tables with the <table>, <tr>, <td>, and <th> Tags
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Hockey Stats</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Season</th>
        <th>GP</th>
        <th>G</th>
        <th>A</th>
        <th>P</th>
        <th>PIM</th>
      </tr>
      <tr>
        <td>Summer 2005</td>
        <td>8</td>
        <td>4</td>
        <td>4</td>
        <td>8</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Winter 2004</td>
        <td>24</td>
        <td>14</td>
        <td>14</td>
        <td>28</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Summer 2004</td>
        <td>18</td>
        <td>9</td>
        <td>9</td>
        <td>18</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Spring 2004</td>
        <td>19</td>
        <td>7</td>
        <td>17</td>
        <td>24</td>
        <td>0</td>
      </tr>
    </table>
  </body>
</html>

Figure 11.1. The HTML code in Listing 11.1 creates a table with five rows and six columns.

Creating a Simple Table


Did you Know?

As you know, HTML ignores extra spaces between words and tags. However, you might find your HTML tables easier to read (and less prone to time-wasting errors) if you use spaces to indent <tr> and <td> tags, as I did in Listing 11.1.


The table in the example contains hockey statistics, which are perfect for arranging in rows and columns. The headings in the table stand for Games Played (GP), Goals (G), Assists (A), Points (P), and Penalties In Minutes (PIM).

You can place virtually any HTML element into a table cell. However, tags used in one cell don't carry over to other cells, and tags from outside the table don't apply within the table. For example, consider the following table:

<div style="font-weight:bold">
  <table>
    <tr>
      <td style="font-style:italic">hello</td>
      <td>there</td>
    </tr>
  </table>
</div>

If you recall from Hour 5, "Basic Text Alignment and Formatting," the <div> tag is used to enclose regions of information on a page so that you can align it and apply styles. In this example, the <div> tag is used around a table to demonstrate how tables are immune to outside tags. The word there would be neither boldface nor italic because neither the font-weight:bold style outside the table nor the font-style:italic style from the previous cell affects it. The word hello in this example is in italics, however.

To make the words hello and there both boldface, you would need to change the table code to this:

<table style="font-weight:bold">
  <tr>
    <td style="font-style:italic">hello</td>
    <td>there</td>
  </tr>
</table

In this example, both words are in bold and the word hello is also in italics. Of course, you don't have to apply styles at the table level if you don't want. The font-weight:bold style could just as easily be applied to each cell individually if you want.


Previous Page
Table of Contents
Next Page