Table Styles

Covered in This Tutorial

• How to Add Styles
• Style Examples
• Table Headers
• Table Borders
• Content Alignment

How to Add Styles

There are a variety of pre-built styles that you can apply to tables. These styles can be applied by adding one or more CSS classes to the <table> element in the HTML.

1. Save any changes you’ve made. This ensures that if you make a mistake when editing the html, you can use Revisions to undo only the table style edits without losing other updates.
2. Copy the class(es) from the examples provided below that you wish to apply to the table.
3. Switch to the Code view:
   1. In the editor, click on the Code tab to see the html version of the page.
      
   2. Tip: before switching to the code view, highlight the first piece of content inside the table. It will remain highlighted in Code view, making it easier to locate the <table> element.
4. Locate the <table> element:
   1. It will appear just above your highlighted content.
   2. Example: <table> or <table style=”width: 100%; border-collapse: collapse;”>.
5. Modify the <table> element:
   1. The table element may already have some styles applied such as <table style=”width: 100%; border-collapse: collapse;”>.
   2. Delete only the style=”…” portion so that just <table> remains.
   3. Add the class attribute <table class=””>.
   4. Paste your copied class name(s) inside the quotes.
      1. Other styles rely on the basic table style for their core formatting.
      2. Start with the basic table style, then layer on other styles like condensed, striped, bordered, or hover to customize the appearance.
   5. The resulting html will look something like <table class=”table”>.
   6. To apply multiple classes, separate them with spaces (not commas). For example <table class=”table table-condensed table-bordered table-striped”>
6. Switch back to the Visual editor:
   1. Click on the Visual tab.
   2. Note: The styles will not display inside the editor, they will only appear on the published page.
7. Save your changes.
8. If something went wrong when applying styles, don’t panic. Use Revisions to restore your last saved version and try again.

Style Examples

Each example below shows which class names to use and how the table will appear on the published page. The basic table provides the table foundation. Combinations of other styles such as condensed, striped, bordered, or hover can be added to the basic table to achieve the desired look.

Basic Table

This table uses the following class: table.

Resulting html: <table class="table">

Condensed Table

This table uses the following classes: table and table-condensed

Resulting html: <table class="table table-condensed">

Hover Table

This table uses the following classes: table and table-hover

Resulting html: <table class="table table-hover">

Striped Table

This table uses the following classes: table and table-striped

Resulting html: <table class="table table-striped">

Combo Striped and Hover Table

This table uses the following classes: table, table-striped and table-hover

Resulting html: <table class="table table-striped table-hover">

Bordered Table

This table uses the following classes: table and table-bordered

Resulting html: <table class="table table-bordered">

Combo Bordered and Hover Table

This table uses the following classes: table, table-bordered and table-hover

Resulting html: <table class="table table-bordered table-hover">

Combo Bordered and Striped Table

This table uses the following classes: table, table-bordered and table-striped

Resulting html: <table class="table table-bordered table-striped">

Combo Bordered, Striped and Condensed Table

This table uses the following classes: table, table-bordered, table-striped and table-condensed.

Resulting html: <table class="table table-bordered table-striped table-condensed">

Plain Table

This table uses the following class: plain

Resulting html: <table class="plain">

Responsive Table

A responsive table automatically adjusts to fit smaller screens, like tablets and phones. When there are too many columns to display at once, the table adds a horizontal scroll bar so visitors can swipe or scroll sideways to see all the content without it breaking or overflowing off the page.

Table Headers

You can apply color styles to table headers to help distinguish column and row headings and improve readability. Simply copy the desired table header class and assign it to your table using the same method described above.

Table Borders

Black Borders

Assign the class: table-border-black to apply black borders and improve visual separation.

Cell Alignment

By default, table cell content is aligned to the top. You can change the vertical alignment using the following classes:

• table-align-middle – aligns cell content vertically in the middle
• table-align-bottom – aligns cell content to the bottom

Assign these classes to the table using the same method described above.

Class: table-align-middle

HTML: <table table-bordered table-th-light-gray table-border-black table-align-middle">

Class: table-align-bottom

HTML: <table table-bordered table-th-light-gray table-border-black table-align-bottom">