With HTML5 coming before an officially adopted next XHTML schema things have stayed the same as much as they have changed. Tables have been branded as ‘old school’ and disfavored in preference to dividers. Once the king of solid layouts, now the bane of many coders. As the internet went from dial-up to ‘high speed’ many have forgotten just how much processor overhead it takes to render old fashioned tables. Not to mention with the advent of Ajax tables have once again found broad use, as they were originally intended, for tabular data display.

Tables may be outdated with the more ‘modern’ styles of html coding, yet they are still heavily used in web design. So if you must use tables in your layout make the layouts better with CSS. While you can’t make tables better you can make them faster with a few simple tricks. Merging CSS into your table scheme can provide great advantages in both page load times and page speeds.

CSS table properties allow you to set the layout of a table. In fact there is an inbuilt ‘default set’ of CSS attributes for tables. The ‘table-layout‘ property controls the algorithm used to lay out the table cells, rows, and columns. Values have the following meanings,  fixed Uses the fixed table layout algorithm, auto Uses any automatic table layout algorithm.

The CSS Table Properties

• Property: table-layout
  Description: Sets the layout algorithm to be used for a table
  Values: collapse, separate, inherit

• Property: empty-cells
  Description: Specifies whether or not to display borders and background on empty cells in a table
  Values: length, inherit

• Property: caption-side
  Description: Specifies the placement of a table caption
  Values: top, bottom, inherit

• Property: border-spacing
  Description: Specifies the distance between the borders of adjacent cells
  Values: show, hide, inherit

• Property: border-collapse
  Description: Specifies whether or not table borders should be collapsed
  Values: auto, fixed, inherit

The biggest problem with tables is just that, they are BIG! Tables normally take up more code and create higher numbers of processor runs. Part of this is the way tables resolve in your browser. The majority of browsers cannot render a table until it has been read and re-read, at least twice, many times even more. For older browsers until the last </table> tag has been read the entire table will freeze or hang. In more modern browsers tables are rendered by rows, and that is a major improvement, but still much slower than a typical CSS + DIV based layout.

To beat the table fails, we have collected some CSS hacks to trim them down and recover much needed space. One of the best hacks to html tables is a wonderful CSS extra for width. Browsers tend to prefer rendering speed over precision, except when the “fixed layout algorithm” is selected. By using a CSS table-layout:fixed attribute with your tables the render speed becomes much faster. When you use a fixed layout positioning method browsers use a higher speed and simpler render for your widths. This will only work if your tables match the declared table widths, otherwise any unmatched tables will force the entire table to be re-rendered. Here is a simple example of what it looks like in your code.

<table style=”table-layout:fixed” width=”770”><tr>

<td width=”270″>css table 1</td>

<td width=”500″>css table 2</td>

</tr></table>

Quick Table Tips:

• In vertical space between elements don’t create a new row for spacers. Place extra vertical space below elements directly in the table cells.
• Instead of creating a new table cell for the images and alignment. Try using image CSS alignment properties within the image tags.
• When an image doesn’t line up with the edge of other cells, use the hspace attribute to adjust it, instead of adding more cells.
• By using rowspan and colspan you can reduce the total number of cells. This is essential for proper form as well.

Maximize Page Load Speeds With More Tables?

The next major issue with html tables is the code bloat nesting tends to cause. This of course not only means more repeated code but more unneeded code. With mobile browsers and slower connections this can make the processor load so heavy they choke down and freeze. One quick fix is to avoid it by actually using more tables oddly enough.

A standard single table layout.

An optimized layout with multiple small tables.

Instead of one big table with many nested within it, try breaking the tables into a few smaller tables. For example a basic two column web site with a header and footer could just as easily be three or four tables as one. By making the header body and footer sections or even header, left, right and footer tables. With a few smaller tables all will resolve separately and cause a faster page load with better structure. Combined with the ‘layout:fixed’ trick this can have a major impact on visible page loads in browsers of all types.

Minimize Attributes by Reducing the Amount of Code Used:

By using global attributes as often as feasible you can save space to. CSS for cell styles can remove large amounts of redundant code. Within the table itself you can cut the code by work from the ‘top down’ in the table hierarchy.

For example using one <TR ALIGN=CENTER> can replace multiple <TD ALIGN=CENTER> entries. So when all alignments within a row require the same alignment, you can set it once with the <TR> string and avoid repetitions in the <TD> cells. Use CELLPADDING or CELLSPACING for space around tables rather than <TD>’s. Take advantage of the power of CSS and shorthand properties. Many table style attributes can use shortcode and reduce up to 50% of you code.

Following these example you can make or convert any page to a more efficient setup. For instance in the final four table example with CSS layout properties applied to your page. You would have the head section loaded first so the user has something to ‘see’ right out of the gate. then as the left and right table resolve due to the fixed position each will not only load faster but be in the proper space. This save the old ‘jumping page’ problems caused by unknown table sizes changing as each row filled because they have already been set to a specific space.

By optimizing your code base and removing unneeded properties you garner a great improvement to your sites perceived speed. This done properly can drastically reduce your chances of a visitor ‘not seeing’ your pages. As we have all learned, modern web users will not settle for slow pages. These few fixes can help to ensure there is always something to look at when a visitor hits your page.

The best approach for all these processes is to make sure what you ‘need’ to be seen is also loaded first. If your primary focus is on the content, make sure to move it as high as possible into your code. For sites where navigation or sidebars hold a prime importance, make sure they are rendered first. No matter how much HTML has changed over the years, it still read top down, one thing at a time. Take advantage of the way HTML and CSS function properly and you will always have the fastest site possible while maintaining the best user experience.