Using Text-Align Center in Colgroup

using text-align center in colgroup

Only a limited set of CSS properties applies to columns, and text-align isn't one of them.

See "The mystery of why only four properties apply to table columns" for a description of why this is the case.

In your simple example, the easiest way to fix it would be to add these rules:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

That would center all table cells, except the first column. This doesn't work in IE6, but in IE6 the text-align does actually (wrongly) work on the column. I don't know if IE6 supports all properties, or just a larger subset.

Oh, and your HTML is invalid. <thead> misses a <tr>.

Aligning text in table column group in HTML5

Maybe I should've been more clear on this in the comments, but no, you can't text-align it using col. It doesn't work by spec.

What you could do instead, is use CSS to align the different children of each tr element, as that is somewhat the same thing.

<style>    tr td:nth-child(-n+2) {        text-align: center;    }</style><table>  <colgroup>    <col span="2" style="background-color:red; text-align: center;">    <col style="background-color:yellow">  </colgroup>  <thead>    <tr>      <td>ISBN</td>      <td>Title</td>      <td style="text-align: center;">Price - longer</td>    </tr>  </thead>  <tbody>    <tr>      <td>3476896</td>      <td>My first HTML - long title</td>      <td style="text-align: center;">$53</td>    </tr>    <tr>      <td>5869207</td>      <td>My first CSS</td>      <td style="text-align: center;">$49</td>    </tr>  </tbody></table>

Why text-align doesn't work in colgroup?

Answered here already. Basically text-align doesn't apply to columns.

Is text-align not possible for col tag? col represents the group of column in colgroup

Use nth-child instead. As the question in the comment mentions, text-align does not apply to col or colgroup tag.

http://jsfiddle.net/f2ue4/1/

td:nth-child(2),
th:nth-child(2) {
    text-align: right;
}

Table: align text by column

You can use the :nth-child(n) CSS selector. This of course becomes a little more difficult if you were to have a cell with a colspan of more than one, but fortunately you don't.

#tb td:nth-child(1) // column 1
#tb td:nth-child(2) // column 2
#tb td:nth-child(3) // column 3

#tb {
    width: 100%;
  border-spacing: 0px;
}

#tb th,
#tb td {
  padding: 12px 0;
  line-height: 0.9;
}

#tb th {
  border-bottom: 1px solid #000;
  text-align: left;
}

#tb td {
  border-bottom: 1px solid #ddd;
}

#tb .tb-last-row {
    border-bottom: none;
}

#tb td:nth-child(1) {
  text-align: center;
}

#tb td:nth-child(2) {
  text-align: center;
}

#tb td:nth-child(3) {
  text-align: center;
}

<!DOCTYPE html>
<html>
<body>

<table id="tb">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td class="tb-last-row">Jill</td>
    <td class="tb-last-row">Smith</td>
    <td class="tb-last-row">50</td>
  </tr>
</table>

</body>
</html>

Is html COL align deprecated?

Yes, the align attribute of <col /> no longer appears in HTML5. Says the spec!

Also, it's worth noting that you can't achieve a similar result using CSS on the <col /> tag. The style attribute (or induced style from id, class, etc.) only takes into account properties that sensibly apply to the column itself. That is, while each <td /> can contain text content and thus can have attributes like text-align set, the <col /> element does not contain text and thus none of the text-level styles apply. (Block-level stuff like background-color still works.)

However, in basic cases not involving colspan or rowspan, you can select blocks of <td />s (and thus "columns" in a sense) by using the CSS pseudo-class :nth-of-type. E.g. to center the third column of the table with class c3 use

table.c3 td:nth-of-type(3) { text-align: center; }

Edit by OP:

From The HTML Standard:

15 Obsolete features

15.2 Non-conforming features

The following attributes are obsolete (though the elements are still part of the language), and must not be used by authors:
...

align on col elements

...

Use CSS instead.

The WHATWG wiki gives some recommended alternatives for various obsolete presentational attributes:

Attribute              CSS equivalent
=====================  =====================================
align on col elements  'text-align' on the appropriate td/th

How to center text for one of the column

While in a perfect world, your solution would work, the CSS cascade doesn't quite work that way. But feat not, because CSS selectors are powerful. As I see it, your best option is to use :nth-child or :nth-of-type.

Or, you could add a classname to your cells (either manually or preferably programmatically), but that's just taking the easy way out ;-)

How do I apply border style attributes to a colgroup tag?

You need to set border-collapse to collapse on the table.

<table style='border-collapse: collapse; font-size:18px; margin:auto; text-align:center; font-family:sans-serif; border-spacing:1.875em;'>
  <caption style='text-align:left;'>Wait...</caption>
  <colgroup>
    <col span='1' style='border:solid firebrick;'>
  </colgroup>
  <tr>
    <td style='color:blue;'>They chose:</td>
    <td style='color:blue;'>They chose:</td>
  </tr>
  <tr>
    <th>Option 1</th>
    <th>Option 2</th>
  </tr>
  <tr>
    <td>You: $4</td>
    <td>You: $5</td>
  </tr>
  <tr>
    <td>Them: $5</td>
    <td>Them: $4</td>
  </tr>
</table>

Using Text-Align Center in Colgroup