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:

• table only
• table-bordered only
• table-striped only
• table and table-bordered
• table and table-striped
• table, table-bordered, and table-striped
• no style applied

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

With table style only:

With table-bordered style only:

With table-striped style only:

With table and table-bordered style:

With table and table-striped style:

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

No Style Applied to Table:

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

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