Demo of table component

The required markup uses vertical and horizontal table header (th) elements - see below. Adding these elements and their associated scope attributes enables more sophisticated styling of the table and also makes the table capable of being read meaningfully by an aural screen reader. If you don't add them to your table markup, you will not get the full effect demonstrated here.

Three tables styles are available from the table.c ss component

  1. basic_lines - simple horizontal dividing lines between table rows
  2. bars_n_stripes - horizontal rows with color colors for each table row - different colors for headings
  3. tic-tac-toe - a grid where the ends and sides of every row and column are open. This styling uses the :first-childand :last-child psuedo-classes. Only Firefox and Safari are capable of displaying the full effect of this style, but other browser degrade the design nicely, simply rendering some of the open edges closed.

Simply set the class on the table tag to the style you want to use.

Table class: basic_lines

Moje książki
  Style Programowanie
Języki XHTML i CSS PHP i SQL
Tematyka Projektowanie interfejsów Kod zaplecza

Table class: bars_n_stripes

Moje książki
  Style Programowanie
Języki XHTML i CSS PHP i SQL
Tematyka Projektowanie interfejsów Kod zaplecza

Table class: tic_tac_toe

Moje książki
  Style Programowanie Style Programowanie
Języki XHTML i CSS PHP i SQL XHTML i CSS PHP i SQL
Tematyka Interface design Back-end code Interface design Back-end code
Języki XHTML i CSS PHP i SQL XHTML i CSS PHP i SQL
Tematyka Interface design Back-end code Interface design Back-end code