Tutorial 5: Tables

Tutorial 5: Tables Session 5.1.

OBJECTIVES

•Create a table•Insert a table summary•Insert a table caption•Add rows and cells•Merge Cells inside a Table

Creating a Table•<table> </table>•Attributes:

▫cellspacing: Spacing between cells (in px)

▫cellpadding: Spacing within cells (in px)

▫border: Thickness of the table borders (in px)

Creating a Table <body><table border=“1” cellpadding=“3” cellspacing=“2”>

</table></body>

Practice – Creating a Table

1. Download kpaf.zip from my website.2. Go to the morning.htm and insert links

to the kpaf2.css and programs.css style sheets.

3. Scroll down the file and directly below the paragraph element, insert a table with a 1px border, 0px cellspacing, and 3px cellpadding.

4. Add the class name programs to the table.

Inserting a Table Summary▫The summary attribute allows you to

include a detailed description about the table<table summary="description"> ... </table>

Creating a Table Caption • To create a table caption, add the caption

element directly below the opening <table> tag with the syntax<caption>content</caption>where content is the content of the table caption

Practice – Table Summary and Caption•Insert the following summary for the

table: Lists the morning programs aired by KPAF from 5:00 a.m. to 12:00 p.m. (central time).

•Add a table caption containing the text All Times Central.

Inside the table• <tr> </tr>:

▫ Indicates the start and end of a table row▫ Rows consist of headings or data cells

• <th> </th>:▫ Indicates the start and end of a table heading

cell▫ Heading cells default to bold text and center-

alignment• <td> </td>:

▫ Indicates the start and end of a table data cell▫ Data cells default to normal text and left-

alignment

Practice – Rows and Cells

1. Add rows and cells so the table is similar to the following table:

Time Monday Tuesday Wednesday Thursday Friday Saturday Sunday

5:00 Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Weekends

Sunday Magazine


Sunday Magazine


Weekend Reflections


Weekend Reflections

Using colspan and rowspan to merge cells in a table•colspan: Sets number of columns

spanned by a cell•rowspan: Sets number of rows

spanned by a cell•Example:<tr><td colspan=“2”>I merge two cells horizontally.</td>

</tr>

Practice – Rowspan and Colspan1. Create row- and column-spanning to

match the layout of the days and times shown in Figure 5-53 on page HTML 378.

Tutorial 5: Tables

Documents

following table

table practice

table summaryinsert

table borders

table rowrows

table attributes

table captionadd rows

cellsmerge cells