All geek questions in one place

How to horizontally align columns in a table

I read that every column of the table can be styled using the <colgroup> and <col> . I tried the following, but style styling does not work. How can i fix this? When I do this using the width property, it works. Is there something wrong with the 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>

As a result, each column is aligned by default, ignoring the specification executed in colgroup .

table

I am using Chrome 17.

+4
source share
3 answers

If you don't need tables, here's how I do it without tables, 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 combine all the common styles with commas and just separate the text alignment)

+4
source

Although the support for colgroup and col seems patchy, I don’t think you should throw the baby away with bath water. 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>
+6
source

Do not use tables, use div. Obviously, the following should be divided 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>
0
source

Source: https://habr.com/ru/post/1397678/

More articles:


All Articles