Table Styles

Styling Tables

Unstyled tables look like this:

Column OneColumn TwoColumn ThreeColumn Four
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

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>>
Some contentLorem 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.

Table Styles

The following table classes are available:

borders

<<style class="borders centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

borders-side

<<style class="borders-side centered">>
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

darkheader

<<style class="darkheader centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

darkheader-side

<<style class="darkheader-side centered">>
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

darkheader-nospace

<<style class="darkheader-nospace centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

darkheader-nospace-side

<<style class="darkheader-nospace-side centered">>
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

darkheader-nospace-borders

<<style class="darkheader-nospace-borders centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

darkheader-nospace-borders-side

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

newspaper

<<style class="newspaper centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

newspaper-side

<<style class="newspaper-side centered">>
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

underheader

<<style class="underheader centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

underheader-lines

<<style class="underheader-lines centered">>
Column OneColumn TwoColumn Three
ApplesOrangesGrapes
BooksRadioMovies
RunningWalkingJumping

sideheader

<<style class="sideheader centered">>
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

sideheader-lines

<<style class="sideheader-lines centered">>
FruitApplesOrangesGrapes
EntertainmentBooksRadioMovies
ExerciseRunningWalkingJumping

Comments

Comments loading...
Content reproduced on this site is the property of its respective owners, and this content is not reviewed in advance by MariaDB. The views, information and opinions expressed by this content do not necessarily represent those of MariaDB or any other party.