With the css-based, table-less layout fad going on for the past few years, tables have somehow become something “taboo” for some designers and have not gotten the attention they deserve. Tables are used for representing data in a matrix, with their relations arranged in rows and columns. Tables can be visual and also conceptual, i.e. database tables. In this article, I will show you how visual tables can be made better and more usable, with code samples which can be easily implemented on an existing site. I will discuss the visual and usability aspect of designing tables and will try to use simplified code for clarity. For more information on improving the accessibility of tables, which this article will not cover, check out this great article.

Objectives

We want to achieve tables which are more scannable, with data that is easily findable, more aesthetically-pleasing and also easier to style using CSS.

Semantic Table HTML Markup

Here we have a basic table.

And its markup.

<table id="basic">
	<tr>
		<td></td>
		<th>Color</th>
		<th>Size</th>
		<th>Rarity</th>
		<th>Price/100 grams</th>
	</tr>
	<tr>
		<th>Golden Grapes</th>
		<td>Golden Purple</td>
		<td>Small</td>
		<td>Rare</td>
		<td>$100</td>
	</tr>
	<tr>
		<th>Pearl Melon</th>
		<td>Marine Cream</td>
		<td>Large</td>
		<td>Common</td>
		<td>$75</td>
	</tr>
	<tr>
		<th>Diamond Lemon</th>
		<td>Shiny Yellow</td>
		<td>Medium</td>
		<td>Very rare</td>
		<td>$1,000</td>
	</tr>
</table>

This creates a really basic, bare-minimum table. Notice the use of <TH> elements for cells that contain header information in this 2-dimensional table, where the first row and first column are headers. The empty cell at the top left corner is a <TD> element because it is not a header.

To make this table more readable we will color the header rows and columns and make the text in them bold, and also add more padding to lossen up the table. To make the table easily style-able we will use the <THEAD> and <TBODY> elements to wrap the appropriate cells.

<table id="colored">
	<thead>
		<tr>
			<td></td>
			<th>Color</th>
			<th>Size</th>
			<th>Rarity</th>
			<th>Price/100 grams</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Golden Grapes</th>
			<td>Golden Purple</td>
			<td>Small</td>
			<td>Rare</td>
			<td>$100</td>
		</tr>
		<tr>
			<th>Pearl Melon</th>
			<td>Marine Cream</td>
			<td>Large</td>
			<td>Common</td>
			<td>$75</td>
		</tr>
		<tr>
			<th>Diamond Lemon</th>
			<td>Shiny Yellow</td>
			<td>Medium</td>
			<td>Very rare</td>
			<td>$1,000</td>
		</tr>
	</tbody>
</table>

table#colored {
	border: 1px solid #555;
	border-collapse: collapse;
}
#colored td,
	#colored th {
	border: 1px solid #555;
	padding: 8px 12px;
}
#colored th { font-weight: bold; }
#colored thead th {
	background-color: #dcf1f5;
	color: #3c423c;
}
#colored tbody th {
	background-color: #f4fcf0;
	color: #354042;
}

The result is something that looks better.

Center-align Cells of Short Data

Next we should center-aligned data which are short with only one to three words. We give this cells the CSS class name “center”. Although we should always try to name our CSS class names based on purpose and not appearance, e.g. “warning” vs “red”, there really isn’t any special purpose this class will serve except to center stuff so “center” is appropriate.

What about cells with numbers and figures? Should we center them. We will go to that later.

<table id="colored-centered">
	<thead>
		<tr>
			<td></td>
			<th class="center">Color</th>
			<th class="center">Size</th>
			<th class="center">Rarity</th>
			<th>Price/100 grams</th>
		<tr>
	</thead>
	<tbody>
		<tr>
			<th>Golden Grapes</th>
			<td class="center">Golden Purple</td>
			<td class="center">Small</td>
			<td class="center">Rare</td>
			<td>$100</td>
		</tr>

#colored-centered .center { text-align: center; }

Cells with Numbers

Numbers are a little different from words because they have a distinct linear structure, do not use punctuation (except for commas and periods) and have consistent character widths. Take a look at the following image and you’ll see what I am talking about.

Try scanning the 3 different columns of numbers for a few seconds. Which one is more scannable? The difference might be minute but for someone working with large tables and long numbers, it can make a big difference.

As you can see, the center-aligned numbers are not as friendly to the eyes as the left aligned ones. By flushing numbers left, they line up with a straight edge and provide a clear starting point for the eyes. Center-aligned numbers have both sides jagged thus require more eye movement. To further increase the readability, monospaced fonts can be used for left-aligned numbers. Monospace characters all have the same width and thus provide a very consistent and predictable flow for the eyes. Eye movement should be less erratic when reading monospaced numbers.

Achieving this effect in CSS is easy.

#colored-centered-num .num {
	font-family: monaco,"Lucida Console",courier,mono-space,monospace;
	font-size: 13px;
}

<tbody>
		<tr>
			<th>Golden Grapes</th>
			<td class="center">Golden Purple</td>
			<td class="center">Small</td>
			<td class="center">Rare</td>
			<td class="num">$100</td>

Alternating Row Colors

Reading rows in tables with a large number of columns is hard because the eyes are forced to stay within a line with little visual guidance, like walking in a straight line when you are drunk. People have always invented ingenious ways to facilitate horizontal scanning of table rows on paper, such as laying a ruler across a table, as a guide. Simulating a ruler on a webpage is probably overkill but we can provide similar functionality by using alternating table row colors. Alternating colors provide a simple and effective guide for the eyes to easily move across a table row horizontally because each row is visually distinguished from the one above and below it.

You can give a table row a different background color by applying CSS to a <TR> element.

<tbody>
	<tr class="alt">
		<th>Golden Grapes</th>
		<td class="center">Golden Purple</td>
		<td class="center">Small</td>
		<td class="center">Rare</td>
		<td class="num">$100</td>
	</tr>
	<tr>
		<th>Pearl Melon</th>
		<td class="center">Marine Cream</td>
		<td class="center">Large</td>
		<td class="center">Common</td>
		<td class="num">$75</td>
	</tr>

#alternating .alt td { background-color: #edf7e9; }
#alternating tbody .alt th { background-color: #e9f7e4; }

Nice Borders

The dark borders could use some refinements. Earlier we separated the tabl cells into <THEAD> and <TBODY> elements and this is perfect for detailed styling. We will also deal with the empty cell on the top left.

Let’s start by removing the top, right and left border for the <TABLE> element itself then add a 2px border to it to create a “shadow”, and then give the other cells nice borders. No need to add any more CSS selectors. We’ll just tweak the ones we already have. Firstly, the top header row.

#niceborder thead th {
	background-color: #dcf1f5;
	color: #3c423c;
	border-top-color: #e5f3f7;
	border-right-color: #c2e0f2;
	border-bottom-color: #c2e0f2;
	border-left-color: #e5f3f7;
}

Next we style the left header column.

table#niceborder {
	border-collapse: collapse;
	border: 0;
	border-bottom: 2px solid #d2ecdd;
}
#niceborder tbody th {
	background-color: #f4fcf0;
	color: #354042;
	border-right-color: #d2ecdd;
	border-bottom-color: #d2ecdd;
	border-left-color: #eff7e9;
}

Then the cells.

#niceborder td,
#niceborder th {
	border: 1px solid #eee;
	padding: 8px 12px;
}

Lastly we get rid of the empty cell. We can do this by applying “border: 0″ to the sole <TD> element which is the empty one in <THEAD>. But if you have other <TD>s that you don’t want to be empty, you will need to apply a class name to them so they are isolated.

#niceborder thead td { border: 0; }

And it’s done! The table has lost its harsh black borders, it now looks more aesthetically-pleasing.

Cells with Links

For links in table cells to be highly usable, they should have large click areas to make them easy to click and should have a different visual state when moused over. To give links a large click area, we need to transfer the padding of the surrounding table cell to the <A> (anchor) element.

#links tbody th {
	padding: 0;
	background-color: #f4fcf0;
	color: #354042;
	border-right-color: #d2ecdd;
	border-bottom-color: #d2ecdd;
	border-left-color: #eff7e9;
}
#links a {
	display: block;
	padding: 8px 12px;
	border: 0;
	color: #54b4c3;
}

The result.

This concludes the end of the article. You can also view the full demo and source code (HTML and CSS). I hope you like it. Please feel free to correct me if I am wrong and also do share your tips in designing usable tables.

Breadcrumbs

Breadcrumbs or breadcrumb trail are a navigation technique used in user interfaces. Its purpose is to give users a way to keep track of their location within programs or documents. The term is taken from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. Breadcrumbs typically appear horizontally across the top of a webpage, usually below any title bars or headers. They provide links back to each previous page that the user navigated through in order to get to the current page, for hierarchical structures usually the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website. Generally, an arrow is used as hierarchy separator, although other glyphs can be used to represent this.[source: Wikipedia]

Tabs

In graphical user interfaces, a tab is a navigational widget for switching between sets of controls or documents. It is traditionally designed as a text label within a rectangular box with its top borders rounded. Activating a tab (usually by a mouse click) makes its associated content visible and the tab itself usually becomes highlighted to distinguish it from other inactive tabs. Only one tab can be active at a time. Use of tabs to display non-static content gives rise to Tabbed document interface, e.g. used in Mozilla browser and many text editors such as SciTE.

GUI tabs are modeled after traditional card tabs inserted in paper files or card indexes and thus they are often employed to give the user interface a more “natural” look.[source: Wikipedia]

What you see here is a typical website layout that incorporates tabbed navigation and breadcrumbs, each page-wide row occupying significant vertical space. It is clear that the breadcrumbs only occupy a small percentage of the entire row of horizontal space allocated to it. The same goes for the tabbed navigation. We can definitely make better use of the space.

Tabcrumbs

While working on a client project which I had to make efficient use of space to keep important page elements above the fold. So I sat down and came up with some ideas and one of them is what I call “Tabcrumbs”, the tasty combo of tabs and breadcrumbs. If you are a web designer or have experience with making web sites, you would have guessed what it is. Tabcrumbs is a combination of navigational tabs and breadcrumb trails. This approach allows the web designer to save lots of precious vertical space and also make better use of horizontal space.

Are there risks? Is combination better than separation? Is saving space worth having the user learning a new user interface feature? I think tabcrumbs are not a drastic new feature and does not require change in user behavior, compared to the crazy and popular navigation in Flash sites on the web. You can still clearly see a breadcrumb trail and tabs and not see something else.

What are your views? Do feel free to criticize.

I recently tried out a new web development environment named Coda form Panic Inc., fell in love and decided to move away from Dreamweaver. It is new to me but by no means a new product. It has been around for more than a year and has won the 2007 Apple Design Award for Best User Experience. The latest version 1.5, the one I am using was launched on the 26^th, a few days ago.

One of the nice features is subversion integration. Unlike on Windows which is my previous platform, there isn’t many choices when it comes to subversion clients. On Windows I used TortoiseSVN which had excellent Explorer integration. On the Mac I used something called svnX which didn’t have Finder integration and the user interface isn’t as intuitive as on TortoiseSVN, although it is nice after you get used to it. Dreamweaver has no subversion integration.

Another feature is “Clips” which lets you store frequently-used code snippets in an intuitive “HUD”. The clips can also be imported/exported for sharing. I am currently using the clips feature to store snippets such as the structure for a basic XHTML layout, CSS browser resets, Lorem lipsum and other snippets like WordPress template tags. Really cool.

Like Dreamweaver, Coda also has FTP. Coda’s has Panic’s “Transmit” engine built-in and supports FTP, SFTP, FTP+SSL, and WebDAV. I still have not really gotten used to it but it feel snappier than Dreamweaver which tends to lock up for me when toggling between passive and non-passive modes in FTP.

Like Dreamweaver, Coda allows you to define “sites” and each of them can have their own configurations for FTP, testing servers, etc. The difference is that instead of displaying the list of sites in a dropdown lie in Dreamweaver, Coda shows them as almost-live updated thumbnails of the actual homepage of a site, in a grid. This features allows me to have a very clear overview of the active projects I am working on.

When developing in Dreamweaver, I don’t rely on WYSIWYG and I do testing on a real browser. This means that I had to switch back and forth between IDE and browser to edit code and view changes. With Coda, I don’t have to switch anymore as it has a preview pane. You can also select which browser to use, apart from the default Safari. I am using Firefox as the default.

Although I still have to rely on WYSIWYG in Dreamweaver for some client projects which have old and deprecated code, I will definitely see more of my time spent in Coda.

By the way since I have been using Dreamweaver since version 4, I am very much used to the syntax-coloring schemes of Dreamweaver so I spent some time configuring Coda to color syntax like Dreamweaver. I exported a “.seestyle” file which you can download and import into Coda to get syntax colors similar to Dreamweaver’s. It is not perfect but it works for me so you can probably refine it more. if you ever do refine the colors, why not post it here to share it with others?

Download Coda syntax color schemes for HTML, PHP-HTML and Javascript (zipped, small).

You get Coda at the official website for 99 USD. Try the trial and see if it’s worth paying for.

The 2nd season was launched not too long ago with a new theme, updated gowns, fresh faces and a slightly improved user interface.

The new theme reminds me of scenes in fantastical stories by the famous writer Lewis Caroll, who wrote Alice in Wonderland. The emotions in this season’s photographs exude a more child-like and innocent air. The images are filled with softness that compliment the gowns wonderfully.

This has got to be my favorite photograph in this season. The model did a great job and looked totally natural in that outfit. Interesting and appropriate hairstyle too. The presentation of thumbnails are unchanged.

The presentation of gown details have changed and now features a more compact view to accomodate up to 4 gowns should a picture have that many. The previous version was designed only for a maximum of 2 gowns, both visually and programmatically. The layout is now also simplified with less visual effects applied, resulting in a more polished and exquisite look.

The wish list also shares similar visual improvements as the gown details box with new controls such as simpler scrollers and buttons.

I hope you like it.

Visit: SingaporeBrides Wedding Fashion

Tian Dot Com Pte. Ltd., client
Aen Tan, UI and Interaction Design
Chua U-Zyn, Web Development
Chin Leng, Editor
Ashley, Hairstylist
Jyue Huey (The Makeup Room), Makeup Artist
Monica Eng (Vivid Shots), Photographer

An interactive showcase of exquisite wedding gowns with a front-end developed in Actionscript 2.0. Wedding gowns from 2 boutiques are being showcased this season in an interactive gallery. Users are able to view the wedding gown photos by selecting individually and also in slideshow mode. The gallery comes with a Wishlist feature which allow users to save their favorite gowns into a wishlist that works like a shopping cart, all within Flash, without the need for any registration. When they return to the gallery on the same computer, the wishlist will still be around as it is saved on the user’s own computer. Those interested in the showcased gowns can then forward their wishlist to the respective boutiques.

The technology behind the showcase is developed in Actionscript 2.0 for Flash Player 8, which currently enjoy a good 98% to 99% adoption rate. Communication of data between Flash and the PHP & MySQL backend is via XML. An administration panel has also been built for the management of wedding gowns, enquiries and boutiques.

The backend is developed by U-Zyn, a very talented and skilled PHP & MySQL developer.

SingaporeBrides Wedding Fashion has been showcased in Anjo Dekiteharu, Straightline Bookmarks and Command Shift 3.

Visit: SingaporeBrides Wedding Fashion

Yahoo introduced its Internet search system, called oneSearch™, developed for mobile phones on March 20, 2007. The company’s officials stated that in distinction from ordinary Web searches, Yahoo’s new service presents a list of actual information, which may include: news headlines, images from Yahoo’s Flickr photos site, business listings, local weather and links to other sites. Instead of showing only, for example, popular movies or some critical reviews, oneSearch lists local theaters that at the moment are playing a certain movie, user ratings and news headlines regarding the movie. A zip code or city name is required for Yahoo oneSearch to start delivering local search results. The results of a Web search are listed on a single page and are prioritized into categories. The list of results is based on calculations that Yahoo computers make on certain information the user is seeking. (Source: Wikipedia)

Manic engaged me to build this demo which they had designed for Yahoo!. I received a brief and visuals and produced the fully working demo using Adobe Flash and Actionscript 2.0. The demo included an automatic slide show which is user-navigable. The demo accurately demonstrates the user-experience of using Yahoo!’s oneSearch product on a mobile device. It walks through activities such as web search, checking the weather, movie ratings, stock information and more.

The demo has been used at various trade shows such as the recent CommunicAsia here in Singapore. I was there and was thrilled to see my work on display in front of thousands of trade professionals.

If you are interested in viewing this tour, feel free to write to me.

Beverly is Singapore’s first one-stop women’s portal that caters to the independent, sophisticated and stylish woman. Constantly providing the latest updates and premium wellness products and services, we are the perfect source of information for the busy working professional, whether a fashionista who is concerned about the latest runway and beauty trends or a woman who simply loves to pamper herself.

The core of the website is built around WordPress 2.1 and extensively-customized with a XHTML Strict-compliant and CSS-based theme. Much of the functionality are achieved with WordPress’s own template engine and features that are not natively available in WordPress are achieved with the use of plugins. A large number of plugins are used in this project to allow the website to be used and managed like a CMS, and to extend the original membership features.

WordPress’s flexibility in it’s archival and category system allowed me to create specific category and archive templates. A large number of templates are created for articles, contest pages, membership and archives pages. As a plus, a printer-friendly version is available for any single article view. This allows the user to print information on an article without unnecessary content like advertisements and navigation menus.

BEVERLY was showcased in CSS Mania, Screenalicious, W3C Sites (Editor’s Pick), CSS Clip, CSS Impress.

Personal site of my girlfriend which we made together a few years ago. Dark and elegant was the motivation behind this design. I did the Flash development and scripting, and she did most of the design direction. It was linked on several design portals and webzines including Design is Kinky, soon after its release.

“Orgasmically sexy design would be an understatement”.
Design is Kinky (21 Apr, 2004)

Quix Creations is one of Singapore’s most dynamic information technology firms offering clients innovative IT services at reasonable prices.

The semantical and accessible markup used and human-friendly design is aimed at being readable, easy on the eyes. The source codes conforms to XHTML 1.0 Strict Standards and Section 508 Accessibility Guidelines so less fortunate folks can use the site also. All content like source code, CSS and images are optimized for fast page load and user-friendliness.

Quix Creations has been featured on CSS Mania, CSS Collection, Screenalicious, MostInspired, Hatena::Bookmark, CSS Container and CSS Clip.

Visit: QUIX Creations

CSS-based corporate website developed for a multi-national power company, Asia Power Corporation Limited.

Asia Power is principally involved in the ownership, management and operation of power plants in China. It was incorporated in Singapore in March 1997 and later converted to a public company in October 1999. Asia Power has been developing and focusing on Power Generation, Power-related Technology and Power Consulting & Investment Holding as the three core businesses.

View it at http://asiapower.com.sg/