Embed Size (px)
DESCRIPTION
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. Attributes: cellspacing : Spacing between cells (in px ) - PowerPoint PPT Presentation
Citation preview
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
5:30 Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Weekends
Sunday Magazine
6:00 Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Weekends
Weekend Reflections
6:30 Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Dawn Air Weekends
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.
