It is widely understood and accepted in the upper echelons of web design that tables are not to be used for layout purposes.  The only time tables are “allowed” is for exactly what its name implies:  tabular data, such a train schedule or a table of figures.  For anything else, tables are semantically incorrect.  There are several good reasons for this (and a few priggish ones).  The internet is rife with explanations and arguments both ways; I won’t repeat them here, but I will provide one link just to whet your appetite.  There are many more, but this one is at least entertaining.

What do we do instead, you ask?  We use div’s and CSS, for the most part.  In a very simple example, this:

     < table >
          < tr >
              < td width="40%" >
                  stuff
              < /td >
              < td width="60%" >
                  more stuff
              < /td >
          < /tr >
      < /table >

Becomes this:

      < div id="left" >

          stuff

      < /div >

      < div id="right" >

          more stuff

      < /div >

(spaces added for formatting purposes)

The div’s are supported by CSS that configures their positions and sizes:

#left {width: 40%; float: left;}

#right {width: 60%; float: right;}

There’s actually more to it than that; gutters, padding, margins and the like have to be dealt with as well, but you get the idea. If you add other div’s, things can get even more complicated. But, designing in such a way allows for a lot of great tricks and advantages over stodgy old tables.

So, I always try very hard to stick to that convention: CSS over tables. However, on one recent project I ran into one of the big problems with this approach. It turns out that, because the div’s in the example above are not tied or linked together in any way, their heights are also independent. This means that, if the content is longer in the “left” div, its height will be greater than the “right” div. This causes a lot of problems in layouts with background colors or images; users want clean edges, not a jaggy bottom edge that changes every time the content does. We want this:

Not this:

Tables don’t suffer this problem, because the elements are all tied together by the table’s framework.  In tables, all of the elements are spatially related.

There are a few different fixes for this problem, all of varying degrees of complexity and success.  There are both pure CSS fixes and Javascript fixes.  In my experience, though, these can get very hairy or fail altogether with nested div’s or any other complex design choices…they’re very finicky.  Everything has to be just so.

I spent a good deal of time trying to get these fixes to work on the project in question.  I added javascript, made jQuery calls, dinked with the CSS and on and on.  Nothing seemed to work like it should.  I finally had to take a step back and ask myself what my options were; how was I going to fix this problem so that I could move on with the rest of the site?  After all, this was a relatively silly problem; it was a dime holding up a dollar, as my boss is fond of saying.  That’s when it dawned on me…I knew how to fix the problem.  Screw semantics, let’s use a table.  I scrapped my containing div’s and CSS floats and all of that, wrapped the content in a simple two-column table, and bam!  Equal columns, just like that.

Now the howling will begin.  There is no doubt a non-table solution to my problem; I just need to spend the time to find it.  But, like many grunts in the trenches, I really don’t have that time–I need to move on and finish the project.  If that’s selling out, then so be it.  Am I happy about it?  No way.  Do I accept it?  You bet.

So, there you go.  Next time around, I will still try my best to use the CSS approach.  In fact, this is the only time it’s ever stumped me.  I’m not willing to throw the baby out with the bath water and ignore good practices, but I am willing to make informed compromises.  That’s one of the things the working man has to do:  know when to let it go.

I’ll have to give a more thorough review later (or not), but I’m going to go on record right now as saying that the lack of a usable copy-and-paste feature in the Droid’s email application (and presumably elsewhere) is completely unacceptable.  It simply boggles my mind that I can’t open an email, read it, and copy some important bit out of it to forward on or whatever.  There is copy/paste functionality in editable text boxes, but copying from an existing email is virtually impossible. You can do a few tricks like hold the shift key on the keyboard, then swipe the screen to select, but in my experience that doesn’t work very well at all; I was able to select at most a line or so and no more.  Most of the time I’d only get 2 or 3 characters.

I’m not completely up on my Android versions, so I don’t know if this is an Android problem or the fact that the Droid is behind on software versions.  I know that iPhone users suffered this same malady for some time; one would like to think that Android developers have learned from Apple’s mistake.  Either way, whoever is responsible needs to get on this ASAP.

I didn’t feel much like working on anything important today, it being a holiday and all, but my conscience got the better of me.  I settled in to get some stuff done on a couple of website projects.  After a while, though, that too seemed burdensome and I abandoned the effort.  Finally, I decided to do some…um…spring cleaning in my office.

While this was in progress, I screwed up my courage and attacked some boxes of stuff from my high school and college days.  A lot of stuff that had been stored for just-in-casies turned out to be not so important any more…do I really need every single piece of admissions correspondence from my university any more?  Some of it hurt the pack rat in me, but I just had to let it go and turn a new leaf in storage.

But, my loss is your gain!  Because of this warehouse overstock, you have a once-in-a-lifetime chance to pick up some sweet deals in cutting-edge software and PC gaming.

We’ll begin with that most important kind of software, the OS.  Well, not really an OS, because this puppy was just a GUI for MS-DOS.  Yes, that’s right folks, we’ve got the very thing you all crave:  Windows 3.0 on seven hip, modern 3.5″ 720k floppies:

Who could ask for more?  What’s that?  YOU could?  Well, OK, for a limited time, we’ll also throw in a sweet disk containing both Microsoft Mouse drivers AND PC Paintbrush for Windows:

Now that’s a deal!

OK, you say, that’s great, but I need some productivity apps.  No problem, we’ve got you covered!  What modern-day businessman doesn’t use a spreadsheet to crunch his budgets and perform his sales analyses?  You, too, can get in the game with this top-notch copy of Quattro Student Edition on the tried-and-true 5-1/4″ floppies:

And if that wasn’t enough, we’re going to enable you to develop your own high-tech software apps with a still-smoking copy of MS QuickBASIC, also on those reliable 5.25’s:

All work and no play makes folks dull, they say, so we’re offering some awesome gaming options, too.  You can be the first on the block to pwn the baddies with these hot titles:

Spellcasting 101: Sorcerers Get All the Girls, v1.0

Codename: ICEMAN

The Terminator (sweet 5.25″ action!)

Die Hard (this one also runs on Tandy 1000–what a deal!)

Shooting Gallery (comes with a FREE disk of Windows icons–incredible!)

Obviously, house cleaning was overdue.  This doesn’t even scratch the surface of things I threw out…a Borland Learning C++ boxed set (never did work my way through that), Derive student edition (if you’ve been through calculus, you have an idea of what Derive is meant to accomplish), innumerable other shareware titles and school projects and microprocessor programming utilities and etc.

For you young whipper-snappers who are wondering what “Mr. Disk” is or was, you’ll have to step into your worst horror: a world without internet.  Back in the day (waaaaay back in the 80’s or so), the internet as we know it today didn’t exist, and there sure wasn’t any home connection to what did exist.  There were BBS’s (private servers that you dialed into with your modem-*gasp*), some of which might house shareware software downloads, and depending on your time frame, there were dialup services like Compuserve or Prodigy.  In my neck of the woods, though, BBS’s meant long distance calls (if I even knew the number to start with), and the services cost money to join, so both were strictly out of the question for the young computer enthusiast.  So, being unable to afford commercial packages, a lot of my software came from mail-order shareware houses like Mr. Disk and amateur radio “hamfests.”  Shareware was kind of a precursor to today’s “free as in beer” software…not really, but sort of.  They were free-except-for-the-disk, or free-for-a-postcard, or whatever.  I bought a graphing program for $5 or so that got me an ‘A’ on a high school report (everyone else used pencils and graph paper, or didn’t bother).  I got some cool games like the above “Shooting Gallery” for dirt cheap.  There were also antenna tuning calculators, terminal programs, personal finance packages, and on and on.  They all fit on a floppy or two.  Those were good times.

Finally, we’ll show you two pieces of software that I simply couldn’t part with for sentimental reasons.  These will remain in the vault except for occasional wistful sighs and aching memories of days past:

Interplay’s “The Lord of the Rings, Vol. I”

Introduction to Radio Frequency Design (book companion disk)

I started playing LoTR around the time I went to college, on a 386sx-16 I bought because the university strongly recommended that engineering students have PC’s.  The original black and white EGA monitor died early on (no, kids, that’s not a typo…EGA, “Enhanced Graphics Adapter,” the awesome improvement over the Color Graphics Adapter), and I can remember the day that my brand new color VGA showed up at school (I remember that I paid a whopping $149 for it and worried profusely that I might run short of money that semester).  The first thing I did after firing it up was to load LoTR to see what it looked like in color.  It…was…amazing.  It was also interesting to see WordPerfect’s trademark blue screen for the first time.  Um…WordPerfect was a word processor, children, like Word except all text based.  No WYSIWYG, no mouse…just text on the screen and control codes that you could use to format the page.  It was the most popular word processor for years.  How cool is that?

By the way, you didn’t just go down to Walmart or Best Buy to get your PC in those days.  There were PC shops about, but in our area you were a lot better off to buy from mail-order, just like the shareware vendors.  There was a humongous, thick magazine called “Computer Shopper” that I drooled over on a regular basis.  The well-heeled could order from the slick color ad pages like Zeos (man, did I ever want want of those…but never got one), but less lucky lads like me were relegated to the black & white paper pages from the smaller retailers.  My SX machine was from a computer store in Louisville called Copper Computers, and I took a huge chance dropping my summer wages on it from an unknown company, sight-unseen.  But that was how it was done in those days.  386sx at 16 MHz (that’s MEGAhertz), 40MB HD (that’s MEGAbytes), and 1MB (that’s…you get he picture) of RAM.  Mmm-hmmm.  How proud I was.

It’s awfully fun to think about how far things have come just in my short lifetime.  I can still remember some things vividly and nostalgia runs amok.  Someday we’ll talk about gopher, and archie, and even the golden days of telnet.  People used to get mad when noobs referred to the World Wide Web as “the internet,” because the internet was so much more than that.  Computers used to be more than just a browser host.  I even remember using Lynx (a text-based web browser) to download a centerfold just to prove to someone that it could be done (legally, I might add).  What an amazing thing that new-fangled internet was.  Those were the days, and they will never come again.