8

I have created an HTML table with two columns. I want the first column containing text to be right aligned, but I want the second column to stay left aligned as it contains check boxes. For presentation it would look, but I’ve no idea. I have tried creating a td class="column1" and then text-align: right; in the CSS, but no luck.

How can I do it?

HTML

<td class="column1">Retrieve Logs:</td>
<td class="column2"><input type=checkbox name="getcamlogs" checked="checked"></td>

CSS

td.column1 {
   text-align: right;
}
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
smurf
  • 271
  • 2
  • 3
  • 12
  • Nothing's wrong with the code you posted, works fine in my browser. – nobody Sep 02 '11 at 09:41
  • really? Still wont work on mines :/ – smurf Sep 02 '11 at 09:45
  • Okay works, a simple space was stopping it! Typical! Thanks very much! – smurf Sep 02 '11 at 09:47
  • This answer to a similar question is better: https://stackoverflow.com/a/11984864/3421814 – Andrej Adamenko Oct 08 '20 at 10:04
  • The canonical may or may not be *[Better way to right align text in an HTML table](https://stackoverflow.com/questions/1332406/better-way-to-right-align-text-in-html-table)*. E.g., [an answer addresses](https://stackoverflow.com/questions/1332406/better-way-to-right-align-text-in-an-html-table/1332421#1332421) the redundancy and compression before going on the wire. – Peter Mortensen Mar 12 '23 at 17:42

1 Answers1

7

Here you go; this should work :)

<style>
    #mytable {width:500px; margin:0 auto;}
    #mytable td {width:250px;}
    #mytable .left {text-align:right; background:#333;}
    #mytable .right {text-align:left; background:#666;}
</style>

<table id="mytable">
    <tr>
        <td class="left">1</td>
        <td class="right">2</td>
    </tr>   
</table>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Graeme Leighfield
  • 2,825
  • 3
  • 23
  • 38
  • 2
    As a stylistic point I would try to avoid having classes called left and right when you are using them to change alignment from left and right. Its just a recipe for confusion. :) – Chris Sep 02 '11 at 09:51
  • Well yes, but this is just for demonstration purposes :) – Graeme Leighfield Sep 02 '11 at 09:56
  • If your table has many rows and you want to save bandwidth, I'm wondering if there's a Javascript trick to do this. Instead of adding a class to every cell in the table. Anyway, just a thought. – PJ Brunet Jul 03 '12 at 22:27
  • Before considering the bandwidth, the actual size ***after compression*** (this is more or less automatic), both in absolute and relative terms, should be measured. With a lot of redundancy, the compression has the potential to be very efficient. – Peter Mortensen Mar 12 '23 at 10:42
  • Why `text-align:right;` for `.left`? (And `{text-align:left;` for `.right`?) – Peter Mortensen Mar 12 '23 at 10:51