1. Tutorial 5: Tables Session 5.2.

2. OBJECTIVES Marking row groups Marking column groups Setting the table frame Specifying the table’s internal gridlines Formatting tables with CSS

3. Marking Row Groups You can divide a table’s rows into row groups, in which each group element contains different types of content and can be formatted differently You can use the following tags:,, A table can have multiple table body row groups (several tags).

4. Marking Row Groups Table rows Table rows Table rows

5. Marking Column Groups Once the table columns have been determined by the browser, you can reference them through the use of column groups. Use the colgroup tag:

6. Practice – Row Groups and Column Groups 1.In morning.htm, below the caption, create a column group containing three columns. The first col element should have the class name timeColumn. The second col element should have the class name wDayColumns and span five columns in the table. The last col element should have the class name wEndColumns and spans two columns. 2.Add the table header row group containing the first row. 3.Enter the table body row group containing the times and names of the different KPAF programs.

7. Setting the Table Frame A table frame specifies which sides of the table (or which sides of the table cells) will have borders...

8. Setting the Table Frame

9. Specifying the Table’s Internal Gridlines A table rule specifies how the internal gridlines are drawn within the table...

10. Practice – Table frame and internal gridlines 1.Specify the table frame as border. 2.Indicate that the internal gridlines should use the “all” value.

11. Formatting Tables with CSS Using the selector or or or, you can format the table using the properties we learned in previous chapter including: font-family, font-size, font-style, border-width, border-color, etc.

12. Formatting Tables with CSS To define the border model used by the table, apply the table style border-collapse: type where type is separate (the default) to keep all borders around cells and the table itself apart, or collapse to merge all adjacent borders To set the space between separated borders, apply the table style border-spacing: value where value is the space between the borders in any of the CSS units of measure

13. Formatting Tables with CSS Vertical alignment of the content within cell(s): ▫vertical-align property ▫Values: top, middle, bottom ▫Example: vertical-align: top;

14. Formatting Tables with CSS To position a table caption, apply the style caption-side: position where position is top or bottom

15. Practice – Formatting Tables with CSS Go to programs.css. Create a style rule for the programs table to: ▫Set the width of the table to 100%. ▫Add a 2-pixel solid black border that is collapsed around the table. ▫Set the font family to the following list of fonts: Arial, Verdana, and sans-serif. Create a style rule so that the table caption is aligned with the bottom-left corner of the table. Set the caption font size to 0.8em.