In this example, you will see how you can use your own CSS file to change the appearance of tables. We'll start with an "About Space Travel" article that contains a table.

The default table style in paligo-zd.css has no border or colored background.

You can use CSS to change the appearance, such as giving the table rows colors and changing the width.

To make the style changes, you start by using the web browser's inspection feature to look at the styles that are currently applied to the content. The parts of the code that you need to style are the overall table (table), table header (th), and table rows (tr).

You decide to create your own css file for styling the table.

Using a CSS editor, you create the following CSS:

   
    
        /*Set border on table head and table cells */
        table td,
        table th{
            border: 1px solid #666;
        } 
        
        /*Set width and border spacing for entire table */
        table{
            width: 98%;
            border-spacing: 0px;
        }

       /* alternating table row colors*/
       tr:nth-child(even) {background: #f8fbfd}
       tr:nth-child(odd) {background: #e8f4fb}

        /* set rounded corners to zero initially */
        th, td {
            border-radius: 0;
        }

        /*set amount of rounding per corner */
        thead tr:first-child th:first-child, 
        table tr:first-child td:first-child,
        tbody tr:first-child th:first-child {
            border-top-left-radius: 0.6em;
        }
        thead tr:first-child th:last-child, 
        table tr:first-child td:last-child,
        tbody tr:first-child th:last-child {
            border-top-right-radius: 0.6em;
        }
        tbody tr:last-child td:first-child, 
        table tr:last-child td:first-child,
        tbody tr:last-child th:first-child {
            border-bottom-left-radius: 0.6em;
        }
        tbody tr:last-child td:last-child, 
        table tr:last-child td:last-child,
        tbody tr:last-child th:last-child {
            border-bottom-right-radius: 0.6em;
        }

        thead + tbody tr td,
        tr + tr td ,
        tr + tr th {
            border-top: 0;
        }

        tr th + th,
        tr td + td {
            border-left: 0;
        }

        /* shade table header cells */
        table th {
            background-color: #0072ef;
            color: #FFF;
        }

You save the CSS file as "custom-table.css".

Now you need to add the file to Zendesk and set it to be referenced for each Zendesk article. In Zendesk, you browse to Customize design > Edit theme > Edit code and add the custom.table.css as an asset.

You then open the document_head.hbs template and add the following line at the bottom of the list of references to CSS files:

<link href=“{{asset ‘custom-table.css’}}” rel=“stylesheet” type=“text/css” />

You publish the template to save the changes.

Now when you view the "About Space Travel" article, it uses the table styles from your custom CSS file (with the exception of styles that are set to !important in the other CSS files).