TheMikeHallSoftware Engineer / Web Designer

Giving up Tables for CSSFiled Under: Tutorials

Tables make formatting a page simple and intuitive. Unfortunately, using tables for formatting makes style changes difficult and time consuming at best. CSS is more complicated to implement if you’re used to tables, but once it’s done, it is very easy to make changes. This tutorial aims to provide an implementation of tables in CSS while maintaining the ease of tables. Try to keep in mind, that this becomes increasingly easy as your grasp of CSS improves.

The HTML

The idea is to make it as similar to tables as possible, as a building block to learning CSS. Notice the nesting is similar to tables.

<div id=”table”>
<div id=”table-tlc”>Top Left Corner</div>
<div id=”table-tlc”>Top Left Corner</div>
<div id=”table-tb”>Top Border</div>
<div id=”table-trc”>Top Right Corner</div>
<div id=”table-lb”>Left Border</div>
<div id=”table-content”>This is the table content</div>
<div id=”table-rb”>Right Border</div>
<div id=”table-blc”>Bottom Left Corner</div>
<div id=”table-bb”>Bottom Border</div>
<div id=”table-brc”>Bottom Right Corner</div>
</div>

The HTML is divided into the familiar sections of an HTML table; four corners, top, bottom, sides, and the center content section. The sections will be positioned and sized using CSS.

CSS Positioning

When the ‘position’ property in CSS is set to relative, that just means it will be positioned relative to where it would be if there was no positioning applied. If the ‘position’ property is set to ‘absolute’, then it will be placed exactly where it is positioned, relative to its parent. Meaning if the ‘left’ property is set to ‘0px’, and the ‘position’ is ‘absolute’, it will on the very left side of it’s parent. If it’s parent is the ‘body’ tag, it will be placed at the absolute left side of the browser. In the above HTML you can see that the parent of all the table’s sections is the tag with id=”table”. W3schools is good place to learn more about CSS positioning.

Each section will be positioned absolutely within the ‘table’ tag. So the ‘Top Left Corner’ (tlc) needs to have a ‘position’ of ‘absolute’, a ‘left’ of ‘0px’, and a ‘top’ of ‘0px’. The ‘Left Border’ sections need to have ‘left’ of ‘0px’, but the ‘top’ and ‘bottom’ need to be ‘16px’, which is the height of the corners. You can see the positioning of each section in the image below:

The center content section is a little more difficult. We will use a margin with relative positioning instead of absolute. Very important is the ‘display’ property, which must be set to ‘block’ in this case. To learn more about the ‘display’ property, check out w3school’s CSS display property page.

Browser Inconsistencies

CSS positioning in IE6 and likewise outdated browsers, is very painful. It’s one of the reasons people pray for the death of IE6. But as of the writing of this post, IE6 usage is still around 30%, but thankfully it is dropping. The problem is this situation is absolute positioning. In early CSS implementations, only the top left corner of an element could be positioned. In modern CSS, you can set the top, left, bottom and right, and the element will be made to comply (stretched). This can be fixed in a number of ways, like using Microsoft’s proprietary ‘eval()’ CSS directive. But i am a fan of KISS (Keep It Simple Stupid), so i went for a far more intuitive and cross browser solution. In the old CSS, you need to set the height and/or width of the element to make it fit where you want it, so that’s exactly what I did, and jQuery makes this super easy.

if ( $.browser.msie && $.browser.version < 7 ) {
$(”.table-tb, .table-bb”).each(function() {
var w = $(this).parent().width() - 24;
$(this).css(”width”, w + “px”);
} );
}

The CSS

#header-table {

font-size:11px;

position: relative;

margin-left: auto;

margin-right: auto;

margin-top: 16px;

text-align: left;

width: 400px;

min-height:50px;

height:auto;

border: 1px dotted gray;

}

#table-content {

margin:25px;

border:solid 1px gray;

display:block;

position:relative;

z-index:1;

}

#table-tb, #table-bb {

height:16px;

border:solid 1px #FF0000;

position:absolute;

left:16px;

right:16px;

}

#table-tb { top:0px; }

#table-bb { bottom:0px; }

#table-rb, #table-lb {

width:16px;

border:solid 1px #009900;

position:absolute;

top:16px;

bottom:16px;

}

#table-rb { right:0px; }

#table-lb { left:0px; }

#table-tlc, #table-trc, #table-blc, #table-brc {

height:16px;

background-color: transparent;

background-repeat: no-repeat;

position:absolute;

width:16px;

border:solid 1px #0033CC;

}

#table-tlc, #table-trc { top:0px; }

#table-tlc { left:0px; }

#table-trc { right:0px; }

#table-blc, #table-brc { bottom:0px; }

#table-blc { left:0px; }

#table-brc { right:0px; }

Result

Finally, after setting backgroung images, and adjusting the height and widths according to the image you use, here’s the result.

Tags: css, table, tutorial