Go To ↓ Navigation & Information Other Information

Table Styles

Table Styles

The CSS for these tables are progressive so that styles classes can be simply added to the TABLE and the effects are added. Table widths are not fixed, so it may necessary to add style=”width: % or EM;” to the TABLE element or to a related TD or TH.

Table CSS Classes

  • table-center – Class to center the whole table.
  • table-lines-vertical – Black vertical lines between inner cell columns
  • table-lines-horizontal – Black vertical lines between inter rows
  • table-cells-even-down-grey – Even numbered cell rows downward will have light grey background
  • table-cells-even-across-grey – Even numbered cell rows across will have light grey background
  • table-header-bg-dark-grey – TH elements will have a darck grey backgroud with white text.
  • table-header-bg-red – TH elements will have red background with white text.
  • table-caption-bg-red – CAPTION elements will have red background with white text
  • table-caption-bg-dark-grey – CAPTION elements will have a dark grey background with white text.
  • table-border-black – TABLE will have a black 1px border on outside.

This is a table with no styling.

No Style
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth

This is a table styled with class=”table-defaults”. This sets up default spacing (padding in each table cell) and a top alignment for all the cells.

<table class="table-defaults">
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>fourth</th>
</tr>
</table>
Styled with class=”table-defaults” for spacing
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth

This table has basic class added called “table-lines-vertical”

Table Style table-lines-vertical
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth

This table has basic class added called “table-lines-horizontal”

Table Style table-lines-horizontal
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth

This is a more complex table with the class defined as: table-lines-vertical table-cells-even-down-grey table-header-bg-red table-caption-bg-red table-border-black table-center

Table Style table-lines-verticalwith table-cells-even-down-grey
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth

Another complex table with grey across and a dark grey header.

Table Style B with table-cells-even-across-grey table-header-bg-dark-grey
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth

This version mixes up many of the styles.

Table Style with table-lines-vertical table-lines-horizontal table-cells-even-down-grey table-cells-even-across-grey table-header-bg-dark-grey table-caption-bg-red table-border-black table-center
First Second Third fourth
items in first items in esecond items in third items in fourth
items in row one first items in row two esecond items in row three third items in row four fourth
items in row one first items in row two esecond items in row three third items in row four fourth
Go To ↑ Top