Sorry Grandad, frames and tables – you’re having a laugh aren’t you? Before you abandon this post for been just soooo 1990s I only want to clear up a few things related to our old (friends!) frames and tables. Lately, and somewhat unbelievable, I have seen references to these technologies as layout techniques – noooooooo! You should have left these technologies behind with the Spice Girls. That said beyond layouts there are cases where you can be justified in using them.

You’ve Been Framed

Firstly frames. Reviled by designers for looking awful, detested by Marketeers for terrible SEO and pilloried for lack of accessibility, as I say these should be long forgotten. However, I would venture to say that they have tended to linger (like a fart in a spacesuit) in the murky world of backend content management systems – Blackboard or Sharepoint anybody. That said they have been formally removed from the HTML5 specification so it would be hoped that the days are numbered for these last few outposts.

There does remain one frame technology however that is in the W3C specification and has a very healthy usage. I am talking here about iframes. An iframe provides a convenient window through a page to other content. First introduced by Internet Explorer the iframe element creates an inline frame. This produces a window through a page to another HTML page. The iframe content can be changed by linking to the iframe using the target attribute of the anchor tag.

If you have ever embedded a Youtube video you will have used iframes. Youtube’s code is like this:

<iframe width="560" height="315" src="http://www.youtube.com/embed/KUDjRZ30SNo" frameborder="0" allowfullscreen>
</iframe>

The attributes required for an iframe are all pretty obvious. Dimensions are set by width and height. The URL of the page to appear in the iframe is provided in the src attribute. The name attribute allows the iframe to be targeted in links. And the frameborder attribute controls a border around the iframe. A value of 1 switches the border on, a value of 0 will remove the border.

He is the code above with the lovely frameborder set to 1.

Trendy Tables

What of tables? Everywhere you look in the real world tables are used as a brilliant way of displaying data. And that is what you should use them for in a web page. Absolutely NOT for the layout of the page. Why not layout? Because the HTML is overly heavy, inflexible and semantically wrong.

By default HTML tables aren’t that pretty but CSS can do its presentational sparkle on them easily enough. I am pretty sad and love nothing more than a nice looking table.

Yuck Table

The following table has its border attribute set to 1.

<table border="1">
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Not very pretty. So here are my top 5 table styling tricks.

1. Remove Old HTML

Remove all HTML attributes from your table like border, cellpadding and cellspacing. You can then add padding to all table cells via td and th as you see fit.

td, th{
    padding:10px;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Also apply background colours as you would with any other element ie:

table{
    background-color:#ffffff;
}

2. Table Headers

Use <th> elements for your table headers. Better semantics. These will be bold and centred by default but we can change that with CSS. The following CSS rule will change the style of the <th>s.

th{
   text-align:left;
   font-weight:normal;
   background-color:#BAC0AC;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

3. Use the CSS property border-collapse

Use the CSS property border-collapse. This may seem strangely named but by setting the value to collapse it allows you to overrule the messy table borders set with HTML attributes and replace them with your own lovely CSS ones.

Add a CSS rule to target your table, setting border-collapse to collapse. Then apply a new border with CSS for example:

table.mydata{
    border-collapse:collapse;
    /* my new border style */
    border:1px solid #C24704;
}

This would result in a table like:

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Other options include adding borders to rows via the tr.

tr{
    border:1px solid #C24704;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

We could also just have vertical borders by targeting the td with a rule to add left and right borders. You’ll need to remove any borders added to the tr element for this.

td{
	border-left:1px solid #f00;
	border-right:1px solid #f00;
}
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

4. Align cell content with text-align and vertical-align

When placing content in cells use CSS text-align to align text horizontally and vertical-align to align text vertically ie:

td{
    border:1px solid #f00;
    text-align:center;
    vertical-align:top;
}
text-align
Key values left, right and center.
vertical-align
Key values of top, bottom, or middle.

Use text-align and vertical-align over the likes of HTML td and tr attributes align and valign.

The table below uses text-align and vertical-align to align the table cell content.

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

5. Use CSS3 tricks like nth selectors

If you fancy dabbling in a bit of CSS3 you could use nth selectors to stripe the rows.

tr:nth-of-type(even){
    background-color:#FFCF5A;;
}

This CSS3 selector will only target ‘even’ rows. You can target ‘odd’ rows as well.

Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

If you need to support older browser the same trick can be achieved with jQuery by creating a suitable class and adding to only ‘odd’ or ‘even’ rows.

$("tr:odd").addClass('alt');

Finally what about a lovely CSS3 box-shadow.

   box-shadow:4px 4px 4px #555;
Browser Layout Engine Vendor Prefix Example
Chrome Webkit -webkit- -webkit-animation-duration
Firefox Gecko -moz- -moz-column-count
Internet Explorer Trident -ms- -ms-background-position-x
Opera Presto -o- *
Safari Webkit -webkit- -webkit-animation-duration

Now that’s better.

Leave a Comment