Page Comparison

Mostly, tables should be left-aligned because we read left-to-right. However, tables of financial figures should have the columns with numerals set to right-aligned.

To set alignment, you need to go into the source code and edit the HTML. The code options you need to copy in are:

• align="left"

• align="right"

• align="center" (note the US spelling)

• align="justify"

Remember to add a space between th or td and the alignment code snippet, so it looks like this: <th align="right">

How to add the code

Click the Source button.

You'll see some code like this:

<table>
<thead>
<tr>
<th>Year</th>
<th>Total amount ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2019</td>
<td>23,100</td>
</tr>
<tr>
<td>2020</td>
<td>19,870</td>
</tr>
<tr>
<td>2021</td>
<td>21,100</td>
</tr>
</tbody>
</table>

The heading cells are coded with <th>.

The rest of the cells are coded <td>.

To set right-alignment for the second column in the example, you need to add the code snippet into the <th> and all the corresponding <td> tags.

Here's an example, using the code above with the alignment snipped added:

<table>
<thead>
<tr>
<th>Year</th>
<th align="right">Total amount ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>2019</td>
<td align="right">23,100</td>
</tr>
<tr>
<td>2020</td>
<td align="right">19,870</td>
</tr>
<tr>
<td>2021</td>
<td align="right">21,100</td>
</tr>
</tbody>
</table>

Here's how the table will display with right alignment set on the second column.

Image Removed

Image Added