Log in / Register

Forum › How do I...?

How to use align inside a HTML col tag

luiz_borges
How can I use the align attribute in the col HTML tag?
Wasn't this supposed to work?
<table>
<colgroup>
<col align="right" />
<col align="center" />
</colgroup>
<tr>
<td>This is to the right</td>
<td>This is centered</td>
</tr>
</table>
StoneCypher
Well for one, that's not how colgroup works. However, prince also appears not to support the correct syntax, which is

<html>
  <head/>
  <body>

    <table>
      <thead>
        <colgroup style="background-color:#dfd;"></colgroup>
        <colgroup style="background-color:#ddf;"></colgroup>
      </thead>
      <tbody>
        <tr><td>Ohai</td><td>Ohai</td></tr>
        <tr><td>Ohai</td><td>Ohai</td></tr>
        <tr><td>Ohai</td><td>Ohai</td></tr>
      </tbody>
    </table>

  </body>
</html>


It's worth noting that the CSS specification also doesn't actually permit you to set text-align via col, because col is basically a dead element. You're only allowed to set border, background, width and visibility. Reference: http://www.w3.org/TR/CSS2/tables.html#columns.

The desirable way to screw with columns in tables through CSS is to create a selector that addresses the Nth column directly. It looks more clumsy up front, but it's more straightforward, more powerful, more flexible and less to fight in the long run, and it works everywhere.

Here's a table where the first column is left-aligned, the second through fourth are centered, and the rightmost is justified. As long as you don't need jagged colspans, this approach is everything you need; just remember that the last one you set leftmost sticks until you say otherwise.

<html>
  <head>
    <style type="text/css">

      table          { border-collapse: collapse; border: 2px solid black; }

      td             { text-align: right;  font-weight: bold; border: 1px solid gray; padding: 0.25em 0.5em; }
      td+td          { text-align: center; font-weight: normal; }
      td+td+td+td+td { text-align: justify; }

    </style>
  </head>
  <body>

    <table>
      <tr><td>Ohai lorem</td><td>Ohai ipsum</td><td>Ohai dolor</td><td>Ohai sit</td><td>Ohai amet</td></tr>
      <tr><td>Ohai</td><td>Ohai</td><td>Ohai</td><td>Ohai</td><td>Ohai</td></tr>
      <tr><td>Ohai</td><td>Ohai</td><td>Ohai</td><td>Ohai</td><td>Ohai</td></tr>
      <tr><td>Ohai</td><td>Ohai</td><td>Ohai</td><td>Ohai</td><td>Ohai</td></tr>
    </table>

  </body>
</html>

John Haugeland is http://fullof.bs/

StoneCypher
And by that "basically a dead tag" bit, I mean "they considered removing it for 4 but didn't; they considered removing it for 4.01 and said "it's deprecated and won't be in 5;" it's not in 5.

Do not expect to use colgroup. It's vestigial. AFAIK only Opera ever completely supported it.

John Haugeland is http://fullof.bs/

jim_albright
Thanks. You just gave me solution to problem before I really attacked it. Love knowing the answer without having to think too hard.

Jim Albright
Wycliffe Bible Translators

StoneCypher
No problem. It's nice to be able to help you, because you help so many other people, and that makes me feel like I'm pitching in.

I notice you appear to do this professionally. I've recently grabbed about a dozen books on book design, type design and layout - Tschichold, Hendel, Cullen, Samara, Merrell and so on - but I was wondering if you had any specific recommendations. I'm a programmer, not a book guy, and I get a lot of mileage out of textbooks.

John Haugeland is http://fullof.bs/

jim_albright
See books by Robin Williams and her website. Robin is a graphic designer. I will not publish work without a good graphic designer working with me.
The first book I read by Robin: The Non-Designers Design Book. This was required reading for anyone that I was helping publish their software documentation.
http://www.ratz.com/features.html
I just purchased The Non-Designer's Presentation Book
All of her books are good. If she recommends to read someone else I would go with that too.

Jim Albright
Wycliffe Bible Translators

StoneCypher
Those two are among the books I've already ordered, though I hadn't yet begun reading them. :) I'll bump them up to next in the list after the one I'm currently on. (I was actually so happy with the design book that I immediately kindle-gifted it to several friends.)

What I have so far:

  • Non-Designer's Design Book and Non-Designer's Presentation Book
  • Creative Workshop
  • Layout Essentials: 100 Design Principles for Using Grids
  • Color Design Workbook: A Real World Guide to Using Color in Graphic Design
  • Universal Principles of Design
  • About Face 3
  • The 22 Immutable Laws of Branding
  • Logo Design Love
  • The Brand Gap (revised)
  • White Space is Not Your Enemy
  • The Ten Commandments of Typography/Type Heresy: Breaking the Ten Commandments of Typography
  • A History of Graphic Design
  • Type: the Secret History of Letters
  • Book Design (Haslam)
  • Book Design and Production
  • Thinking with Type (2nd revised/expanded)
  • By its Cover: Modern American Book Cover Design
  • Layout Workbook: A Real-World Guide to Building Pages in Graphic Design
  • Making and Breaking the Grid: A Graphic Design Layout Workshop
  • 1,000 Type Treatments: From Script to Serif, Letterforms Used to Perfection
  • The New Typography (Weimar & Now: German Cultural Criticism S.)
  • On Book Design (Hendel)

What should I be acquiring beyond those?

John Haugeland is http://fullof.bs/

jim_albright
What you need now: A graphic artist to work with. :)

The first rule of graphic design is that you can break any rule. The problem is some people break a rule but don't know that they broke a rule.

You NEED a graphic artist to make choices. Lacking a graphic artist, you should find the best example of graphic design for your product and mimic it.

Jim Albright
Wycliffe Bible Translators

dauwhe
"The Elements of Typographic Style" by Robert Bringhurst. If I could only have one book on the subject, this would be it. Beautifully written, beautiful itself, and both wise and humane.

Dave