Style Tables with CSS

In Paligo, content and structure are separated from styling. This means that you do not apply styling directly to your tables. Instead, you style your tables with:

CSS for HTML output
Layout Editor for PDF output, see Table Styling (PDF)

Note

To get the styling working, you first need to Enable Table Styling for each layout that is to use the styled tables.

Enable Table Styling

Before you can style your tables, you have to enable Output classes for styling of tables in the Layout Editor.

Select Layout in the top menu.

Paligo displays a list of Layouts. The list is empty if there are no custom Layouts in your Paligo instance.
Select the Layout you want to update or Create a Layout.

Tip

You can copy the URL of the Layout Editor and paste it into a new tab in your browser. This can be useful if you frequently switch between your Paligo content and the Layout settings.
Select Table Styles in the sidebar.
Ensure Output classes for styling of tables is set to Enable.
Select Save.

Apply Styles to All Tables (HTML)

To create styles that will apply to all of your tables for HTML outputs:

Publish your content with the default styling for tables in place, and then open the output in your browser.
Use the browser's inspection tools to identify the class for the part of the table you want to style. For example, if you want to style the header row of your tables, use the inspection tool to find the table header cells in the underlying HTML. You will see that each header cell is styled by .th in the CSS.

Note

To find out more about using browser inspection tools, see Browser Inspection Tool.
Use the browser's developer tools to add new styling for the class. This will let you see what effect your changes will have when you add them to a CSS stylesheet. For example, if you want all table header rows to have a blue background color, you could enter:
```
.th { 
background-color: #557dc4;
}
```
When you are happy with the table stylings you have made, use a code editor or text program to create a new CSS file. Then add your custom styles to that and save it with the .css file extension.
Upload Customized CSS to your layout.

Then, when you publish with that layout, your content will use your custom CSS rules. Your CSS stylesheet will take priority over the Paligo CSS stylesheet.

Apply Styles to Selected Tables (HTML)

To create styles that will only apply to certain tables for HTML outputs, you have to open the topic that contains the table to be styled.

Select the topic or component in the Content Manager to open it in the Editor.

Alternatively, you can Create a Topic and edit that.
Position the cursor inside the table.
Select the table or informaltable element in the Element Context Menu and choose Go to element.
Add the tabstyle attribute in the Element Attributes Panel.
Enter a style name as attribute value.

It will be used as a style name in the HTML output and you will use it in your CSS. It is a good idea to use a name that is easily identifiable.

For example, you might use "Instruments" for tables that contain details about technical instruments.
Select Save.
Publish your content and open it in a browser.
Use the browser's inspection tools to find the class for your table. This should match the name you have given to the tabstyle attribute.

Note

To find out more about using browser inspection tools, see Browser Inspection Tool.
Use the browser's developer tools to add new styling for the table class. For example, you could give an "instruments" table header cells that have a yellow background, like this:
```
.instruments th {
background-color:#ffff00;
}
```
When you are happy with the table stylings you have made, use a code editor or text program to create a new CSS file. Then add your custom styles to that and save it with the .css file extension.
Upload Customized CSS to your layout.

Then, when you publish with that layout, your content will use your custom CSS rules. Your CSS stylesheet will take priority over the Paligo CSS stylesheet.

Style a Table

Use CSS to style a table for HTML5 output. Depending on your requirements, you can:

Apply Styles to All Tables (HTML) - To set styles that will apply to every table, create a CSS file and use selectors that target the table elements. We include some examples at the end of this section
Apply Styles to Selected Tables (HTML) or parts of tables - To set styles that apply to some, but not all tables, you first need to give the tables a class attribute and value. You can then use CSS to style those classes for the HTML5 output.

Open the topic that contains the table if you are to apply styles to specific tables (or parts of those tables):

Select the topic or component in the Content Manager to open it in the Editor.

Alternatively, you can Create a Topic and edit that.
Select the table element that you want to style in the Element Structure Menu:
- table - To style the entire table, for example, for adding a border to the table.
- thead - To style the table header.
- th - To style an individual cell in the table header.
- tr - To style a particular row.
- tbody - To style the body text in the table (not including headers or footers).
- td - To style an individual table cell.
- tfoot - To style the table footer.
Add one of the attributes below in the Element Attributes Panel.

Enter the class name that will appear in the HTML as value. Use lowercase for the value and do not include spaces.
- tabstyle - Use tabstyle on the table or informaltable element. This is for applying a class name to the table as a whole. If you use your content in HTML5 and PDF outputs, you will need to set the value to tabstyle 1 to 5 to match the table styles for PDF. If you only publish to HTML, you can set the tabstyle value to any class name.
- role - As an alternative to tabstyle, you can use role on table elements and informaltable elements. Set the value to the class name you want to appear in the HTML5 output. Paligo will only use the role and class name for HTML5 outputs.
- class - Use on elements inside the table, such as thead, tfoot, tr, and td. Set the value to the class name you want to appear in the HTML5 output.
Select Save.
Use a third-party code editor or text editor to create a CSS file.
Use CSS to style the table elements for the HTML output.

When defining your CSS, you need to consider that your Paligo content may contain tables and also informal tables. The Paligo HTML5 output also uses tables for layout in certain places, for example, with some images. Typically, you will want to avoid styling the tables that are used for layout, so that your styles only affect the tables and informal tables.

We have included some examples of commonly used table selectors (see the examples after this procedure).
Save your CSS file and Upload Customized CSS.
Publish your content using the HTML5 Layout you edited in the previous step.

Paligo generates your HTML5 Help Center. It includes your custom CSS. When you open it in a browser, the browser will apply the CSS rules to your tables.

CSS Selectors for Targeting All Tables

CSS Selectors for Targeting All Formal and Informal Tables. Here are some example selectors for applying styles to all tables, informal tables only and formal tables only:

Entire table:

To target all formal tables and informal tables, without targeting other tables that Paligo uses for images and other layout purposes:
```
table.table,
table.table-bordered,
table.informaltable {
     /* Your styles here */
}
```
Table header:

To target the table header in formal tables and informal tables:
```
.table .thead, .informaltable .thead {
    /* Your styles here */
}
```
Table body:

The following selector targets the body of formal tables and informal tables. The body styling applies to every cell in the main part of the table, unless it is overridden by more specific styling. It is not used to style the header or footer.
```
.table tbody td,
.informaltable tbody td {
         /* Your styles here */
}
```
Table row:

To target all rows in formal tables and informal tables:
```
.table tr,
.informaltable tr {
     /* Your styles here */
}
```
Table cells:

To target all cells in formal tables and informal tables:
```
.table td,
.informaltable td {
     /* Your styles here */
}
```
Table footer:

To target the cells in a table footer for both formal tables and informal tables:
```
.table tfoot td,
.informaltable tfoot td {
     /* Your styles here */
}
```
Target formal table only:

To target formal tables only, remove the informaltable parts of the selector. For example, if you only want to target the body of formal tables, use:
```
.table tbody td {
         /* Your styles here */
}
```
Target informal table only:

If you only want to target informal tables, remove the formal table part, for example:
```
.informaltable tbody td {
         /* Your styles here */
}
```

Alternate row shading:

To shade the background of alternate rows in tables:

.table tbody tr:nth-child(even),
.informaltable tbody tr:nth-child(even) {
  background-color: #000000; /* Change to color of your choice */
}

The following CSS is an example for giving formal tables and informal tables the same styling.

A formal table and an informal table. Both have the same custom styling. Blue headers with white text, light blue background on alternate rows, pink footer with white text. The cells of the table have a thin grey border line. The table has a blue outline.

The CSS for these tables is:

 /* Target table and informaltable, style the border around the edge of table, 
remove space after table but inside container div.  */

table.table,
table.table-bordered,
table.informaltable {

    /* table.table-bordered makes sure that we do not target tables that are used for layout, such as
        tables for image alignment.
  */

    /* remove space after table, inside div */
    margin-bottom: 0px !important;

     /* Your styles here */
    border: 2px solid #017efa !important;
}


 /* Target table and informaltable header, style the background color and text color */

.table thead, .informaltable thead {
        
    background-color: #017efa;
        color: white;
}


 /* Target table and informaltable body, style the font size */

.table tbody,
.informaltable tbody {

         /* Your styles here */
         font-size:8pt;
}


 /* Target table and informaltable row, style the font size */

.table tr, 
.informaltable tr {
         /* Your styles here */
        font-size: larger;
}


 /* Target all body and footer cells in table and informaltable, style the alignment */

.table td, 
.informaltable td {
          /* Your styles here */        
          text-align: center;
}

 /* Target all cells in header for table and informaltable, style the alignment */

.table th, 
.informaltable th {
          /* Your styles here */        
          text-align: center;
}


/* Target all cells in footer of table and informaltable, style the background color and text color */

.table tfoot td, .informaltable tfoot td {
        background-color: #FD1F9BBD;
        color: white;
}


/* Target all even rows in table and informaltable, style the background color */

.table tbody tr:nth-child(even),
.informaltable tbody tr:nth-child(even) {
   background-color: azure; /* Change to color of your choice */
}


/* Target internal borders of each cell in the header, body, footer of a formal table,
 style the cell borders */

.formaltable > tbody > tr > td,
 .formaltable > tbody > tr > th,
  .formaltable > tfoot > tr > td, 
  .formaltable > tfoot > tr > th, 
  .formaltable > thead > tr > td, 
  .formaltable > thead > tr > th {
        /* Your styles here */
        border: 1px solid #ddd;
}


/* Target internal borders of each cell in the header, body, footer of an informal table,
 style the cell borders */

.informaltable > tbody > tr > td,
 .informaltable > tbody > tr > th,
  .informaltable > tfoot > tr > td, 
  .informaltable > tfoot > tr > th, 
  .informaltable > thead > tr > td, 
  .informaltable > thead > tr > th {
        /* Your styles here */
        border: 1px solid #ddd;
}

CSS Selectors for Specific Tables

CSS Selectors for Specific Tables (Tabstyle and Class required). Here is an example of CSS that is designed to style a specific informal table that has:

informaltable element with the tabstyle or role attribute, with a value of custominfomaltable.
A cell in the informal table with the class attribute and a value of lastcell.

The styles only apply to tables that have the attributes listed above. They do not apply to other tables.

Two informal tables. The top informal table is using the default styling and is white with black text and no background colors on the rows, header, or footer. The lower informal table has colored header, colored footer, different blues for alternate rows, and the last cell has a pink background and bold text. A callout arrow points to the lower table.

The CSS for this table is:


/* set border on entire "custominformaltable" informaltable */

.informaltable.custominformaltable {
        border-style: groove;
        border-color:#ddd;      
}


/* set background color and text color for "custominformaltable" informaltable header */

.informaltable.custominformaltable thead {
        background-color:#4f5f77;
        color:white;
}


/* set background color and text color for "custominformaltable" informaltable footer */

.informaltable.custominformaltable tfoot td{
        background-color:#4f5f77;
        color:white;
}


/* set background color and text color for "custominformaltable" informaltable footer */

.informaltable.custominformaltable tfoot {
        background-color:#4f5f77;
        color:white;
}


/* set background color for even rows in "custominformaltable" informaltable */

.informaltable.custominformaltable tbody tr:nth-child(even) {
  background-color: #aee4f9; 
}


/* set background color for odd rows in "custominformaltable" informaltable */

.informaltable.custominformaltable tbody tr:nth-child(odd) {
  background-color: #f6f9fb; /* Change to color of your choice */
}


/* set background color and text color for cell with class name "lastcell" */

.informaltable.custominformaltable .td.lastcell {
        background-color:hotpink;
        color:black;
}


/* set border on entire "custominformaltable" informaltable */

.informaltable.custominformaltable {
        border-style: groove;
        border-color:#ddd;      
}


/* set background color and text color for "custominformaltable" informaltable header */

.informaltable.custominformaltable thead {
        background-color:#4f5f77;
        color:white;
}


/* set background color and text color for "custominformaltable" informaltable footer */

.informaltable.custominformaltable tfoot {
        background-color:#4f5f77;
        color:white;
}


/* set background color for even rows in "custominformaltable" informaltable */

.informaltable.custominformaltable tbody tr:nth-child(even) {
  background-color: #aee4f9; 
}


/* set background color for odd rows in "custominformaltable" informaltable */

.informaltable.custominformaltable tbody tr:nth-child(odd) {
  background-color: #f6f9fb; /* Change to color of your choice */
}


/* set background color and text color for cell with class name "lastcell" */

.informaltable.custominformaltable .td.lastcell {
        background-color:hotpink;
        color:black;
}

Articles in this section

Note

Enable Table Styling

Tip

Apply Styles to All Tables (HTML)

Note

Apply Styles to Selected Tables (HTML)

Note

Style a Table

CSS Selectors for Targeting All Tables

CSS Selectors for Specific Tables

Comments

Product

Resources

Support

Articles in this section

Note

Enable Table Styling

Tip

Apply Styles to All Tables (HTML)

Note

Apply Styles to Selected Tables (HTML)

Note

Style a Table

CSS Selectors for Targeting All Tables

CSS Selectors for Specific Tables

Related articles