HTML: How to make mid-row text line up the same as other rows like "tabs"

I am trying to build an HTML signature file and want the phone numbers and such to line up.

Phone: (234) 567-8910

Cell:     (234) 567-8910

Fax:     (234) 567-8910

Email:  mike@example.com

I can do different sized margins or number of   for each line but that doesn't display the same on all email clients/web browsers.

    Phone: <span style="margin-left:12px;"><?=$phone ?></span><br/>
    Cell: <span style="margin-left:23px;"><?=$cell ?></span><br/>
    Fax: <span style="margin-left:25px;"><?=$fax ?></span><br/>
    Email: <span style="margin-left:14px;"><?=$email ?></span><br/>

With tables depreciated I don't want to rely on using one.

Also it's for an email signature so it has to be abl开发者_如何学运维e to be displayed in outlook (which doesn't accept margin- or float among other things).

I might get grilled for not listening to your question properly, but I think it's important that you realize that tables are not completely depreciated, but rather depreciated when relying on one for something other than tabular data.

In your case, your data is tabular. You have a column on the left specifying content types, and a column on the right specifying values.

Thus, in this usage case, the use of tables is perfectly acceptable, and is actually what tables are designed for. Thus, it would actually make less sense to use tabs, spaces, or padding here, because there is already an HTML structure designed for this exact purpose.

Use a definition list:

<dl>
    <dt>Phone</dt>
    <dd>Some number</dd>
    <dt>Cell</dt>
    <dd>Some mobile number</dd>
    <dt>Fax</dt>
    <dd>Seriously, a fax?</dd>
    <dt>Email</dt>
    <dd>An email address</dd>
</dl>

CSS:

dl {
    width: 80%;
    margin: 0 auto;
}

dt,dd {
    display: inline-block;
    /* or you could use:
    float: left;
    */
}

dt {
    width: 30%;
}

dd {
    width: 65%;
}

JS Fiddle demo, using display: inline-block;.

JS Fiddle demo, using float: left;.