Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"I need vertical text in my columns!" - a creative approach

Table Formatting

"I need vertical text in my columns!" - a creative approach

by  EdwardMartinIII  Posted    (Edited  )
By the time you've gotten this far, you've got yourself a table, but it's really dense with data and your column headers are huge and, well, it's just unwieldy working under these slavish "horizontal text" conditions.

Naturally, you're thinking that being able to switch your column headers vertical, to rotate the whole shebang, is the best idea.

Well... maybe.

Sure, you've seen vertically rotated columns, but remember -- you had to crane your neck a bit to read it. Humans don't read sideways very well. We just don't.

We've grown used to seeing vertically rotated text on columns because books (also historically limited on space) use them, too.

Now's a chance to fannybang the dominant turn-your-head paradigm, by taking a hard look at how you format your information, considering that it will be read by human beings who read horizontally (well, at least the ones I tend to code for).

Consider formatting your information to take advantage of the fact that people read horizontally.

Also, remember that you can use other ways of grouping your data, such as color. People follow color very well (except those people that are colorblind, in which case they follow shades just fine, most of the time).

With that in mind, here's a listing, showing a table of data, for which all data is relatively complicated.

1. Color is used for grouping.

2. If converted to grayscale, the table is still completely readable.

3. Many more elements can be added to either side of the table without appreciably increasing its size.

4. You get to find out what Uhura's first name is.

Code: 
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD  X HTML 1.0 Transitional//EN"
     "DTD/ X html1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="te X t/html; charset=utf-8"></meta>
    <title>Sample Table Squeezer</title>
  </head>
  <body>
    <p>Behold a table of valuable data:</p>
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="10" bgcolor="#bb6611">Christine Chapel</td>
      </tr>
      <tr>
        <td colspan="9" bgcolor="#bb9911">Pavel Andreievich Checkov</td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="8" bgcolor="#bbcc11">James Tiberius Kirk</td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="7" bgcolor="#bbff11">Leonard H. McCoy</td>
        <td bgcolor="#bbcc11"></td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="6" bgcolor="#ee2211">Janice Rand</td>
        <td bgcolor="#bbff11"></td>
        <td bgcolor="#bbcc11"></td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="5" bgcolor="#ee5511">Montgomery Scott</td>
        <td bgcolor="#ee2211"></td>
        <td bgcolor="#bbff11"></td>
        <td bgcolor="#bbcc11"></td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="4" bgcolor="#ee8811">Spock</td>
        <td bgcolor="#ee5511"></td>
        <td bgcolor="#ee2211"></td>
        <td bgcolor="#bbff11"></td>
        <td bgcolor="#bbcc11"></td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="3" bgcolor="#eebb11">Hikaru Sulu</td>
        <td bgcolor="#ee8811"></td>
        <td bgcolor="#ee5511"></td>
        <td bgcolor="#ee2211"></td>
        <td bgcolor="#bbff11"></td>
        <td bgcolor="#bbcc11"></td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td colspan="2" bgcolor="#eeee11">Nyota Uhuru</td>
        <td bgcolor="#eebb11"></td>
        <td bgcolor="#ee8811"></td>
        <td bgcolor="#ee5511"></td>
        <td bgcolor="#ee2211"></td>
        <td bgcolor="#bbff11"></td>
        <td bgcolor="#bbcc11"></td>
        <td bgcolor="#bb9911"></td>
        <td bgcolor="#bb6611"></td>
      </tr>
      <tr>
        <td>Known to wear skirts</td>
        <td bgcolor="#eeee11"> X </td>
        <td bgcolor="#eebb11"> -- </td>
        <td bgcolor="#ee8811"> -- </td>
        <td bgcolor="#ee5511"> X </td>
        <td bgcolor="#ee2211"> X </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> -- </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> X </td>
      </tr>
      <tr>
        <td>Known to chase skirts</td>
        <td bgcolor="#eeee11"> -- </td>
        <td bgcolor="#eebb11"> -- </td>
        <td bgcolor="#ee8811"> -- </td>
        <td bgcolor="#ee5511"> X </td>
        <td bgcolor="#ee2211"> -- </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> X </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> -- </td>
      </tr>
      <tr>
        <td>Known to chase after folks with a sword/dagger</td>
        <td bgcolor="#eeee11"> -- </td>
        <td bgcolor="#eebb11"> X </td>
        <td bgcolor="#ee8811"> -- </td>
        <td bgcolor="#ee5511"> X </td>
        <td bgcolor="#ee2211"> -- </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> -- </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> -- </td>
      </tr>
      <tr>
        <td>Known to fan dance</td>
        <td bgcolor="#eeee11"> X </td>
        <td bgcolor="#eebb11"> -- </td>
        <td bgcolor="#ee8811"> -- </td>
        <td bgcolor="#ee5511"> -- </td>
        <td bgcolor="#ee2211"> -- </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> -- </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> -- </td>
      </tr>
      <tr>
        <td>Occasionally too wide</td>
        <td bgcolor="#eeee11"> -- </td>
        <td bgcolor="#eebb11"> -- </td>
        <td bgcolor="#ee8811"> -- </td>
        <td bgcolor="#ee5511"> X </td>
        <td bgcolor="#ee2211"> -- </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> X </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> -- </td>
      </tr>
      <tr>
        <td>Known to have big hair</td>
        <td bgcolor="#eeee11"> X </td>
        <td bgcolor="#eebb11"> -- </td>
        <td bgcolor="#ee8811"> X </td>
        <td bgcolor="#ee5511"> -- </td>
        <td bgcolor="#ee2211"> X </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> -- </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> X </td>
      </tr>
      <tr>
        <td>Known to have touched a whale</td>
        <td bgcolor="#eeee11"> -- </td>
        <td bgcolor="#eebb11"> -- </td>
        <td bgcolor="#ee8811"> X </td>
        <td bgcolor="#ee5511"> -- </td>
        <td bgcolor="#ee2211"> -- </td>
        <td bgcolor="#bbff11"> -- </td>
        <td bgcolor="#bbcc11"> -- </td>
        <td bgcolor="#bb9911"> -- </td>
        <td bgcolor="#bb6611"> -- </td>
      </tr>
    </table>
  </body>
</html>

In short, think about your data, and how you display it, and how you might display it, and you can usually come up with very clever solutions.

Cheers,

[monkey] Edward [monkey]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top