1

XP

Tutorial 4

Designing a Web Page with Tables

2

XP

Objectives

Create a text table Create a table using the <table>, <tr>,

and <td> tags Create table headers and captions Control the appearance of a table and

table text Create table cells that span several rows

or columns Use nested tables to enhance page design

Text Tables: Column Alignment Problems with Proportional Fonts

Columns look aligned

Columns lose alignment

Columns lose alignment

Proportional fonts assign a different amount of space for each character depending on the width of that character

Text Tables: Column Alignment with Fixed-Width Fonts

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

Use a fixed width font to ensure that the columns in your text tables remain in alignment.

Columns align regardless of font size

5

XP

Using the <pre> Tag 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, the columns will retain their alignment no matter what font the browser is using.

Text Table Created with the <pre> Tag

text will appear in the browser as it appears here

7

XP

A Graphical Table can include background colors and colored borders with shading can control the size of tables cells, rows, columns and alignment

of text within the table

8

XPUsing 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.

9

XP

HTML Structure of a Tablebeginning of

the table structure

first row of six in the table

end of the table structure

table cells

10

XP

Creating Headings with <th>

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.

11

XPIdentifying 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.

12

XPThe Table Heading, Body, and Footer Syntax

<table><thead>

<tr> heading information . . .</thead><tfoot>

<tr> footer information . . .</tfoot><tbody>

<tr> first group of table rows . . .</tbody><tbody>

<tr> second group of table rows . . .</tbody></table>

thead must be listed before tfoot

Both thead & tfoot must appear before tbody

13

XP

Creating a Table Caption

A caption is used to provide descriptive information. The syntax is:<caption>caption text</caption>

<caption style="font-weight: bold; text-align: left">

Race Results</caption> The <caption> tag must appear directly after

the opening <table> tag.

14

XPModifying 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.

15

XP

Adding a Table Border By default, browsers display tables without

table borders. The syntax for creating a table border is:

<table border=“value”> value is the width of the border in pixels

Unless you set the border size to 0 pixels, the size of the internal gridlines is not affected by the border attribute.

Tables with different borders sizes

<table border="5" bordercolor="brown“ bordercolorlight="tan“><caption style="font-weight: bold; text-align: left">

Race Results</caption>

17

XP

Table Frames The frames attribute determines which sides

of the table will have borders. <table frame=“type”>

type is “box” (default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, “void”

18

XP

Creating Table Rules The rules attribute controls how the table

gridlines are drawn. <table rules=“type”>

type is “all”, “rows”, “cols”, “none”, “groups”

19

XP

Controlling Cell Spacing The cellspacing attribute controls the amount

of space inserted between table cells. <table cellspacing=“value”>

value is the width of the interior borders the default cell spacing is 2 pixels

20

XP

Setting Cell Padding To control the space between the table text

and the cell borders, add the cellpadding attribute; refers to the space within the cells.

<table cellpadding=“value”> value is the distance from the table text to

the cell border the default cell padding value is 1 pixel

21

XPSetting the Cell Spacing to 0 andCell Padding to 4 Pixels

<table border="5" bordercolor="brown" bordercolorlight="tan"

cellspacing="0" cellpadding="4“ ><caption style="font-weight: bold; text-align:

left">Race Results</caption>

22

XP

Setting the Table Width <table width=“value”>

value is the width of the table in pixels or as a percentage of the display area

If you specify an absolute size for a table in pixels, its size remains constant, regardless of a user’s monitor’s size.

<table border="5" bordercolor="brown" bordercolorlight="tan”cellspacing="0" cellpadding="4" width="70%">

23

XP

Setting Cell and Column Width To set the width of an individual cell, add the

width attribute to either the <td> or <th> tags.

The syntax is: width=“value” value can be expressed either in pixels or

as a percentage of the table width a width value of 30% displays a cell that is

30% of the total width of the table

24

XP

Spanning Rows and Columns A spanning cell is a cell that occupies more

than one row or column in a table. Spanning cells are created by inserting the

rowspan and colspan attribute in a <td> or <th> tag.

The syntax for these attributes is: rowspan=“value” colspan=“value” value is the number of rows or columns that

the cell spans in the table

25

XP

Example of Spanning Cells

this cell spans three columns

This cell spans two

columns and two

rows

This cell spans

three rows

26

XPA Table Structure with a Row-Spanning Cell

HTML code

resulting table

four table cells in the first row

only three table cells are required

for the second and third rows

27

XP

Adding Spanning Cells to a Table<thead><tr><th colspan="2">Runner</th>

<th>Time</th><th>Origin</th></tr></thead>

<tbody><tr><td rowspan="3">Men</td><td>1. Peter Teagan</td><td>2:12:34</td><td>San Antonio, Texas</td></tr>

<tr><td>2. Kyle Wills</td><td>2:13:05</td><td>Billings, Montana</td></tr>

<tr><td>3. Jason Wu</td><td>2:14:28</td><td>Cutler, Colorado</td></tr>

<tr><td rowspan="3">Women</td><td>1. Laura Blake</td><td>2:28:21</td><td>Park City, Colorado</td></tr>

<tr><td>2. Kathy Lasker</td><td>2:30:11</td><td>Chicago, Illinois</td></tr>

<tr><td>3. Lisa Peterson</td><td>2:31:14</td><td>Seattle, Washington</td></tr></tbody>

28

XPResults of a Table with Spanning Cells

29

XP

Formatting Table Contents By using the align and valign attributes, you can

specify the text’s horizontal and vertical placement.

30

XP

Formatting Table Text Apply the same text and font styles to table

text. The style cascade down through the table

structure. <table border="5" style="font-family: Arial,

Helvetica, sans-serif; font-size:1em">- - -<tbody style="font-size: .8em">

Setting the background colors in the table

<tr style="background-color: yellow">

<td rowspan="3" valign="top” style="background-color: lightgreen">Women</td>

<td rowspan="3" valign="top“ style="background-color: lightblue">Men</td>

<table style="background-color: white">

Color styles cascade down thru the table structure

32

XPSetting the background image to a table A background-image style can be applied to

the entire table, to a row group, a row, or an individual cell using the style below

background-image: url(url)

33

XP

Aligning a Table on a Web Page By default, a browser places a table on the left

margin of a Web page, with surrounding text placed above and below the table.

To float the table, use the style below:float: positionwhere position is none (default), left, or right

<tablestyle="float: right; margin: 5 0 5 5">

34

XP

Working with Column Groups

To define a column group, add the following:<colgroup span=“value”>

columns </colgroup>value is the number of columns in the group, and columns are definitions for individual columns within the group

<colgroup span=“5” style=“background-color: white”>

<col style=“color: black” span=“2” /><col style=“color: red” /><col style=“color: blue” span=“2” />

</colgroup>

35

XP

Using Tables for Layout

1. Specify different backgrounds for the page and the table.

2. Columnar layout3. Sectional layout

Fixed-width and Fluid Layouts Challenges of Table Layouts

Table layout of the Gazette home page

4) address

1) newspaper logo

2) list of links 3) articles

90% of page width

content flows intothe rest of the page

120 pixels

<table width=“90%” cellpadding=“5”>

</table>

<tr><td colspan=“2”align=“center”></td>

</tr>

<tr><td width=“120” rowspan=“2”

valign=“top”></td>

<! - - Articles - - > <td valign=“top”></td></tr>

<tr><td valign=“top” align=“center”></td></tr>

Table layout for the article section

Marathon story

Highway 6 story Links tostories &features

60% 40%

<table cellspacing=“5” cellpadding=“5”>

</table>

<tr><td colspan=“2” valign=“top”></td></tr>

<tr><td width=“60%” valign=“top”></td><td width=“40%” valigh=“top”></td>

</tr>