David Beroff (d4b) wrote,
David Beroff

Paring down table code

Well, it's not perfect, but after banging my head against the wall for hours, I'm ok with the end result. While I still haven't been able to completely avoid forcing hard-coded widths, at least I've been able to clean up my code and pare down my use of tables. I've been taking my lead from the article, Why tables for layout is stupid: Problems defined, solutions offered, which suggests a compromise of removing most but not all table code. It's certainly better than tons of special-case/MSIE-workaround code just to keep the purist goal of only using tables for tabular data. As I said earlier, it would've been nice if browsers could've retained their original table-managing abilities to play nice with CSS; ah, well.

One neat idea that I learned from the Seybold article is to place the borders on two adjacent edges of the entire table, and then put the borders on the opposite two edges of each of the individual cells:

So now, the end result for my recent learning efforts. Like I said, not absolutely perfect, but I'm rolling ahead with it. Here's the before-and-after screenshot:

Certainly the HTML is cleaner and easier to follow, IMHO. Here's the original code, with four nested tables:

And this is what it looks like now, cleaned up, with just one table for the video-plus-form:

(Yeah, yeah; I know. I should show the text as text here, except I'm too lazy to prettify everything the way Notepad++ does, so I just grabbed that directly.)
Tags: fec book, fsycs, webdev
  • Post a new comment


    default userpic

    Your reply will be screened

    Your IP address will be recorded 

    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.