Data tables comes in two base style and one alternate. This page represent the base style, to see the second style you will need to remove the comments in the baseline.tables.css stylesheet. The alternate style is also include at the bottom of this page
Columns based tables
Basic table
header 1 |
header 2 |
header 3 |
header 4 |
data 1 |
data 2 |
data 3 |
data 4 |
data 1 |
data 2 |
data 3 |
data 4 |
data 1 |
data 2 |
data 3 |
data 4 |
footer 1 |
footer 2 |
footer 3 |
footer 4 |
3 columns table <table class="table-column width3">
header 1 |
header 2 |
header 3 |
data 1 |
data 2 |
data 3 |
data 1 |
data 2 |
data 3 |
3 columns table <table class="table-column">
header 1 class="width2" |
header 2 |
header 3 |
data 1 |
data 2 |
data 3 |
data 1 |
data 2 |
data 3 |
2 columns table <table class="table-column">
header 1 class="width3" |
header 2 |
data 1 |
data 2 |
data 1 |
data 2 |
1 column table <table class="table-column">
header 1 class="width4" |
data 1 |
data 1 |
1 column table <table class="table-column width2">
header 1 class="width2" |
data 1 |
data 1 |
Units based tables
Basic table with Units <table class="table-unit">
header 1 |
header 2 |
header 3 |
header 4 |
header 5 |
header 6 |
header 7 |
header 8 |
data 1 |
data 2 |
data 3 |
data 4 |
data 5 |
data 6 |
data 7 |
data 8 |
data 1 |
data 2 |
data 3 |
data 4 |
data 5 |
data 6 |
data 7 |
data 8 |
header 1 class="unitx2" |
header 2 |
header 3 |
header 4 |
header 5 |
header 6 |
header 7 |
data 1 |
data 2 |
data 3 |
data 4 |
data 5 |
data 6 |
data 7 |
data 1 |
data 2 |
data 3 |
data 4 |
data 5 |
data 6 |
data 7 |
header 1 class="unitx3" |
header 2 |
header 3 |
header 4 |
header 5 |
header 6 |
header 2 |
data 2 |
data 3 |
data 4 |
data 5 |
data 6 |
header 3 |
data 2 |
data 3 |
data 4 |
data 5 |
data 6 |
header 1 class="unitx4" |
header 2 |
header 3 |
header 4 |
header 5 |
data 1 |
data 2 |
data 3 |
data 4 |
data 5 |
data 1 |
data 2 |
data 3 |
data 4 |
data 5 |
header 1 class="unitx5" |
header 2 |
header 3 |
header 4 |
header 2 |
data 2 |
data 3 |
data 4 |
header 3 |
data 2 |
data 3 |
data 4 |
header 1 class="unitx6" |
header 2 |
header 3 |
data 1 |
data 2 |
data 3 |
data 1 |
data 2 |
data 3 |
header 1 class="unitx7" |
header 2 |
header 2 |
data 2 |
header 3 |
data 2 |
header 1 class="unitx8" |
data 1 |
data 1 |
To use the second style remove the comments in the baseline.tables.css file, this will add the separator and spacing used in the alternate style
Alternate
Alternate table header style<table class="table-column table-reverse">
header 1 |
header 2 |
header 3 |
header 4 |
data 1 |
data 2 |
data 3 |
data 4 |
data 1 |
data 2 |
data 3 |
data 4 |
data 1 |
data 2 |
data 3 |
data 4 |
data 1 |
data 2 |
data 3 |
data 4 |
The alternate table style need the baseline.reverse-table.css included in the /css/alternate folder.