📢 Lumen - a modern theme to create a job board or listing siteExplore

Ghost Snippets: Custom Stylish Tables

How to add create custom stylish tables in your Ghost theme. You can use these tables when you want to compare data or highlight information in a tabular fashion.

Norbert
Norbert5 min read

The HTML table is used for arranging data into the tabular design. Tables consist of rows and columns and are often used on websites for the effective displaying of tabular data.

A table in HTML makes a lot of sense when you want to organize data that would look best in a spreadsheet. An HTML table is a great way to display things such as financial data, calendars, pricing, feature comparison, the nutrition facts information panel, bowling scores, and many other tabular data.

Tables semantically indicate tabular data and they are the best choice for displaying data of this kind.

Table elements & markup

A table in HTML basically consists of table cells inside rows and columns:

  • <td>(table data) - Each table cell is defined by a <td> and a </td> tag.
  • <tr>(table row) - Each table row starts with a <tr> and end with a </tr> tag.
  • <th>(table header) - Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag.
  • <thead> - The <thead> tag is used to group header content in an HTML table.
  • <tbody> - The <tbody> tag is used to group the body content in an HTML table.

Now that we have the basics, let's create create an HTML card in the editor with the following markup. Here is the code that you can paste directly in the HTML card:

<table class="table-comparison tbody-bg-odd">
  <thead>
    <tr>
      <th></th>
      <th>Basic</th>
      <th>Standard</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>All limited links</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Own analytics platform</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Chat support</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Optimize hashtags</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Unlimited</td>
      <td></td>
      <td></td>
    </tr>
    </tr>
  </tbody>
</table>

A second example:

<table class="table-comparison tbody-bg-odd">
  <thead>
    <tr>
      <th></th>
      <th>iPhone 13</th>
      <th>Samsung S21</th>
      <th>Xiaomi 11</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Price</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
    <tr>
      <td>Diplay size</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
    <tr>
      <td>RAM</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
    <tr>
      <td>Resolution</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
    <tr>
      <td>Processor</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
    <tr>
      <td>Camera</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
    <tr>
      <td>Battery</td>
      <td>
        <span class="good">GOOD</span>
      </td>
      <td>
        <span class="mid">MID</span>
      </td>
      <td>
        <span class="bad">BAD</span>
      </td>
    </tr>
  </tbody>
</table>

Table styling

Let's start styling our tables. The complete CSS is available and can be pasted in Code Injection in the Ghost Admin:

.table-comparison {
  margin-bottom: 4em;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  overflow: hidden;
  display: inline-block;
  overflow-x: auto;
}

.table-comparison thead {
  background-color: none;
}

.table-comparison th {
  padding: 0.5em 1em;
}

.table-comparison td {
  text-align: center;
  padding: 0.5em 1em;
}

.table-comparison td:first-child {
  text-align: left;
}

.tbody-bg-odd tbody tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.tbody-bg-even thead tr:nth-child(odd) {
  background-color: #f2f2f2;
}

.table-comparison tbody .success {
  display: flex;
  background-color: #1fcc82;
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 50%;
}

.table-comparison tbody .success::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 10px;
  display: inline-block;
  width: 3px;
  height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.table-comparison tbody .cancel {
  display: flex;
  background-color: #ff3b3b;
  width: 24px;
  height: 24px;
  position: relative;
  border-radius: 50%;
}

.table-comparison tbody .cancel::before,
.cancel::after {
  position: absolute;
  top: 11px;
  bottom: 0;
  left: 6.3px;
  right: 0;
  content: '';
  background-color: #fff;
  width: 11px;
  height: 2px;
  border-radius: 2px;
}

.table-comparison tbody .cancel::before {
  transform: rotate(-45deg);
}

.table-comparison tbody .cancel::after {
  transform: rotate(45deg);
}

.table-comparison tbody .mid {
  --color-accent: #fbc103;
  color: var(--color-accent);
  border-radius: 2rem;
  padding: 0.2em 1em;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  font-weight: 700;
}

.table-comparison tbody .mid::before {
  background-color: var(--color-accent);
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.table-comparison tbody .good {
  --color-accent: #16c60c;
  color: var(--color-accent);
  border-radius: 2rem;
  padding: 0.2em 1em;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  font-weight: 700;
}

.table-comparison tbody .good::before {
  background-color: var(--color-accent);
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.table-comparison tbody .bad {
  --color-accent: #f03a17;
  color: var(--color-accent);
  border-radius: 2rem;
  padding: 0.2em 1em;
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  font-weight: 700;
}

.table-comparison tbody .bad::before {
  background-color: var(--color-accent);
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

The rendered tables

Here is the final look of the tables:

Ghost CMS Table
Ghost CMS Table
Ghost CMS Table
Ghost CMS Table

You can customize the appearance of the tables, by changing the CSS.

Creating a snippet out of the markup will make it easy to include it anywhere in your posts.

More in Snippets

All snippets

Ghost Snippets: Accordions

How to add create custom stylish accordions in your Ghost theme. Add collapsible customizable pieces of content using our complete tutorial including HTML markup and CSS for styling.

Ghost Snippets: Custom Alert Boxes

How to add alert boxes to your Ghost Theme. How to highlight critical information using alert boxes in your Ghost theme. Guide to add the HTML markup and style it with CSS.

Ghost Pro Hosting

Get the best managed Ghost CMS hosting and focus on bringing value to your audience.