Chapter 4 - Designing a Web Page with Tables (Part1)

Tables on the World Wide Web

A table can be displayed on a Web page either in a text or graphical format

A text table:
-contains only text
-uses only standard word processing characters

A graphical table:
-is displayed using graphical elements
-allows you to control the size of tables cells, rows, columns and alignment of text within the table

A Text Table

A Graphical Table

---

Considerations for Text and Graphical Tables

Graphical tables are more flexible and attractive

However, working with tags for graphical tables can be complicated and time-consuming
-you might want to create two versions of a Web page: one that uses only text elements, and another that uses graphical elements

---

Text TablesUsing Fixed-Width Fonts

When you create a text table, the font you use is important

A text table relies on space and the characters that fill those spaces to create its column boundaries

Use a fixed-width, or mono-space, font so that the columns align properly

Fixed-width fonts use the same amount of space for each character

---

Using Proportional Fonts

Proportional fonts assign a different amount of space for each character depending on the width of that character
-for example, since the character “m” is wider than the character “1,” a proportional font assigns it more space

Proportional fonts are more visually attractive, and typically easier to read, than fixed-width fonts

Proportional fonts in a text table can cause errors when the page is rendered in the user’s browser

---

Column Alignment Problemswith Proportional Fonts

Column Alignmentwith Fixed-Width Fonts

---

Using Preformatted Text

The <pre> tag creates preformatted text and retains any spaces or line breaks indicated in the HTML file.

The <pre> tag displays text using a fixed-width font

By using the <pre> tag, a text table can be displayed by all browsers, and the columns will retain their alignment no matter what font the browser is using

Text Table Created with the <pre> Tag

Text Table Created with the <pre> Tag

---

Graphical TablesDefining a Table Structure

The first step to creating a table is to specify the table structure:
-the number of rows and columns
-the location of column headings
-the placement of a table caption

Once the table structure is in place, you can start entering data into the table

---

Using the <table>, <tr>, and <td> Tags

Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure

Each row of the table is indicated using a two-sided <tr> (for table row)

Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells

---

The Graphical Table Syntax

The general syntax of a graphical table is:
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
-This creates a table with two rows and two columns

A Simple Table

HTML Structure of a Table

---

Creating Headings with the <th> Tag

HTML provides the <th> tag for table headings

Text formatted with the <th> tag is centered within the cell and displayed in a boldface font

The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text

---

Adding Table Headings to the Table

Text in cells formatted with the <th> tag is bold and centered above each table column

Adding Table Headings to the Table

---

Identifying the Table Heading,Body, and Footer

HTML allows you to identify the different parts of your table using the <thead>, <tbody>, and <tfoot> tags
-<thead> is used for the table heading
-<tbody> is used for the table body
-<tfoot> is used for the table footer

These tags do not format the table, but they do contain collections of rows called row groups

---

The Table Heading,Body, and Footer Syntax

A single table can contain several <tbody> tags to identify different parts of the table

The <thead> and <tfoot> sections must appear before any <tbody> sections in the table structure

Row groups are most often used for tables that draws its data from an external data source

For tables that span through different pages, the browser will repeat the header and footer on each pages

Not all browsers support this capability

---

Creating a Table Caption

HTML allows you to specify a caption for a table

The syntax for creating a caption is:
<caption align=“alignment”>
caption text
</caption>
-alignment indicates the caption placement, however this attribute has been deprecated

The <caption> tag works only with tables, the tag must be placed within the table structure

Captions are shown as normal text without special formatting

Captions can be formatted by embedding the caption text within other HTML tags
-for example, place the caption text within a pair of <b> and <i> tags causes the caption to display as bold and italic

Inserting a Table Caption

Result of a Table Caption

---

Modifying the Appearance of a Table

You can modify the appearance of a table by adding:
-gridlines
-borders
-background color

HTML also provides tags and attributes to control the placement and size of a table

---

Working with the Table Border

By default, browsers display tables without table borders

The syntax for creating a table border is:
<table border=“value”> … </table>
-value is the width of the border in pixels

if you don’t specify a size, the browser creates a table border 1 pixel wide

The effect on a table’s border when the border size is varied

Adding a 5-Pixel Border to a Table

---

Table Frames and Rules

With the frame and rule attributes you can control how borders and gridlines are applied to the table

These two attributes was introduced in HTML 4.01- therefore might not be supported in older browsers

The frames attribute allows you to determine which sides of the table will have borders

The frame attribute syntax is:
<table frame=“type”> … </table>

Values of the Frame Attribute

Effect of Different Frame Values

---

Creating Frames and Rules

The rules attribute lets you control how the table gridlines are drawn

The syntax of the rules attribute is:
<table rules=“type”> … </table>
-type is either “all”, “rows”, “cols”, or “none”

Effect of Different Rules Values

---

Sizing a TableCell Spacing

The cell spacing attribute controls the amount of space inserted between table cells

The syntax for specifying the cell space is:
<table cellspacing=“value”> … </table>
-value is the width of the interior borders in pixels
-the default cell spacing is 2 pixels

Tables with Different Cell Spacing Values
Different cell spacing values and a table’s appearance

---

∗ back to top ∗