Mythradon PDF Templates Table Styles¶

This page will take you through the process of creating a basic table in a Mythradon PDF Template. We will go through the process step by step to create a great looking table using CSS to style the table. The purpose of this page is to show how to style a HTML table and as such the content of the table has been hard coded.

PDF Template Table Style 7

Step 1 - Create New Template¶

Select Administration | PDF Templates from the Menu Button
Click the Create Template button
Populate the following fields:

Field	Value
Name	Table Style Test 1
Entity Type	Account (Note: This can be any entity. We just used Account for the sake of this example)
Page Orientation	Portrait
Paper Format	A4
Font	Helvetica
Top Margin	25
Bottom Margin	25
Left Margin	10
Right Margin	10

Body

Enter the following into the Body of the PDF Template using Code View

<table>
    <thead>
        <tr>
            <th>Rank</th>
            <th>Name</th>
            <th>Points</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Domenic</td>
            <td>198,980</td>
            <td>Master Blasters</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Sally</td>
            <td>73,935</td>
            <td>The Specialists</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Dan</td>
            <td>56,876</td>
            <td>Master Blasters</td>
        </tr>
    </tbody>
</table>

Click the Save & Continue Editing button

Save and Continue Editing

Open another page tab in your browser and navigate to the Accounts page tab/menu item
Select any Account record or create a sample account record to test against
From the Account Detail View click the Print to PDF button

Print to PDF

Select the Table Style Test 1 template

Select PDF Template

Note: From here on we will navigate between two page tabs. One with the PDF Template editor open where we will update the template. The other page simply displays the generated PDF document. You can simply press 'F5' to refresh the PDF document after we make each change to the template. Remember to use the 'Save and Continue Editing' button each time.

The PDF Document should look very similar to the following. Not a very exciting looking table.

PDF Template Table Style 1

Top

Step 2 - Style the Table Header¶

Update the Body of the PDF Template using Code View with the following:

{{#style}} 

.content-table {
    font-size: 0.9em;
}

.content-table-header {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

{{/style}} 

<table class="content-table">
    <thead>
        <tr class="content-table-header">
            <th>Rank</th>
            <th>Name</th>
            <th>Points</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Domenic</td>
            <td>198,980</td>
            <td>Master Blasters</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Sally</td>
            <td>73,935</td>
            <td>The Specialists</td>
        </tr>

        <tr>
            <td>3</td>
            <td>Dan</td>
            <td>56,876</td>
            <td>Master Blasters</td>
        </tr>
    </tbody>
</table>

We have added a {{#style}} section to page. Note that we do not support the standard HTML <style> tag. Use the {{#style}}...{{/style}} as direct replacements in Mythradon PDF Templates.

In the style section you can see we have defined two named CSS classes.

content-table
content-table-header

We know these are named classes because their name starts with a '.' in the CSS definition. i.e.,

.content-table
.content-table-header

If you save the template and refresh the browser page displaying the generated PDF it should now look like the following:

PDF Template Table Style 2

Note: CSS styles defined in Mythradon PDF Templates do not cascade as good as standard HTML 5 and CSS. As such we need to define more named classes in our style than what we would need to do in HTML.

Top

Step 3 - Style the Table¶

Add the following style to set a bottom border on all the table cells using Code View:

td {
    border-bottom: 1px solid grey;
}

Update attributes on the <table> tag so that it looks like the following:

<table class="content-table" width="100%" cellpadding="5">

The cellpadding will give us a space / padding between the table cells that replaces using standard padding in CSS.

The end result is should now look as follows:

PDF Template Table Style 3

Now let's make the rows alternating colors to make it easier to read each line.

If we had full CSS support we would be able to add a style like the following, however this is not supported:

/* Not Supported */
.content-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

Instead we need to define a class and use it for each odd row such as:

{{#style}} 

.content-table {
    font-size: 0.9em;
}

.content-table-header {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

td {
    border-bottom: 1px solid grey;
}

.oddRow {
    background-color: #f3f3f3;
}

{{/style}} 

<table class="content-table" width="100%" cellpadding="5">
    <thead>
        <tr class="content-table-header">
            <th>Rank</th>
            <th>Name</th>
            <th>Points</th>
            <th>Team</th>
        </tr>
    </thead>
    <tbody>
        <tr class="oddRow">
            <td>1</td>
            <td>Domenic</td>
            <td>198,980</td>
            <td>Master Blasters</td>
        </tr>

        <tr>
            <td>2</td>
            <td>Sally</td>
            <td>73,935</td>
            <td>The Specialists</td>
        </tr>

        <tr class="oddRow">
            <td>3</td>
            <td>Dan</td>
            <td>56,876</td>
            <td>Master Blasters</td>
        </tr>
    </tbody>
</table>

Our table should now look like:

PDF Template Table Style 4

This is fine if our table is hard coded. Not ideal but it does allows us to achieve the necessary results.

However if our table is using live data that we have no control over the number of rows that will be in the table we need to take a different approach which uses the {{#ifMultipleOf @key 2}} tag such as:

{{#style}} 

.content-table {
    font-size: 0.9em;
}

.content-table-header {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

td {
    border-bottom: 1px solid grey;
}

.oddRow {
    background-color: #f3f3f3;
}

{{/style}} 

<table class="content-table" width="100%" cellpadding="5">
    <thead>
        <tr class="content-table-header">
            <th>Name</th>
            <th>Title</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        {{#each contacts}}

        {{#ifMultipleOf @key 2}}
        <tr>
        {{else}}
        <tr class="oddRow">
        {{/ifMultipleOf}}
            <td>{{name}}</td>
            <td>{{accountRole}}</td>
            <td>{{emailAddress}}</td>
            <td>{{phoneNumber}}</td>
        </tr>

        {{/each}}
    </tbody>
</table>

This will give us alternating row colors for an unknown number of rows.

PDF Template Table Style 5

The following is a cleaner example that achieves the same result:

{{#style}} 

.content-table {
    font-size: 0.9em;
}

.content-table-header {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

td {
    border-bottom: 1px solid grey;
}

.oddRow {
    background-color: #f3f3f3;
}

{{/style}} 

<table class="content-table" width="100%" cellpadding="5">
    <thead>
        <tr class="content-table-header">
            <th>Name</th>
            <th>Title</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        {{#each contacts}}

        <tr {{#ifMultipleOf @key 2}}class="oddRow"{{/ifMultipleOf}}>
            <td>{{name}}</td>
            <td>{{accountRole}}</td>
            <td>{{emailAddress}}</td>
            <td>{{phoneNumber}}</td>
        </tr>

        {{/each}}
    </tbody>
</table>

Note:** We created a new template to use the live data and set the page format to be Landscape to better fit our data.

Finally lets add a line at the bottom of the table on the last row.

Currently Mythradon does not support the following CSS which would be perfect for such a situation:

/* Not Supported */
.content-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

So our work around for that limit is to add an extra row on the table and provide a top border with the appropriate color such as:

{{#style}} 

.content-table {
    font-size: 0.9em;
}

.content-table-header {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

td {
    border-bottom: 1px solid grey;
}

.oddRow {
    background-color: #f3f3f3;
}

.lastRow {
    border-top: 4px solid #009879;
    border-bottom: none;
}

{{/style}} 

<table class="content-table" width="100%" cellpadding="5">
    <thead>
        <tr class="content-table-header">
            <th>Name</th>
            <th>Title</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
    </thead>
    <tbody>
        {{#each contacts}}

        <tr {{#ifMultipleOf @key 2}}class="oddRow"{{/ifMultipleOf}}>
            <td>{{name}}</td>
            <td>{{accountRole}}</td>
            <td>{{emailAddress}}</td>
            <td>{{phoneNumber}}</td>
        </tr>

        {{/each}}

        <!-- Last Row with top border color only -->
        <tr>
            <td class="lastRow" colspan="4"></td>
        </tr>
    </tbody>
</table>

This gives us a result that looks like the following:

PDF Template Table Style 6

Top

Understanding the Hierarchy of CSS Specificity¶

The specificity of a CSS style is dependent on where the selector ranks when compared to other conflicting selectors. Selectors define how you target the element you want to style in CSS. Let’s look at the selectors in the hierarchy of highest to lowest:

Inline Styles

These are styles defined in the HTML document, directly attached to the element that is to be styled. For example:

<h3 style='color: red'>Hello World</h3>

This approach to defining styles is no longer considered best practice in HTML but is sometimes the only option that we have in Mythradon PDF Templates.

It is important to note that inline CSS styles will override all other style settings for the element that is being styled.

ID Selectors

ID selectors are the next in the queue. These are selectors that target an element using the element’s ID. IDs are unique; an element can have just one ID, and that ID can be used only once within an HTML document.

{{#style}}

#sub-header { 
  color: blue 
}

{{/style}}

<h3 id="sub-header">Hello World</h3>

These can be overridden by inline styles.

Classes, Attributes, and Pseudo Classes

ID selectors are followed by class selectors, attribute selectors, and pseudo-class selectors (Mythradon does not support pseudo-classes in PDF Templates). The following are some examples showing corresponding CSS selectors with each one:

{{#style}}

.hello-header { 
  color: blue 
}

a {
  color: green
}

{{/style}}

<!-- Class Selector -->
<h3 class="hello-header">Hello World!</h3>

<!-- Attribute Selector -->
<a href="https://docs.mythradon.com/user-guide/mythradon-pdf-templates/">Mythradon PDF Templates</a>

Top

Mythradon PDF Templates Table Styles¶

Step 1 - Create New Template¶

Step 2 - Style the Table Header¶

Step 3 - Style the Table¶

Understanding the Hierarchy of CSS Specificity¶

See also¶