Set alignment and filling of the first and second columns in <table> via CSS

Question

How can I align the first column on the right and the second column on the left and add 10px using CSS?

<table>
    <tbody>
        <tr><td align="right">Skype:</td><td align="left"> sent</td></tr>
        <tr><td align="right">Tel:</td><td align="left"> [phone]</td></tr>
        <tr><td align="right">e-mail:</td><td align="left"> [e-mail]</td></tr>
        <tr><td></td><td align="left"> [e-mail]</td></tr>
    </tbody>
</table>

Answer 1

You can use a selector :first-child, for example:

td { padding: 10px }
td:first-child { text-align: right }

Your table no longer needs alignment.

Answer 2

Although this is the easiest way, it does not work in all browsers (especially in older versions):

/* While :first-child or :first-of-type (equivalent to this) could have been
 * used, :nth-of-type(n) is easier to change if you ever decide you want
 * different columns to be aligned */
tr td:nth-of-type(1) {
 text-align:right;
}
tr td:nth-of-type(2) {
 text-align:left;
 padding-left:10px;
}

However, replacing :nth-of-type(1)with .firstand :nth-of-type(2)by .secondand adding class="first"both class="second"to the first and second <td>in each row, respectively, you will get improved browser support.

, :

td {
 padding:10px;
}

Answer 3

CSS

table td {
     padding: 10px;
}
.alignright {
     text-align: right;
}

HTML

<table>
     <tbody>
          <tr>
               <td>Skype:</td>
               <td>sent</td>
          </tr>
          <tr>
               <td>Tel:</td>
               <td class="alignright">[phone]</td>
          </tr>
          <tr>
               <td>e-mail:</td>
               <td class="alignright">[e-mail]</td>
          </tr>
          <tr>
               <td colspan="2">[e-mail]</td>
          </tr>
     </tbody>
</table>

Answer 4

? :

HTML

<table>
    <tbody>
        <tr><td class="right">Skype:</td><td class="left"> sent</td></tr>
        <tr><td class="right">Tel:</td><td class="left"> [phone]</td></tr>
        <tr><td class="right">e-mail:</td><td class="left"> [e-mail]</td></tr>
        <tr><td></td><td class="left"> [e-mail]</td></tr>
    </tbody>
</table>

CSS

td {
    padding: 10px;
}
td.right {
    align: right;
}
td.left {
    align: left;
}

Answer 5

I usually configure this information this way:

<table>
    <tbody>
        <tr><td class="left">Skype:</td><td class="right"> sent</td></tr>
        <tr><td class="left">Tel:</td><td class="right"> [phone]</td></tr>
        <tr><td class="left">e-mail:</td><td class="right"> [e-mail]</td></tr>
        <tr><td class="left"> </td><td class="right padding"> [e-mail]</td></tr>
    </tbody>
</table>



.left {float:left; padding-right:10px; width:50px; text-align:right;}

.right {float:left}

.padding {padding-left:60px;}

http://jsfiddle.net/R9YPF/