After much time swearing over how to get a table-like display out of CSS, I was stumped. All I wanted was an definition with the label on the left hand side and the text on the right, wrapped into a column.
And let me tell you: given my limited knowledge of it, wrestling with CSS is not my idea of fun.
Finally after scouring Google for various terms, I did a search for “hanging indents” which led me to a good way to do it using dd dt and dl tags, and appropriate CSS for each. Eureka! (Yes, if I’d thought about it, these tags are for “definitions”, precisely what I was trying to do.)
Thank you, the good people at Max Design.
If you study the way I designed DVD Plaza, you’ll see I haven’t used a single table throughout the entire site – despite extensive use of table-like displays for the entire GUI layout, information/statistics, forum posts, etc. It’s all pure CSS and XHTML.
Admittedly that design was a good solid year in the making at the time – the biggest complication being that piece of crap known as Internet Explorer, had to come up with considerable hacks to make the site compatible with that (which I’ve since had to make IE6 specific, since IE7 now 90% handles my native CSS/XHTML).
Speaking of which, been nearly 3 years since PlazaGUI 6… if I had the time (which I don’t) I should be looking into updating it…
Nice tip, thanks 🙂
This is why i get so frustrated at CSS. That “works” but you have to fix the size of the left column. Thats ok for some things but not all. And, just to top things off, there is a nice Mac+IE hack in there. There are so many times where i cant get the proper CSS to work and i end up going back to tables. Wish we could just put HTML/CSS 6ft under already.
Chris, I’m not sure I’d have the patience for that. I’d also consider that where information genuinely is tabular, it’s okay to continue using a table… even if it’s just due to my own laziness 🙂
I’m with Daniel – tables aren’t evil, people! They’ve certainly been abused for layout purposes, but I sometimes see people going to extreme lengths to avoid a table when, really, a table would do the job just fine.
John is right
Don’t throw out with other rubbish code like and
There’s nothing wrong with a well coded table with proper semantic information
Looks like wordpress stripped out the html examples I gave in tmy last post: namely the FONT tag and people who still don’t use CSS to define styling eg: body bgcolor=”#ffffff” text=”#000000″ link=”#0000ff” vlink=”#800080″ alink=”#ff0000″