Redesigned the site's » Archive index page (from scratch). It contains links to all monthly archives posted since the site's launch (summer of 2000). Gateway to Memory Lane.
Been meaning to do that for some time now (years, actually). That page was the single-most mucked-up page on the entire site. The code was a rat's nest of deprecated standards, poor design choices and mark-up errors. I'm surprised it would render.
Began that page back when I knew very little about HTML and before I'd even heard of CSS. Over the years, the muck seemed to multiply as the page grew. It's not a highly trafficked page, so I didn't worry about it.
Tho at sundry times, I'd go in and try to manually clean up the code. That always proved an exercise in futility. Seemed like the more I tried, the worse things got. The only real solution was a complete makeover (a move which could be viewed as symbolic of the site's growth and development).
Now the page contains a third the mark-up it did before (10-KB vs 30) and the styling looks 3X cleaner, by making use of advanced techniques such as colgroup styling for better readability. Leaner, meaner and faster-loading.
••• today's entry continues here below •••
Used some of the table-styling tricks I learned watching the Dreamweaver video tutorial last month. All valid XHTML 1.0 Strict mark-up was used, too. Learned quite a bit of CSS mojo reconstituting that page, since I don't often use tables any more.
Tutorials are cool for introducing concepts, but applying those techniques to your own projects is where you really learn. At least, that's how it works for me.
"How come it's not working?" I must've asked a dozen times. Eventually you make every mistake that can possibly be made. [ I'm well on my way to hitting them all. =/ ] Working thru problems is never much fun, but highly instructive.
For example, the text-align attribute cannot be used to center a table, cuz text-align applies only to inline elements, while the table tag is a block level element.
To center a table you gotta use » margin-right:auto and margin-left:auto .. since the (heavily used) align attribute has been deprecated for the Strict DTD. Doubt I'll forget that anytime soon.
The good thing about being introduced to concepts and techniques (ala tutorials) is that .. you (at least) know they exist. And if you know they exist, you can search for the details .. even if you can't recall the specifics of how a particular technique is applied. Indeed, much could be said on the topic of » Introduction vs Application.
For more along these lines, here's a Google search preconfigured for the query » css table design styling
