“OMG! Webmonkey told me to design with tables!”

No, I’m not talking about using tables for layout. Use tables how they were meant to be used: for data.

When I wrote about Firefox browser stats yesterday, I struggled to make the data look nice. Too bad I hadn’t found this gallery of table designs.

Even the minimalist styles that start off the ten designs are nice compared to an un-styled table. The list is worth reading alone for the bit on the little-used colgroup tag.

At the turn of the century Web designers were quick to adopt CSS for layout. Table-based designs, which had been the standard means of layout, were poo-pooed. This was a positive step for web design, but in this religious battle, the table tag became collateral damage.

A whole generation of designers avoid tables completely, but they can be useful for showing data. And now, hopefully they can be pretty, too.

See also:

• Resources for Designing with CSS
• Tutorial: Update Your Old Site to Use Web Standards
• Mulders Stylesheets Tutorial

Re-ordering my Netflix queue to move one embarrassing movie below another is easy. The code that let the developers at the movie rental company implement that feature is difficult. At least, it used to be.

Drag-and-drop is a fancy feature touted by many JavaScript frameworks. With extremely little code, page elements can be made draggable. Unfortunately, tables require a little more work.

Luckily, someone else has done the work for us, which they describe in dragging and dropping rows in JavaScript. There’s a lot of code in there, but you can find the nitty gritty by scrolling down to the “putting it all together” section.

To make a table’s rows draggable, just create an instance of their TableDnD class, and pass it a reference to your table. Then, if you want to have your code respond to a dragged row, you’ll need to implement your own onDrop function.

If you’re using the popular JQuery framework, there’s a table drag-and-drop plugin that’s even easier to use.

See also:

• Is JavaScript Part of the ‘Real’ Web or Not?
• New JavaScript Library Creates Amazing Animations
• jQuery Javascript Library Turns One