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) ▫cellpadding: Spacing within cells (in px) ▫border: Thickness of the table borders (in px)

Creating a Table

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

Creating a Table Caption To create a table caption, add the caption element directly below the opening tag with the syntax content 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 : ▫Indicates the start and end of a table row ▫Rows consist of headings or data cells : ▫Indicates the start and end of a table heading cell ▫Heading cells default to bold text and center- alignment : ▫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: TimeMondayTuesdayWednesdayThursdayFridaySaturdaySunday 5:00 Dawn Air Dawn Air Weekends Sunday Magazine 5:30 Dawn Air Weekends Sunday Magazine 6:00 Dawn Air Weekends Weekend Reflections 6:30 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: I merge two cells horizontally.

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.