Adding Borders, Headings, and a Caption to an HTMLTable

When you want to use an HTML table to display tabular data (instead of using a table as a page layout tool, as you will learn how to do later in this chapter), you may want to draw borders around the table and around each of its cells and include a caption (or title) that summarizes the table’s data. Moreover, most tabular data includes a row and/or column of headings that tells the viewer the meaning of (or relationship among) the items in the same column or row.

HTML provides a border attribute you can use to tell the Web browser to display a border around a table and around each of its cells. Moreover, you can use start and end caption tags (<caption></caption>) to specify the table’s title (or caption), and start and end table heading tags (<th></th>) to tell the Web browser to format a cell’s content as a heading:

• border Attribute in a <table> tag that tells the Web browser the number of pixels wide to draw the border around the perimeter of the table and each of the table’s cells

• <caption> </caption> Alert the Web browser that it is to style the text between the start and end tags as a caption (most browsers use a boldface font)

• <th></th> (table heading) Alert the Web browser that the text between the start and end tags is to be formatted as heading text (most browsers use a boldface font)

The table heading and caption tags are extremely helpful for the visually impaired, because browsers designed for blind users will speak differently to differentiate the table caption and table headings from the table data. In addition, you might include a summary attribute within the <table> tag to provide a longer description of the table’s purpose for the benefit of visitors using speech- or Braille-based browsers.

To display a table with borders, a title, and headings, you would first change the table’s <table> tag to include a border attribute to which you assign the pixel width of the table’s border. For example, to draw one-pixel wide borders, you would code the table’s <table> tag as follows:

<table border="1">

Then, to give the table a title (or caption), you would insert start and end caption tags (<caption></caption>) in the table definition immediately after the <table> tag. Thus, the first line of code (with only a <table> tag) in the previous example becomes the following two lines of code that tell the Web browser to draw a table with both one-pixel-wide borders and a caption:

<table border="1">

<caption>Tags and Attributes Used to Create a Table</caption>

Note that newer HTML specifications (starting with the HTML 4.01 standard) state that the caption element, if present, must immediately follow the opening <table> tag.

Next, to put a heading at the top of each of the table’s columns, insert start and end table heading tags (<th></th>) that enclose “heading” text after the <tr> tag that starts the row in which you want the heading(s) to appear. For example, to add a heading atop each column in a two-column table, you would write the following:

<table border="1" >

<caption>Tags and Attributes Used to Create a Table</caption>

<tr><th>HTML Tag</th>

<th>Description</th></tr>

To add a column of headings instead of the row of headings, add one set of start and end table heading tags (<th></th>) that enclose heading text to each row of data items designated by the table’s start and end table row tags (<tr></tr>). For example, the following HTML with two sets of start and end table heading tags (<th></th>) following a single <tr> tag tells the Web browser to create a table with two headings in different columns of the same row in the table:

<table border="1" >

<caption>Headings in a Row</caption>

<tr><th>Heading 1</th>

<th>Heading 2</th></tr>

<tr><td>Row 1, Item 1</td>

<td>Row 1, Item 2</td></tr>

<tr><td>Row 2, Item 1</td>

<td>Row 2, Item 2</td></tr>

</table>

Conversely, the following HTML with a single set of start and end table heading tags (<th></th>) after each <tr> tag tells the Web browser to create a table with the same two headings, but to place the headings in the same column on different rows in the table:

<table border="1" >

<caption>Headings in a Column</caption>

<tr><th>Heading 1</th>

<td>Row 1, Item 1</td>

<td>Row 1, Item 2</td></tr>

<tr><th>Heading 2</th>

<td>Row 2, Item 1</td>

<td>Row 2, Item 2</td></tr>

</table>

Using a Table for Page Layout
When using an HTML table to display tabular data, you can let the data in the table dictate the dimensions of the table’s cells and therefore the dimensions of the table itself. However, to use an HTML table as a “grid” of cells that let you position graphics images and text at specific locations on a Web page, you need to do two things. First, you need to “hide” the table’s borders. Second, you need to control the dimensions of the table and the dimensions of the cells within the table.

You already know how to make a table’s borders invisible—simply omit the border attribute from the table’s <table> tag. Or, if you prefer to make the “invisible” (in other words, the zero-pixel width) borders an explicit instead of an implicit setting, write the <table> tag as follows:

<table border="0">

If you do not specify the width and height of a table’s cells, the Web browser changes their dimensions according to the data you put into them. The browser will set the width of each column to the width of the widest object in one of the column’s cells. Similarly, the Web browser will set the height of each row to the height of the “tallest” object in the row. The minimum height and width of a cell with a graphics images are the dimensions of the graphics image. The minimum width for a cell with only text data is the number of characters in the longest word or number, and the minimum height is the height of the tallest character.

Copyright © 2013 Webhostingart.com. All rights reserved unless otherwise stated.