Table Styles

Styling Tables

Unstyled tables look like this:

The above looks fine, but sometimes styling the table borders and spacing helps make it more clear. We've created several styles you can call on to style tables.

To style a table, wrap the table in style tags with a class tag like this:

<<style class="table-class">>
...table goes here...
<</style>>

Centering Tables

To center a table, add "centered" to the class like so:

<<style class="table-class centered">>
...table goes here...
<</style>>

Top-aligning header cells

To align the text in a header cell to the top, add the "table-head-align-top" class like so:

<<style class="newspaper-side table-head-align-top">>
|= Some content | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor tempus nibh, ut suscipit metus sagittis non. Cras semper ipsum at blandit ultricies. Pellentesque posuere mattis quam a tristique. Sed odio nulla, volutpat id molestie eu, porta id nibh. Sed porta sem quis justo porta, et suscipit erat cursus. Nunc lacus diam, pharetra non eleifend id, fringilla sit amet nisi. Sed ultricies venenatis odio non rhoncus. Ut in lacus turpis. Suspendisse a nisl tortor. Praesent adipiscing enim eget tellus pharetra commodo. Nullam et lobortis augue. Cras porttitor arcu et ornare luctus.
<</style>>

Table Styles

The following table classes are available:

borders

<<style class="borders centered">>

borders-side

<<style class="borders-side centered">>

darkheader

<<style class="darkheader centered">>

darkheader-side

<<style class="darkheader-side centered">>

darkheader-nospace

<<style class="darkheader-nospace centered">>

darkheader-nospace-side

<<style class="darkheader-nospace-side centered">>

darkheader-nospace-borders

<<style class="darkheader-nospace-borders centered">>

darkheader-nospace-borders-side

<<style class="darkheader-nospace-borders-side centered">>

newspaper

<<style class="newspaper centered">>

newspaper-side

<<style class="newspaper-side centered">>

underheader

<<style class="underheader centered">>

underheader-lines

<<style class="underheader-lines centered">>

sideheader

<<style class="sideheader centered">>

sideheader-lines

<<style class="sideheader-lines centered">>