All posts tagged ‘tables’

File Under: Visual Design, Web Basics
Aug
15
2008

Setting The Tables With CSS

By

Styled tableEvery time I create an HTML table, I struggle with its styling. It’s not easy to make a table look good.

“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:

Tags: , ,
File Under: Software & Tools
Jul
14
2008

Drag And Drop Your Tables Like Netflix

By

Dragging around embarrassing movies in my Netflix queue

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.

Drag and drop row one moved to slot threeLuckily, 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:

Tags: , ,