Tables: setting column width, text alignment and merging cells

Tables in the Single Digital Presence (SDP) content management system can be built using either the table option in the Basic text component toolbar or the Data table component.

By default, tables will expand to take up the full text width space on your screen. On desktops, this is 818px wide.

Alignment of text in tables

Table text is left-aligned by default in SDP/Ripple.

Most tables should be left-aligned because we read left-to-right. However, tables with financial figures should have any columns with dollar figures set to right-aligned.

Open

Example of a table with the 2nd column right-aligned.

To change the alignment, select the cells you want to change. They will turn blue.

Then use the alignment icon on the toolbar to choose right aligned.

Open

Example of a table with 3 cells highlighted and the right-alignment dropdown set.

Setting column width in tables

This functionality was updated in Release 1.51.0 in December 2024.

When you build a table, the column width auto-adjusts based on the widest content in a column. They also appear centred on the screen.

If you have several tables on a page with similar information, you may want to adjust column width so they display well.

Below is an example of a page in the CMS with similar tables but varying column widths based on the content.

Because the tables are centred on screen, first you need to drag the right border of the table to fill the screen. The table will display with a yellow border while you’re doing this.

Below is an example of how the page will look when all tables are dragged to full width.

Now that the tables are dragged to full width, you can work on adjusting individual columns for consistency.

Drag the column borders of all your columns to your preferred width.

Setting column width via the source code

You have to do this by eye. If you want to get really specific, you can set the widths in the Source code.

In the example below, I had dragged the column widths so they visually matched and now I’ve gone into the source code to be more exact. I can see my first 2 columns are similar width at 27.45% and 26.97% respectively.

You just need to edit the number after “data-resize-width=”. This will auto adjust the “style=” part as well.

If you do edit these numbers make sure all the columns add up to 100%!

Merging cells in tables

Occasionally you may want to merge some cells in a table heading row, which you can do via the source code.

Use the colspan code

If you're merging cells in a column (such as a heading), you insert the code and remove extra cells that relate to the spanning.

For example: picture a table that has 5 columns, and its first row is set up as the headings. We want merge the heading cells in columns 1, 2 and 3, so we’ll delete the heading code snippet for columns 2 and 3. The rest of the table has 5 cells per row.

<table>
<thead>
<tr>
<th colspan="3">Head 1,2,3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
</tbody>
</table>

Here's what the above code looks like:

Use the rowspan code

If you've set up a table and chosen the first column as the heading row, you'll notice the code looks different to the example above. There are no <thead> tags, and instead the first cell in each row has <th scope="row"> which indicates it's a heading.

Here's an example:

<table>
<tbody>
<tr>
<th scope="row">Head 1</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th scope="row">Head 2</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th scope="row">Head 3</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th scope="row">Head 4</th>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>

This is what the above code looks like:

To merge cells in rows, you insert the code and remove the extra cells that relate to the spanning.

In this example, the table has 3 columns. We want to merge the heading cells in column 1, rows 1 and 2. The cell with <th> tags in the second row therefore needs to be deleted.

<table>
<tbody>
<tr>
<th scope="row" rowspan="2">Head 1 & 2</th>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<th scope="row">Head 3</th>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>

Here's what the above code looks like: