Style: Tables - University of Houston
Skip to main content

Style Popout

UH's MD Anderson Memorial Library at night
WHY MIGHT I USE THESE?
These styles can help make your tables more readable and congruent with UH look, feel, and functionality. They can also help table-based content behave better in responsive contexts (being viewed on various width screens or on various devices).

SEE ALSO
Notes on removing a style
See other Style popout examples
Working with HTML Tables

table, table-bordered, & table-striped

These styles are intended for use with tables, and are meant to be applied to the whole table and not individual rows, cells, etc. (i.e. a class attribute is added to the HTML table tag [ <table class="table table-striped" ] ).

Compare:

| Notes about the table before any styles were applied | Advanced: manually editing styles | see also: notes about removing a style |


With table style only:

Plain Table created with only table Style applied
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

With table-bordered style only:

Plain Table with only table-bordered Style applied
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

With table-striped style only:

Plain Table with only table-striped Style applied
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

With table and table-bordered style:

Plain Table with both the table
and table-bordered Styles applied
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

With table and table-striped style:

Plain Table with both the table
and table-striped Styles applied
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

With table, table-bordered, and table-striped styles:

Plain Table with all 3 of the table, table-bordered, and table-striped Styles applied
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

No Style Applied to Table:

This is the Caption of a Plain Table
- no specified Style
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

Notes about the table before any styles were applied:

The original sample table above was created with the WYSIWYG Editor's Insert/Edit Table tool.

It was created with 5 Columns, 4 Rows, 4 points of Cell Padding, zero Cell Spacing, no specified alignment, zero Border, no specified Width or Height, no Class/Style selected, and with a Table Caption. You may notice that in the Table with both table and table-bordered styles applied, the Table is displaying lines provided by the Styles and not by the table code itself.

After creation, the first row was selected and the Row Properties edited to assign it as a table header row:

Row >> Table Row Properties >> Row Type: Header


Advanced: manually editing styles

Table with styles edited manually
row1's
first header
row1's
2nd header
row1's
header-3
row1's
4th header
row1's
header No.5
one 1 20 32/32 ½ x 2
two 2 21 32/16 1 x 2
four 4 22 32/8 2 x 2

If you are working in the CMS, try manually changing the styles for this table. Grab the source code for the table above off this page and bring it into a WYSIWYG's embedded HTML editor (or other text editor). Then find its <table> tag.  Inside that tag, find the class statement. 

<table class="table table-bordered table-striped"> . . . </table>

If you add the basic UH table style to your tables when creating them, then adding (or removing) additional styles becomes easier - the CMS will insert the class statement for you. From there you can just add in or remove each style's name, remembering to keep a space between each different style's name. For more information about editing class statements, see also: Notes about the HTML on the Using Styles main page.

 


Return to: Using the Styles Popout - Custom CSS Selector