Add a Table

The WYSIWYG text editor seen in various places throughout Spark doesn't include a Table tool - but that shouldn't keep you from adding your own table to a text block. It just requires you to edit the HTML. Look for <> in the tool bar.

Even if you're not familiar with HTML you can drop in the code shown below and make a few modifications to create a functional Table. 

<table>
  <tr>
    <td>Company</td>
    <td>Contact</td>
    <td>Country</td>
  </tr>
  <tr>
    <td>Flidderstein</td>
    <td>Maria Anders</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Centro comercial </td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Each table row (tr) starts with a <tr>  and ends with a </tr>  tag. Each table data (td) cell is defined by a <td>  and a </td>  tag. The whole 'package' gets wrapped with an opening <table> and closing </table>

This creates a table with 3 columns and 3 rows - but without any styling.

To add borders, custom spacing, colors and other styling, you'll need to include some CSS (cascading style sheets) code. Here's what you can do with a little extra effort:

That's created with this code:

<style>
table {
  border: 1px solid black;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #D6EEEE;
}
</style>

<table>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland</td>
  <td>Brown</td>
  <td>$250</td>
  </tr>
</table><br>

The code within the <style> tags is the CSS - it simply defines how specific elements within the HTML should display.

Now that you have some basic knowledge of table structure and styling, we encourage you to visit W3schools.com for additional details. W3schools provides much more thorough instruction and allows you to experiment with live code. Other than the actual HTML, if you have questions about adding your code to a Spark page, just contact Saffire Support.