Tables

This guide provides instructions on appropriately formatting tables for use in text fields within Sitecore. It's important to understand that the table will be converted to HTML. The guide includes the initial structure and styling recommendations for formatting tables.

Tip

Using a table parser can help you easily convert the table from your excel file to HTML table.

HTML

The table uses a standard HTML table element.

Note

Replace the appropriate colors to match with the ticket's brand.

Tournaments Page

<style>
.table tbody th,
.table tbody tr td,
.table thead th {
font-size: 12px;
vertical-align: middle;
}

.tablescroll {
overflow: auto;
max-height: 20em;
}

.tablescroll th {
position: sticky;
top: 0;
z-index: 2;
}

details {
border: 1px solid #brand_color;
padding: .75em .75em 0;
margin-top: 10px;
box-shadow: 0 0 20px #d4d4d4;
}

summary {
font-weight: bold;
margin: -.75em -.75em 0;
padding: .75em;
color: #brand_text_color;
}

summary {
font-weight: bold;
margin: -.75em -.75em 0;
padding: .75em;
background-color: #brand_color;
color: #brand_text_color;
}

details[open] summary {
border-bottom: 1px solid #brand_color;
margin-bottom: 10px;
}

.tablescroll-accord {
overflow: auto;
}

.tablescroll-accord th {
position: sticky;
top: 0;
z-index: 2;
}
</style>

<details>
<summary>Table Title</summary>
<div class="tablescroll-accord" style="display: flex; flex-wrap: wrap;">
<table class="table table-striped table-bordered" style="text-align: center; background-color: #brand_text_color;">
<thead>
<tr style="color: #brand_text_color; background-color: #brand_color;">
  <th style="color: #brand_text_color">
    <strong>Date</strong>
  </th>
  <th style="color: #brand_text_color">
    <strong>Time</strong>
  </th>
  <th style="color: #brand_text_color">
    <strong>Event</strong>
  </th>
  <th style="color: #brand_text_color">
    <strong>Buy-in > Package</strong>
  </th>
</tr>
</thead>
<tbody>
<tr>
  <td>April 1</td>
  <td>8:35 PM</td>
  <td>
    <strong>KICK OFF SEAT + CASH (LIVE):</strong>
  </td>
  <td>
    <strong>$100 > $600</strong>
  </td>
</tr>
</tbody>
</table>
</div>
</details>

MPP

<table class="table table-striped table-bordered" style="text-align: center; background-color: #fff;">
  <thead>
    <tr>
      <th style="color: #brand_text_color; background-color: #brand_color;" colspan="2">
        <strong>Table Title</strong>
      </th>
    </tr>
    <tr style="background-color: #brand_color; color: #brand_text_color;">
      <th style="background-color: #brand_color; color: #brand_text_color;">Position</th>
      <th style="background-color: #brand_color; color: #brand_text_color;">Reward</th>
    </tr>
  </thead>
  <tbody style="color: #brand_text_color;">
    <tr>
      <td>1</td>
      <td>$10,000 + Vegas Invite</td>
    </tr>
    <tr>
      <td>
        <strong>Total:</strong>
      </td>
      <td>
        <strong>$25,000 Casino Bonus</strong>
      </td>
    </tr>
  </tbody>
</table>

Adjustments

Some adjustments are needed to be made from the original copy to present the data in a more cleaner way.

• Update the date to be on the Month Day (e.g 10/12/2023 -> October 12) format.

Contributors