Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to horizontally align columns in a table

Tags:

html

css

I read that each column of a table can be styled using <colgroup> and <col>. I tried the following, but the style speficication is not seeming to work. How can I fix it? When I do this with width property, it works. Is there anything wrong with text-align property?

<html><body><table>
    <colgroup>
        <col style="text-align:right" />
        <col style="text-align:center" />
        <col style="text-align:left" />
    </colgroup>
    <tr>
        <td>aaaaaaaaaaa</td>
        <td>bbbbbbbbbbb</td>
        <td>ccccccccccc</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</table></body></html>

The result is that each colum is left aligned by default, ignoring the specification made in colgroup.

table

I am using Chrome 17.

like image 720
sawa Avatar asked Dec 27 '22 05:12

sawa


1 Answers

While support for colgroup and col seems to be spotty, I don't think one should throw out the baby with the bathwater. I think tables have their place, to display tabular data. Using divs to display tabular data borders on table-phobia in my opinion.

<html><body>

<style>
    .left   {text-align:left;}
    .center {text-align:center;}
    .right  {text-align:right;}
</style>

<table>
    <tr>
        <td class="left">aaaaaaaaaaa</td>
        <td class="center">bbbbbbbbbbb</td>
        <td class="right">ccccccccccc</td>
    </tr>
    <tr>
        <td class="left">aaa</td>
        <td class="center">bbb</td>
        <td class="right">ccc</td>
    </tr>
</table>

</body></html>
like image 129
Serhiy Avatar answered Jan 16 '23 18:01

Serhiy