Ever since CSS hit the big time, the table has become increasingly rare. Semantic markup and CSS have replaced tables as layout tools. Tables are now relegated to their original role: displaying data stored in records (rows) and fields (columns).

However, their new status doesn't mean that they still can't be the targets of a designer's styles and a developer's hacks. A table typically presents more information than the rest of the page in a much smaller area, and much effort has been spent in attempting to make tables and other data visualizations as easy to interpret as possible.

The web designer's and developer's toolbox of the DOM, CSS...

continue reading ...

This is a journey from six years of conventional web design practice to the way we'll build sites in the future. Only it's not set in the future. You're soaking in it.

From the beginning, we've done whatever we had to do to make our sites work in every browser. In the world of non-standard HTML Design, we bolt every word, every image into place by manipulating table cells.

And we solve problems by replacing them with new ones. Netscape 4 ignores the CSS {margin: 0;} declaration? Extend the BODY tag with the Four Horsemen of Non-Validation: LEFTMARGIN, TOPMARGIN, MARGINWIDTH, MARGINHEIGHT. IE4 doesn't fully support the CSS border property? Fake it by...

continue reading ...

Apparently there remains some confusion after my Thursday-afternoon rumination on the potential use of tables, as opposed to pure CSS-based layouts. I'm going to share some of my experience to help clear this up.

Some of the comments on this site were discouraging, it sounds like the original piece was interpreted to advocate laziness. Some of the replies on other sites perpetuated this interpretation, so once more, tables should be considered only with the proper education to use them responsibly. This means attention to accessibility, as well as offloading all other presentational attributes to the CSS, leaving the simplest of layout-structural tables.

The point I was clear to make...

continue reading ...

The Web Standards Project's ( WaSP) Browser Upgrade Initiative ( BUI), has spurred many a designer to move towards more standards compliant web design, using CSS rather than tables for layout to save user bandwidth while enhancing underlying semantics, accessibility, and reach.

"Tables are dead..."

Several designers have taken Jeffrey Zeldman's lead in posting tutorials that have helped us get over the initial hump of table-less design. The first efforts have focused on creating two or more columns using CSS positioning instead of tables, thus allowing for a (complete) separation of structure from presentation. These broader techniques have been documented and...

continue reading ...

I took pretty aggressive notes during the panel that came after mine. Enjoy!

(You can tell I was paying more attention to the two people who were talking about things I hadn't heard much about before; less notes from their portions. Both were very good.)

Tantek Çelik

• Good CSS: standards • Bad CSS: abuses, misuses, amazing screwups (tables poorly mixed with css) • Ugly CSS: necessary: hacks, workarounds, wishes they never existed • CSS2.1 is now a W3C Candidate Recommendation: this is big news. CSS2? forget it. 2.1 incorporates changes, errata, adds the colour orange. • CSS2.1 reflects reality of current implementations • CSS validator updates, updates for validating...

continue reading ...

Andy Budd, a name some of you will recognize as a proponent of CSS-based design, has decided to take a long, hard objective look at the arguments made in favor of CSS.

I'm sure we've all found ourselves writing fairly complicated CSS to do something that would be trivial using tables. Take form styling for example. It's possible to lay out even very tricky forms using tables in just a few minutes. You can achieve similar results by floating elements with CSS, but it's a lot more involved

The rest of Andy's points are lucid, level-headed, and enforce something that you may or may not personally believe: CSS-based design under all circumstances, while a...

continue reading ...

Before the days of digital documents and OCR scanning, data entry was a tedious process involving much typing and squinting. You would be handed a huge printout, and asked to type its contents line by tiring line. If you became bored or distracted for even a moment, you could easily lose your place.

But you were clever. You got hold of a big old metal ruler, placed it on top of the printout, and moved it down each time you finished typing a row, to remind you where you were and what you had already typed.

One ruler to help us not get stuck

With a bit of JavaScript / DOM sorcery, we can provide our visitors with the same functionality for long data tables in HTML, by applying...

continue reading ...

And at last, the transcript of Monday's panel from SXSW 2004. Enjoy!

See, the way I see it, CSS is about font control. You can manipulate things like your leading, text color, and font face. That's about all it gets you.

Well… The old school method of thinking (old school being as late as last year for some, though I'm thinking more of 1998-era methods) was that CSS was useful for typography, and that's about it. I was guilty of that mindset myself for years. In fact, it was embarrassingly recent that I realized that hey, you know, this stuff can do a whole lot more.

I'm a graphic designer, image is important to me. I need things to look just right...

continue reading ...

It's been a slow year. With the Internet economy taking a bit of a tumble (perhaps you've read about it), new clients just haven't been calling like they were. So what's a hapless web designer with a family and a modest mortgage to do? Use the downtime to re-tool, re-learn, and switch over to Standards Compliant Design of course (wild cheers, whistles, deafening applause).

Done! Ummm, just one small problem. How do I convince my clients to go along with it? They may not be tech savvy, but they are well-versed in the mantra of designing for the least common denominator. Full access for everybody is the battle cry of the small business, and what's worse,...

continue reading ...

This article was prompted by the growing crop of CSS "tips and tricks" articles that have surfaced in the last two years. Typical of these are the three column design making use of left and right fixed columns hanging on their margins; and the use of @import, instead of JavaScript, to feed appropriate style sheets to differently enabled browsers.

These ideas are very cool and their authors should rightly be heaped with praise, but I can't help feeling we've been here before.

Remember when you figured out how to make a table of images display without the gap? Or how about when you worked out the browser's table rendering algorithm and started using...

continue reading ...

If you are looking for help making the transition to CSS layout (that's Cascading Style Sheets), you've come to the right place. I am cataloging here as many useful cross-browser CSS layout techniques as I can find, and some that I made up when I was bored last Thursday. All the examples on this site have been reduced to only their essential code, and you will find the source displayed on each page to hopefully make it quick and easy to understand the inner workings of the CSS. Feel free to steal all the code you find on this site, and consider linking back here on your site or in your source comments.

You will also find below links to various online CSS resources and tutorials, appropriate for both the novice and the seasoned CSS veteran....

continue reading ...

In the move to standards-based design and CSS for layout, some may have forgotten how to use tables properly to present data. And some of the finer points of making tables accessible might have eluded you entirely. If so, you should check out Bring on the tables, Roger Johansson's excellent overview of the topic.

Trackbacks:

ż֥󥿡ͥåˡ - ȤΥ˥塼Ǥ - November 11, 2004 07:41 AMȤΥ˥塼Ԥޤ ǥѹ򤷤ޤ...

ż֥󥿡ͥåˡ - ȤΥ˥塼Ǥ - November 11, 2004 07:42 AMȤΥ˥塼Ԥޤ ǥѹ򤷤ޤ...

Previous Entry: Blogging the Baby...

continue reading ...

As early as July of 1999 I was pontificating on email lists about the virtues of style sheets. Some things never change.

What has changed is how I think about CSS, and the underlying structure of (X)HTML to which it is applied. For example, I find that most pages on the web contain a menu of links in a navigation area. These are often marked up as a string of links, often in separate DIVs or paragraphs. Structurally, however, they are a list of links, and should be marked up as such.

Of course the reason that we don't mark them up in that way is that we don't want a bullet in front of every link in our navigation area. In a previous article I outlined several...

continue reading ...

Web developers have various methods for creating print friendly versions of their websites. By using a server side routine or print stylesheets, the print version may strip out images and navigation that lose their meaning on the printed page, and perhaps display the page in a single column using a different font with a different size.

But what happens when there is no printable version, or the printable version includes ads or other settings that don't suit you, the user? That's where user stylesheets come in. Armed with a little CSS knowledge and some web development tools, you can easily create your own print versions formatted exactly the way you want them....

continue reading ...

Drop shadows are cool, but adding them to elements of a web page can be a pain. You can fiddle with background images, tables, pure CSS solutions, Internet Explorer PNG limitations, or fixed single-use shadows tied to an image and a particular background.

The latest release of TypePad has a new popup (or flyout) interface element which presents the user with a set of options or an expanded view of an object when clicked on. The flyouts are similar to the location bubbles used in Google Maps. They have soft alpha-blended drop shadows that scale with the size of the box. The drop shadows are implemented in valid XHTML and CSS, with no CSS hacks or JavaScript. We...

continue reading ...

A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects. CSS2's current state requires a separate HTML element for each background image. In many cases, typical markup for common interface components has already provided several elements for our use.

One of those cases is tabbed navigation. It's time to take back control over the tabs which are continually growing in popularity as a primary means of site navigation. Now that CSS is widely supported, we can crank up the quality and appearance of the tabs on our sites. You're most likely aware that CSS can be used to tame a plain unordered list. Maybe you've even seen lists styled as tabs, looking something like this:...

continue reading ...

Back when video games were still fun (we're talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today's resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game.

As game complexity increased, techniques developed to manage the multitude of sprites while keeping game play flowing. One variation saw sprites being plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively...

continue reading ...

You've seen them before: links that say "click here for printer-friendly version" or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.

That means somebody (or a script) had to take the original document and convert it to a stripped-down version that's more suitable for print output. Maybe that somebody was even you.

Print style sheets to the rescue

One of the wonderful things about CSS is that it allows authors to create media-specific styles for a single document. We're pretty used to styling...

continue reading ...

Quite a high-threshold discussion happening on fellow Canadian Jeremy Shield's weblog.

Nothing really too new here, except for the observation that, with everyone's help of course, we've more or less made it impossible to argue that CSS design is inherently ugly.

…tableless design transforms the web into a library and less of a visual spectacle…

This is an interesting point, since, yeah actually - that's exactly what's happening. And it's good, remarkably good, for this to happen. Not only are table-less sites not boring, they're accessible. Keep in mind that all CSS Zen Garden examples validate to WAI AAA-level accessibility, although the individual designs can be more and less accessible depending on techniques used. Not only are they accessible, search engines love them. The Zen Garden is insanely high in Google thanks in part to well marked-up content. Not only are they search engine optimized, but they are, contrary to what you say, far less bandwidth hungry than tables. The average conversion of a site from tables to CSS-based chops the...

continue reading ...

When one decides to scrap the traditional hacks and kludges in creating an HTML page, and opts to instead format in CSS, the effects can be rather dramatic.

A certain Mr. Z. linked an interesting tool last night, the GetContentSize analysis utility. Stripping all extraneous CSS and Javascript, it will report the signal to noise ratio of your HTML.

mezzoblue, for example, sits at about 45% (which will inevitably change as new articles get posted and old ones removed), while Zeldman is a higher 60%. Both are CSS–only layouts that don't use table hacks. Let's look at a few examples of old–school HTML tabling to compare.

As tipped off in September, Microsoft...

continue reading ...