HTML table td elements alignment by col

Question

I want to td element align by col.

<table>
    <tr>
        <td>GCAUCCGGGUUGAGUGC</td>
    </tr>
    <tr>        
        <td>...(((())))).....</td>
    </tr>
</table>

but the result is:

GCAUCCGGGUUGAGUGC
...(((())))).....

The two row elements is not aligned by col, like this:

How can I do that?

Answer 1

<table border="0" style="font-family:Courier, monospace;">
<tr>
    <td>GCAUCCGGGUUGAGUGC</td>
</tr>
<tr>        
    <td>...(((())))).....</td>
</tr>
</table>

Answer 2

Maybe you're looking to display in a fixed-width or monospaced font?

Try the following CSS:

table {
    font-family: "Courier New", monospace;
}

Answer 3

You should use monospace font for that.

Answer 4

As others have answered and commented, a monospace font is the way to achieve this. It is less obvious which monospace fonts you should use. You could use just

td { font-family: monospace }

in CSS. But this would mean that each browser uses its default monospace font. On Windows, this is typically Courier New, which is not particularly good (it has largish serifs and it looks like a typewriter font), or even – in very old systems – Courier (a coarse bitmap font). In the given case, it is crucial that “C” and “G” are easily distinguishable from each other; in the screen shot (using some non-monospace font) they are not.

A better approach might be

td { font-family: Lucida Console, Consolas, Monaco, monospace }

You might even consider using a Google font (use the Filters to restrict searches to monospace fonts) in order to ensure (well, almost ensure) that a specific monospace font is used on all platforms and browsers.