INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Table Formatting

"I need vertical text in my columns!" - a creative approach by EdwardMartinIII
Posted: 22 May 08 (Edited 22 May 08)

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
 

Back to HTML, XHTML & CSS FAQ Index
Back to HTML, XHTML & CSS Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close