4

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
sawa
  • 165,429
  • 45
  • 277
  • 381
  • 2
    using div's would make things simpler.. if you dont mind doing it with div's then check this link -- http://stackoverflow.com/questions/9349109/how-to-make-horizontal-division-using-html-div-tag-and-css/9349180#9349180 – Vivek Chandra Feb 21 '12 at 22:00
  • I agree. In over 15 years I've rarely seen COLGROUP used. I don't even think Safari supports it. Use DIVs and class names, at least you can find help for that! – Diodeus - James MacFarlane Feb 21 '12 at 22:05
  • See http://stackoverflow.com/questions/1238115/using-text-align-center-in-colgroup and http://stackoverflow.com/questions/1119106/why-is-styling-table-columns-not-allowed. – Zeta Feb 21 '12 at 22:06
  • http://stackoverflow.com/questions/6318185/span-attribute-on-colgroup-and-col – Jawad Feb 21 '12 at 22:53

3 Answers3

6

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>
Serhiy
  • 2,505
  • 3
  • 33
  • 49
  • So, if a table has a thousand rows, the command class="..." should be repeated 3,000 times? Looks pretty stupid, in my opinion... – Rodrigo Sep 09 '15 at 20:30
  • @Rodrigo Rendering a table of 3,000 rows without pagination is pretty lazy and stupid, in my opinion. One could also utilize the :nth-child() CSS selector to avoid repeating the class attribute. However IE8 and below will not support it, so one should consider their target audience before utilizing such things. – Serhiy Sep 11 '15 at 04:47
  • In a good project of pagination, we should give the users the option to choose the size of the page, and if some table has 3,000 rows, he/she might want to see them all at once, so it must be possible. Also, in the 21st century most computers can do that. But it's better to use something more efficient (such as nth-child -- although I'm not sure if it's supported in most browsers today). – Rodrigo Sep 11 '15 at 04:57
4

If not in need of tables, here´s how I´d do it tableless, just in case:

HTML:

<div id="container">
  <div class="left">left aligned text</div>
  <div class="center">center aligned text</div>
  <div class="right">right aligned text</div>
</div>

CSS:

.container {}

.left {
width:100px;
float:left;
text-align:left;
}
.center {
width:100px;
float:left;
text-align:center;
}
.right {
width:100px;
float:left;
text-align:right;
}

(and you could just unify all the common styles with commas and just separate the text-alignment)

Yisela
  • 6,909
  • 5
  • 28
  • 51
0

Don't use tables, use divs. Obviously the following should be seperated out into classes and such, but it works.

<html><body>
    <div style="display: table">
        <div style="display: table-row">
            <div style="display: table-cell;">aaaaaaaaaaa</div>
            <div style="display: table-cell;">bbbbbbbbbbb</div>
            <div style="display: table-cell;">ccccccccccc</div>
        </div>
        <div style="display: table-row">
            <div style="display: table-cell; text-align:right;">aaa</div>
            <div style="display: table-cell; text-align:center;">bbb</div>
            <div style="display: table-cell; text-align:left;">ccc</div>
        </div>
    </div>
</body></html>
Caimen
  • 2,623
  • 2
  • 26
  • 43
  • If I need to specify the style for each cell using `
    `, then I can do the same within `` of a ``.
     – sawa Feb 21 '12 at 22:13
  • This is exactly why I ditched the table, I was always expecting it to do things for me and sometimes it does, sometimes it doesn't. Now I don't expect anything from it because I just don't see a reason to use it anymore. Every div will need a class which is a pain if you are writing html by hand, but if you are like me, most of your tables are dynamically made anyways. The feature you are looking for, as far as I know has not been addressed by the standards community. Width "works" because in order to maintain being a table the following columns must conform to the headers. – Caimen Feb 21 '12 at 22:23
  • even if it´s dynamic, aren´t classes just... well, the whole point of css? I´d write the whole thing in divs. – Yisela Feb 21 '12 at 22:35
  • There is :first-child selector, but that won't help you for the other columns. The only other option is to let javascript set the classes for you. Javascript is more than capable of figuring this out. However there is no selector that is going to automatically do this for you unfortunately and the only thing JS might save is if you you are worried about the bandwidth of all the extra classes. And no the point of classes is not for divs to automatically derive some understanding of what they are based on purely the position of where they are in a set of elements, although it would be nice. – Caimen Feb 21 '12 at 22:45
  • 1
    @Caimen, Your assertion that :first-child selector is the only selector available is not true anymore. There are others such as :last-child, :nth-child(2) :nth-last-child(2), :nth-of-type(2) and :nth-last-of-type(2) selectors. – jcairney Apr 19 '17 at 19:48
  • @jcairney yes, but keep in mind that this question was an answered in 2012 when in many cases, many parts of css3 were not widely available or the module specs in some cases were still being written. – Caimen Apr 19 '17 at 20:17