I had a challenge today to create a table with a fixed header and foot. My first reaction was… oh no…. I pictured all sorts of hacks to make it work. I tried position: fixed, I tried extra divs, I tried this, I tried that, I even prayed to the Venus of Willendorf statue on my desk for a solution. When all else failed, I turned to the best resource for standards-based programming, my mother. Above the din of the Jerry Springer show on television, she yelled “What the hell do I know about tables?”
With Mom and my Venus drawing blanks, it was time to hit the message boards, the Standardista search, and Yahoo! Fortunately, Scott Swabey found this really cool approach: Fixed, Non-Scrolling Table Header and Footer by Brett Merkey.
Thinking Outside the Box
It’s pretty simple. Place the table in a div with overflow:auto. Then use absolute positioning to move the thead and tfoot outside the div. Voila, scrolling body with the thead and tfoot static.
Now, I can sleep happily knowing that the table can scroll, the venus has made me pregnant, and my mom was able to finish watching “I slept with my brother’s teacher’s husband!”
Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.
I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.
The AListApart path to enlightenment
Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.
With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.
Is divitis (the use of too many divs in a CSS-based layout) always bad?
I think you go through stages of CSS/XHTML maturity as you learn how to move away from tables to table-less design.
Our first instinct is to use divs the same way we used tables. It feels safe to load up the page with structural divs. That’s ok, especially if it is what helps you get from x to y.
However, you will get to the point where you realize the first CSS based sites you built had too many divs and you start looking for ways to place the styles on the unordered list or paragraph instead of wrapping those elements in a div.
I still see a valid reason to have divitis. If I am building a site that has to be flexible, modified by a large group of people AND uses server-side includes, I would rather make those include files self-contained units.
Sure, I could remove the container div on many of the includes, but I prefer to know that if an include is added to a page, the elements within it are not going to inherit the styles of the page’s container. Does that make sense?
Now, the goal of a medium to advanced CSS-based programmer is to find the elegant balance of essential divs, spans, ids and classes. Consider it a challenge.
I sometimes cringe when I see divitis. I sometimes chuckle. I even at times yell, “hey Brian check out this site’s chronic divitosis!” But let’s face it, this is an evolutionary process and those of us that have been doing it for a while need to remember what it was like on the first pass.
Disclaimer: don’t forget the horrible, horrible, horrible, horrible divitis and absolute-positionitis generated by some of the Office software and CMS systems. I once looked at a form that had hundreds of inputs and labels in individually positioned divs. That wasn’t the programmer’s fault. We just didn’t have time yet to build a new generator from scratch.
Alistapart, the web design web site that has launched a thousand ships, has a new face.
I began working on a firefox plugin to search the alistapart.com archives. I’ll renew this project and post it as soon as possible.