• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint


Reducing Fat Table Code

Q1:How can I keep my tables streamlined so that they load quickly and orderly?
A1: Tables can be notoriously fat—filled with extraneous code that is ultimately unnecessary for the success of that table. Part of this problem emanates from WYSIWYG software, as these applications use tables to lay out every piece of information on a page! Some of this comes from coders who are after precision but might not readily see a more simple approach. Here are some pointers on getting your tables lean and mean:
  • Begin with the vertical rather than horizontal arrangement. It's amazing how this orientation will change the way your table layouts are designed! Look for how many are absolutely necessary to support the page.

  • After you've determined your columns, then and only then look at the rows and rigorously work to minimize them. Do you need more than one row? Are you certain? If so, how many do you need to accomplish the layout? Reach for standard HTML elements instead of table elements where you can. Can you use a break tag or two to get the whitespace instead of adding a row? If so, do it!

  • Print out a copy of your layout and draw the table grid onto the page. Try a few times to see if you can reduce extraneous code but maintain the table integrity.

  • Reduce the number of tables in the layout, if possible. Is there anyway you can reasonably incorporate the contents of the page into only one table?

Less is almost always more in HTML and Web development. This concept is especially true when working with tables.


If an attribute, element, or table technique is absolutely necessary to accomplish a table design, leave it in! Some layouts are going to be complex and weigh more than others. However, following these steps will ensure that you get the slimmest possible code no matter the situation.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint