I’m having second thoughts about writing this article, suddenly I feel under thousands of web developers about to shred me apart!
Aheem, like most web developers, I’m crazy, if not obsessed, about semantic mark-up and that’s why I still see the table’s great, if not, unique role.
Web designers do not run away from tables, but rather stopped using them design-wise.
CSS has been here for a very long time, but it only became popular when CSS 2.0 was out, until that point, tables were used to arrange most of the HTML elements (i.e. lists, images, text etc), which was obviously semantically wrong.
Once CSS 2.0 was out and we have gotten a much better control, we’ve been able to separate a web page’s design from its tabular data.
I’ve seen great pure CSS solutions to display tabular data, but personally, I wouldn’t make extra effort to build something that’s not fixing anything, tables are still meant to be used for stable data display.
Below, you have an example of database item listing, using tables, something I wouldn’t bother reinventing as a pure CSS solution:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Database item listing - Dev Ingredients</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div id="container"> <table id="fileList" cellspacing="0"> <thead> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName"><a href="">Name</a></td> <td class="fileLastM"><a href="">Last modified</a></td> <td class="fileSize"><a href="">Size</a></td> <td class="fileState"><a href="">State</a></td> </tr> </thead> <tfoot> <tr> <td colspan="5"><a href="">« Prev</a> <a class="activePage" href="">1</a> <a class="inactivePage" href="">2</a> <a class="inactivePage" href="">3</a> <a class="inactivePage" href="">4</a> <a class="inactivePage" href="">5</a> ... <a class="inactivePage" href="">112</a> <a href="">Next »</a></td> </tr> </tfoot> <tbody> <tr class="parentBG"> <td></td> <td colspan="0" class="parentF"><a href="">Parent folder</a></td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">Intentionally written long file name for testing purposes (code 0123456789)</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">06:30 May 10</td> <td class="fileSize">1078 KB</td> <td class="fileState">Private</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 123</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">1.20 MB</td> <td class="fileState">Public</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 456</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">2.14 MB</td> <td class="fileState">Public</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 789</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">0.98 MB</td> <td class="fileState">Public</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 123</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">5.15 MB</td> <td class="fileState">Public</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 456</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">5.33 GB</td> <td class="fileState">Public</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 789</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">1.74 MB</td> <td class="fileState">Public</td> </tr> <tr> <td class="itemCheck"><input type="checkbox" name="filecheck"/></td> <td class="fileName note"><a href="">listed item title 123</a><a class="fURL" href="">(URL)</a></td> <td class="fileLastM">04:13 May 10</td> <td class="fileSize">215 KB</td> <td class="fileState">Public</td> </tr> </tbody> </table> </div> </body> </html> |
The CSS is included in the download files.
The above is a hybrid table, with one fluid column, a type of table I used in one of my projects that’s still under development and I can’t show you a live example unfortunately. But I’ve made a ‘Preview’ option available.
Conclusion, tables still have a great role in our web pages today.
nice table, i have watched it, it is working
Your point about tables still should be used for stable data display is true. A lot of desigers never touch tables because they are seen so 90’s. But they obviously are still very useful to use.