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.