Tutorial 5: Tables Session 5.2.. OBJECTIVES Marking row groups Marking column groups Setting the table frame Specifying the table’s internal gridlines.

Tutorial 5: Tables Session 5.2.

OBJECTIVES

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

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: <thead>, <tbody>, <tfoot>

•A table can have multiple table body row groups (several <tbody> tags).

Marking Row Groups<table> <thead> Table rows </thead><tbody> Table rows</tbody><tfoot> Table rows</tfoot></table>

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: <colgroup>

Practice – Row Groups and Column Groups1. 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.

Setting the Table Frame• A table frame specifies which sides of the table

(or which sides of the table cells) will have borders<table border="value" frame="type"> ... </table>

Setting the Table Frame

Specifying the Table’s Internal Gridlines•A table rule specifies how the internal

gridlines are drawn within the table<table border="value" rules="type"> ... </table>

Practice – Table frame and internal gridlines1. Specify the table frame as border.2. Indicate that the internal gridlines

should use the “all” value.

Formatting Tables with CSS

•Using the selector <table> or <tr> or <th> or <td>, 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.

Formatting Tables with CSS• To define the border model used by the table,

apply the table styleborder-collapse: typewhere 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 styleborder-spacing: valuewhere value is the space between the borders in any of the CSS units of measure

Formatting Tables with CSS

•Vertical alignment of the content within cell(s):▫vertical-align property▫Values: top, middle, bottom▫Example:

vertical-align: top;

Formatting Tables with CSS

•To position a table caption, apply the stylecaption-side: positionwhere position is top or bottom

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.