How to vertically align HTML text as in a column

Question

I'd like to have HTML that looks like this:

we already know that: 2*1 = 2
                      2*2 = 4 
                      2*3 = 6

(ie, the numbers are aligned as in a column)

I could use a table, or maybe text-indent.

I'd like to know other options, and what, if any, is "the right way".

Answer 1

My Two cents for a more semantic, non-table solution:

<div class="content">we already know that:</div>
<div class="math">
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">1</span><span class="operator">=</span><span class="result">2</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">2</span><span class="operator">=</span><span class="result">4</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">3</span><span class="operator">=</span><span class="result">2</span>
    </div>
    <div class="eq">
        <span class="operand">2</span><span class="operator">*</span><span class="operand">300</span><span class="operator">=</span><span class="result">600</span>
    </div>
</div>

.content {float:left;}

.math {float:left;}
.math .operand {width: 3em;display: inline-block; }
.math .operator {padding-left: 5px; padding-right:5px }
.math .result {font-weight:bold; text-align:right;width:3em;display: inline-block; }

However, having seen the extra markup and reviewing what you have I think a table is actually your best solution. You have a table of data with 5 columns, two operand columns, two operator columns and one result column.

http://jsfiddle.net/vnMM2/

UPdate Table Version (quick and dirty conversion)

<div class="content">we already know that:</div>
<table class="math">
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">1</td>
        <td class="operator">=</td>
        <td class="result">2</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">2</td>
        <td class="operator">=</td>
        <td class="result">4</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">3</td>
        <td class="operator">=</td>
        <td class="result">2</td>
    </tr>
    <tr class="eq">
        <td class="operand">2</td>
        <td class="operator">*</td>
        <td class="operand">300</td>
        <td class="operator">=</td>
        <td class="result">600</td>
    </tr>
</table>

.content {float:left;}
.math {float:left;}
.math td { text-align:right}

.math .result {font-weight:bold }

http://jsfiddle.net/vnMM2/2/

Answer 2

Use a <pre> tag. Quote from w3Schools:

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

Or if that is not an option for you, you can use CSS to set any element to preserve white space by adding white-space: pre; .

Answer 3

I am little confused. I am not sure, I may answer you properly. If you want to have the Superscript, follow this code: " 2 <sup>1</sup> = 2

2 ¹ = 2

2 ² = 2

Likewise.