9.1: Creating Tables

Tabular arrangements of data into rows and columns can help the viewer sort through masses of data to understand their underlying structure and content. Therefore, tables are useful devices for presentation of information in a meaningful form. At the same time, tables have historically been used to structure the layout of a Web page; however, this approach is becoming deprecated in favor of CSS-based layouts. In short, tables are important presentation devices and should be used to present tabular data. They should not be used to define the layout of a Web page.

The <pre> Tag

Previously you were introduced to the <pre> tag as one method for arranging data into rows and columns for tabular presentation. A block of text surrounded by the <pre> tag is displayed in a monospace font in precisely the way it is typed in the text editor. The tag is often used to create simple tables where alignment of columns is produced with embedded blank spaces. For example, the following editor code shows a table produced by using the keyboard Enter key to create separate rows, and the Space Bar key to align columns of data. This table layout appears on a Web page in exactly the format it is typed inside the <pre> tags.

 

 

<pre>
                  Table 1
              Sales by Region
----------------------------------------------
Region/Year   2000     2001     2002     2003
----------------------------------------------
East          35.2     37.4     39.8     40.0
West          28.0     25.6     27.4     29.8
South        102.3     86.1     98.6    100.2
North         10.5      8.6      9.8     10.4
----------------------------------------------
</pre>
    

Figure \(\PageIndex{1}\): Code to create a table using the <pre> tag.

This method provides limited capabilities for arranging and styling a table. It is useful only for producing fairly simple tables without the need for styling it in conformance with the overall page design. A better method is to construct tables using special HTML tags designed for that purpose.

A Simple Table

Like any other tabular presentation, a table produced with HTML table tags contains rows and columns. The intersections of these rows and columns form the cells of the table. Information can then be placed into these cells. A simple 3 x 3 table is shown in Figure 8-1.

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

 

Figure \(\PageIndex{2}\): A 3 x 3 table.

The rows, columns, and cell intersections of a table are defined with three basic tags. A <table> tag surrounds the entire table description; <tr> (table row) tags defined the rows of the table; and <td> (table data) tags define the cells, or columns, that appear along each row. The <td> tag encloses the content that appears in a cell. These tags are shown in their general structural formats in Figure 8.2.

<table> <tr> <td>cell content</td> <td>cell content</td> ... </tr> ... </table>

Figure \(\PageIndex{3}\): General formats for basic table tags.

There are as many <tr> tags as there are rows in the table, and there are as many <td> tags as there are cells (columns) in each row. When building tables, you need to be cautious about properly pairing opening and closing tags. One minor oversight, and the table arrangement can be totally disrupted. Also, take care to organize your coding so that the table structure is clearly evident. For example, the following code is used to create the table shown above in Figure 8.1.

<table>
<tr>
  <td>Cell 1.1</td>
  <td>Cell 1.2</td>
  <td>Cell 1.3</td>
</tr>
<tr>
  <td>Cell 2.1</td>
  <td>Cell 2.2</td>
  <td>Cell 2.3</td>
</tr>
<tr>
  <td>Cell 3.1</td>
  <td>Cell 3.2</td>
  <td>Cell 3.3</td>
</tr>
</table>
    

Figure \(\PageIndex{4}\): Code to create a 3 x 3 table.

Note that <table>, <tr>, and <td> tags are container tags that all require both an opening and closing tag. The <table> tag encloses all coding for the table; <tr> tags enclose each row of the table; <td> tags enclose each cell of a table row.

The code in Listing 8-2 is arranged in a line-by-line hierarchy of tags suggestive of the structure of the table. This manner of coding is helpful in visualizing the table, although you can code table tags in free-format style, like any other HTML coding. For instance, the above table displays correctly coded in the following fashion.

<table>
<tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
<tr><td>Cell 3.1</td><td>Cell 3.2</td><td>Cell 3.3</td></tr>
</table>
    

Figure \(\PageIndex{5}\): Alternate code to create a 3 x 3 table.

However, since table cells (<td>...</td>) can enclose information of varying length and complexity, it is best to code them on separate lines as in Listing 8-2 for more accurate visualization and typing of cell contents.

The table below presents a summary of the HTML tags used for creating tables by discussing what was covered in this tutorial.

Tag	Description
table	Defines a table. All other table elements are coded within this element.
tr	Defines a table row.
td	Defines a table data cell within a row.
th	Defines a table header cell within a row.
caption	Contains a description of the table. The element must be coded immediately after the opening table tag.
thead	Groups one or more rows or tr elements into a table header.
tfooter	Groups one or more rows or tr elements into a table footer.
tbody	Groups one or more rows or tr elements between the header and footer into a table body.

Table and Cell Borders

By default, table tags produce no borders around the table or around its cells. The code in Listing 8-2 and 8-3 actually create the table layout shown below in Figure 8-3. Data are aligned within rows and columns; however, no borders are displayed. In certain cases, you may not wish to display table borders, but in most cases you will. Therefore, style sheets must be applied to the table and to its cells to display borders around both.

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

 

Figure \(\PageIndex{6}\): A standard 3 x 3 table.

A style sheet is applied to the table and to its cells to display borders around both. A border surrounds the entire table by styling the <table> tag. Borders surround individual cells by styling the <td> tag. The code below produces the bordered table shown in Figure 8.1. The entire table is surrounded by a 1-pixel outset border and each of the cells is surrounded by a 1-pixel inset border. This styling is typical for a standard HTML table.

<style type="text/css">
  table {border:outset 1px;}
  td    {border:inset 1px;}
</style>

<table>
<tr>
  <td>Cell 1.1</td>
  <td>Cell 1.2</td>
  <td>Cell 1.3</td>
</tr>
<tr>
  <td>Cell 2.1</td>
  <td>Cell 2.2</td>
  <td>Cell 2.3</td>
</tr>
<tr>
  <td>Cell 3.1</td>
  <td>Cell 3.2</td>
  <td>Cell 3.3</td>
</tr>
</table>
    

Figure \(\PageIndex{7}\): Code to create a bordered 3 x 3 table.

An embedded style sheet is the most convenient method of styling table elements. In-line style sheets can be used; however, individual style sheets would have to appear in each of the many <td> tags. It is much easier declaring embedded styling for table and td selectors. Tables can have any style of outer borders, and cells can have there own border styles. Border styling is covered in a following tutorial.

Table Size

By default, the size of a table depends on the size of the data appearing in its cells. A column is as wide as the widest entry in the column. All rows are as wide as the combined width of data within the widest cells. In effect, table cells collapse around the data they contain. Although it is not apparent in the above examples, data are aligned horizontally left and vertically centered within the cells. Style settings to manage table and cell sizes and data alignment are described later in this tutorial.

Nested Tables

Tables can be nested; that is, a table can appear inside a cell of another table. This arrangement does not involve any particular coding complication, Table specifications are simply inserted as contents of a cell. The cell expands in size to permit full display of the nested table as shown in the following table and HTML code.

Cell 1	Cell 2
Cell 3	Cell A Cell B Cell C Cell D

 

Figure \(\PageIndex{8}\): Nested tables.

<style type="text/css">
  table {border:outset 1px;}
  td    {border:inset 1px;}
</style>

<table>
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>
<tr>
  <td>Cell 3</td>
  <td>
		
    <table>
	  <tr>
	    <td>Cell A</td>
	    <td>Cell B></td>
	  </tr>
	  <tr>
	    <td>Cell C</td>
	    <td>Cell D</td>
	  </tr>
      </table>
    
  </td>
</tr>
</table>
    

Figure \(\PageIndex{9}\): Code for nested tables.

In this example, you can also see the default alignment of data within cells. Notice in "Cell 2" that the entry is horizontally aligned at the left of the cell; in "Cell 3" the entry is vertically aligned in the middle of the cell.

Styling Multiple Tables

Since tables provide one of the most effective methods for arranging content on a Web page, it is often the case that a single page contains two or more tables that are either nested tables or multiple tables containing different data content. It is also often the case that these tables need to be styled differently. Therefore, the embedded style sheet must differentiate among the tables so that each can have its own special styling.

Recall from earlier discussions that page elements can be assigned id values to uniquely identify them. These ids are then used in the embedded style sheet to indicate which styles pertain to which unique elements. This technique can be used to apply different styles to different tables on the same page.

For example, the two tables in Figure 8-5 have different border styles and sizes. The first table is styled with standard borders; the second table uses the outset style for both table and cell borders and uses different border widths.

 

Figure \(\PageIndex{10}\): Styling multiple tables on the same page.

The style sheet and table definitions for these two tables are shown in Listing 8-6.

<style type="text/css">
  table#Table1    {border:outset 1px;}
  table#Table1 td {border:inset 1px;}

  table#Table2    {border:outset 3px;}
  table#Table2 td {border:outset 2px;}
</style>

<table id="Table1">
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>
<tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
</tr>
</table>

<table id="Table2">
<tr>
  <td>Cell 1</td>
  <td>Cell 2</td>
</tr>
<tr>
  <td>Cell 3</td>
  <td>Cell 4</td>
</tr>
</table>
    

Figure \(\PageIndex{11}\): Code to style multiple tables on the same page.

ID selectors are used to separately style the <table> tags for the two tables. Contextual selectors are used to style their <td> tags. In this way, any number of tables can take on different styles without styling conflicts. (See tutorial "Applying Special Styles" for a review of ID selectors; see "Contextual Selectors" to review these style selectors.)

This introduction to tables has given you a general overview of tables and style sheet approaches to styling them. The following tutorials cover detailed aspects of table design and formatting.