HTML - Georgia College & State University

Download Report

Transcript HTML - Georgia College & State University 

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 centeralignment
• <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
Colspan
1. Create row- and column-spanning to match
the layout of the days and times shown in
Figure 5-53 on page HTML 378.