title: How to horizontally align columns in a table
body: <p>I read that each column of a table can be styled using <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code>. I tried the following, but the style speficication is not seeming to work. How can I fix it?
  When I do this with <code>width</code> property, it works. Is there anything wrong with <code>text-align</code> property?</p>
  
  <pre><code>&lt;html&gt;&lt;body&gt;&lt;table&gt;
      &lt;colgroup&gt;
          &lt;col style="text-align:right" /&gt;
          &lt;col style="text-align:center" /&gt;
          &lt;col style="text-align:left" /&gt;
      &lt;/colgroup&gt;
      &lt;tr&gt;
          &lt;td&gt;aaaaaaaaaaa&lt;/td&gt;
          &lt;td&gt;bbbbbbbbbbb&lt;/td&gt;
          &lt;td&gt;ccccccccccc&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;aaa&lt;/td&gt;
          &lt;td&gt;bbb&lt;/td&gt;
          &lt;td&gt;ccc&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;&lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>The result is that each colum is left aligned by default, ignoring the specification made in <code>colgroup</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/NMCT3.png" alt="table"></p>
  
  <p>I am using Chrome 17.</p>