Skip to content

Formatting Tables

Tables are useful in Event Descriptions and emails for laying out schedules, agendas, pricing, comparison data, and other structured content. Eventene's rich-text editor includes a built-in table-insert tool, and tables can be further customized in Code View using HTML and inline CSS.

If you're new to Code View, read Using the Rich-Text Editor first.

Why tables

A well-formatted table:

  • Lays out structured content (times, sessions, prices) clearly
  • Auto-resizes on small, medium, and large displays — works well across phones, tablets, and desktops
  • Supports alignment, borders, padding, and color customization

For very simple two-column content (e.g., a single FAQ pair), a list or a paragraph is often easier. Tables shine when you have repeating structure with multiple rows.

Inserting a table

The fastest way to start is the toolbar:

  1. Open your Event Description or email message in the editor
  2. Click Insert Table from the toolbar's media menu
  3. Choose the dimensions (1×1 up to 10×10)
  4. Type your content into the cells

To fine-tune the styling beyond the toolbar's defaults, switch to Code View and edit the HTML directly.

Using an external table generator

For complex tables, the free Tables Generator is an excellent tool. It provides an interactive table designer with options for borders, alignment, colors, and headers. Once you have a table you like:

  1. Copy the generated HTML to your clipboard
  2. In Eventene, switch to Code View
  3. Paste the HTML where you want the table
  4. Switch back to the visual editor and confirm it renders correctly

Cell padding and spacing

Cell padding adds space inside each cell (between the cell border and its content). Cell spacing adds space between cells. Both are set as attributes on the <table> element:

<table cellpadding="10" cellspacing="5">

To remove all padding and spacing for a tight, compact table:

<table cellpadding="0" cellspacing="0">

Removing borders

By default, tables in the visual editor display with thin borders. To remove them, set the border-color style to transparent on the table and on every cell:

<table style="border-color: transparent; width: 100%;">
  <tbody>
    <tr>
      <td style="border-color: transparent; width: 50%;"></td>
      <td style="border-color: transparent; width: 50%;"></td>
    </tr>
  </tbody>
</table>

The width: 100% on the <table> stretches it to fill the available space; the width: 50% on each <td> divides that space evenly.

Table width

To make a table span the full width of its container:

<table style="width: 100%;">

To set a fixed pixel width:

<table style="width: 600px;">

Percentage widths usually work better than pixel widths because they adapt to different screen sizes.

Sample table formats

The HTML below produces common table styles you can copy and adapt.

Outlined single-column table

A simple bordered table for a single-column announcement:

<table style="width: 50%; border: 1px solid #ccc; margin: 0 auto;">
  <tbody>
    <tr>
      <td style="padding: 15px; text-align: center;">
        <strong>PANCAKE BREAKFAST</strong><br>
        7:30 – 11:00 am<br>
        Social Distancing — Only 6 people per table<br>
        If you have any questions, please contact __________
      </td>
    </tr>
  </tbody>
</table>

2-column table with header row for schedules and agendas

Ideal for event schedules with time on the left and activity on the right:

<table style="width: 100%; border-collapse: collapse;">
  <thead>
    <tr style="background-color: #f0f0f0;">
      <th style="padding: 10px; text-align: left; width: 25%; border-bottom: 2px solid #999;">Time</th>
      <th style="padding: 10px; text-align: left; border-bottom: 2px solid #999;">Activities</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 10px; vertical-align: top;">4 – 5 pm</td>
      <td style="padding: 10px;">Registration / VIP Hors d'oeuvre / Networking Reception</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="padding: 10px; vertical-align: top;">5:15 – 6:15 pm</td>
      <td style="padding: 10px;">VIP Tour with the Deans — The Vault. Docent-guided tour of iconic and rare cars, motorcycles, and trucks spanning 120 years of automotive history. (No photos allowed.)</td>
    </tr>
    <tr>
      <td style="padding: 10px; vertical-align: top;">6 – 7:30 pm</td>
      <td style="padding: 10px;">General Guest Registration, Networking & Hors d'oeuvre Reception</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="padding: 10px; vertical-align: top;">7:15 pm</td>
      <td style="padding: 10px;">Dean's Welcome, School Updates</td>
    </tr>
    <tr>
      <td style="padding: 10px; vertical-align: top;">8:15 pm</td>
      <td style="padding: 10px;">Networking & Dessert Reception</td>
    </tr>
    <tr style="background-color: #f9f9f9;">
      <td style="padding: 10px; vertical-align: top;">9:30 pm</td>
      <td style="padding: 10px;">Event Concludes</td>
    </tr>
  </tbody>
</table>

Alternating row colors make long schedules easier to read.

2-column table with header row and no borders

For a clean schedule look without visible table lines:

<table style="width: 100%; border-color: transparent;">
  <thead>
    <tr>
      <th colspan="2" style="padding: 10px; text-align: left; border-color: transparent;">
        <strong>Saturday, July 14</strong>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding: 10px; vertical-align: top; border-color: transparent; width: 30%;">9:30 – 11:30 AM</td>
      <td style="padding: 10px; border-color: transparent;">Morning Session in the Anacapa Room</td>
    </tr>
    <tr>
      <td style="padding: 10px; vertical-align: top; border-color: transparent;">1:00 – 3:00 PM</td>
      <td style="padding: 10px; border-color: transparent;">Afternoon Session in the Palisades Room</td>
    </tr>
    <tr>
      <td style="padding: 10px; vertical-align: top; border-color: transparent;">5:00 – 8:00 PM</td>
      <td style="padding: 10px; border-color: transparent;">Social Gathering in the Parlor</td>
    </tr>
  </tbody>
</table>

Tips

  • Use percentage widths, not fixed pixel widths. Tables auto-scale better across devices.
  • Set vertical-align: top on cells with multi-line text so content sits at the top of the row instead of centered awkwardly.
  • Preview on mobile. Open the participant's view of your Event on a phone (or use your browser's responsive-mode tools) to confirm the table doesn't overflow horizontally.
  • Keep tables for tabular content. If you're using a table just to control layout (e.g., two-column "image on the left, text on the right" layout), modern HTML/CSS approaches like flexbox would be cleaner — but a table works fine for most purposes.

See Also