Slide 1

Creating Table Styles

in CSS

Matthew Ellison

matthew@ellisonconsulting.com

What we’ll cover in this session

 Components of an HTML-based table

 Why is table formatting a challenge?

 What are the basic formatting options

for tables?

 To which elements do we apply the

formatting properties?

 Descendant selectors in CSS

 Putting it altogether to create “table

styles”

Tables in Help

Components of an HTML-based table

Table

<table>

Caption

Column group

Column

<col>

Header section

<thead>

Body section

(row group)

<tbody>

Row

<tr>

Header cell

<th>

Data cell

<td>

Why is table formatting a challenge?

 Tables contain multiple nested elements

 Each nested element has its own

formatting properties

– Table: width, borders, background, etc.

– Caption: font, colour, margin, position, etc.

– Column: width

– Table header: background

– Table cells: alignment, padding, borders,

background, font, colour, etc.

 How can we control all of this with a

single style?

My objectives for table formatting

 Simplify my table mark-up!

How do we apply the formatting?

 Using CSS of course!

 My objectives for table formatting:

– No formatting information within HTML

code

– Formatting all within linked CSS file

– Should be as easy as possible to apply a

specific look-and-feel to an entire table

Strategy

 Use CSS properties instead of HTML

attributes

Examples:

– Instead of:

Use:

table { width: 100%; }

– Instead of:

Use:

tr { vertical-align: top }

HTML

CSS

HTML

CSS

Strategy

 Avoid inline CSS

 Example:

– Instead of:

– Use:

{border-left:1px Solid #008000;}

Linked CSS file

<td style=

"border-left: 1px Solid #008000;">

HTML

<td>

HTML

The basic table formatting options

 Width (table and columns)

 Height (table and rows)

 Background colour (table, header, rows,

cells)

 Borders (table frame and individual cells)

 Border-collapse (table property)

 Padding (within cells)

 Horizontal alignment (of data within cells)

 Vertical alignment (of data within cells)

Demonstration

Border collapse property

Table

{border-collapse: separate}

Table

{border-collapse: collapse}

Which elements do we format?

 Make use of inheritance

table

thead

tbody

Which elements do we format?

 Apply formatting properties to the highest

possible element

table { text-align: left; }

tr { vertical-align: middle; }

tbody { background-color: #FFC0FF; }

 Golden rules about inheritance:

– Font properties, colour and alignment are

inherited

– "Box" properties (margin, border, padding),

width and height are not inherited

Where to apply some key properties

 Table border/frame:

– table

 Cell borders and padding:

– td

– th

 Row borders (not supported by IE):

– tr

 Header background colour:

– thead or th

 Cell background colour:

– tbody, tr or td

 Horizontal alignment (text-align):

– table or tbody

 Vertical alignment (vertical-align):

– tbody or tr

Problem

 We can define properties for standard

table elements:

table { width 400px, … }

tbody { … }

tr { … }

td { … }

etc.

 BUT all our tables will look the same

Demonstration

Possible solution

 Use CSS classes:

<table>

<thead>

<tr>

<th>

…</th></tr></thead>

<tbody>

<tr>

<td>

…

table { … }

thead { … }

tbody { … }

tr { … }

th { … }

td { … }

HTML

CSS

Possible solution

 Use CSS classes:

…</th></tr></thead>

…

table.formal { … }

thead.formal { … }

tbody.formal { … }

tr.formal { … }

th.formal { … }

td.formal { … }

HTML

CSS

New problem

 Our table mark-up is rather

complicated

 To change the look-and-feel of the

table, we need to replace all the class

attributes in the HTML

Demo

Source

Introducing descendant selectors

 Sometimes known as contextual

selectors

 Simple example:

h1 { font-weight: bold }

em { font-weight: bold }

h1 em { font-style: italic }

Descendant selectors are very useful

 See www.w3.org/TR/REC-CSS2/

selector.html#descendant-selectors

those em elements that are

contained by an h1 element

How this helps with tables

 Apply class attribute to table element only

 Use descendant selectors to specify

formatting for all nested elements

…</th></tr></thead>

…

HTML

table.formal { … }

thead.formal { … }

tbody.formal { … }

tr.formal { … }

th.formal { … }

td.formal { … }

CSS

How this helps with tables

table.formal { … }

table.formal thead { … }

table.formal tbody { … }

table.formal tr { … }

table.formal th { … }

table.formal td { … }

CSS

HTML

<thead>

<tr>

<th>

…</th></tr></thead>

<tbody>

<tr>

<td>

…

Only one class

attribute to replace!

Demo

Source

 Apply class attribute to table element only

 Use descendant selectors to specify

formatting for all nested elements

Help Authoring Tool issues

 RoboHelp 7:

– Does not support thead and tbody

elements

– HTML Editor does not represent table

formatting accurately (OK when published)

 Flare 3:

– Has its own proprietary "table styles" as an

alternative strategy

– Provides easy way to alternate row

colours

– Each table style represented by a

separate CSS file

Summary

 Keep table coding as simple as

possible

 Avoid using element attributes for table

formatting

 Use external CSS

 Apply class attribute to top-level

element only

 Use CSS descendant selectors for

nested elements