Making beautiful business applications

Coffee and Tables

coffeemenuThe table is one of those things designers love – you can work with it like you would in word or excel – create a lot of blocks, and add stuff in there. If you are working with a developer, avoid using tables for layout –  as the developer might stab you to death or jump off a cliff – having to redesign the whole layout.

When to use tables:

Looking at what the magical people from the powers that be says about tables:

The table element represents data with more than one dimension, in the form of a table.

So, the rule of thumb is when you have data that you want to display – a menu with details/data about the type of coffee, description and price (depending on the size). You could try add this into paragraphs and headers, but note that people will point and laugh! It would be almost like you are trying to make tea using a coffeegrinder… #awkward.

Think of a table as a set of information.

Table structure and explanation:

coffeeRow

A table has a few elements and a few odd things you need to consider:

<table></table>

This is the basic table element. It tells IE/Chrome/Safari/Firefox that that inside these tags you can expect a table with data.

<tr></tr>

A table contains columns and rows. For me, as a designer I was thinking the people were nuts – why in heaven’s name would they want to group the stuff by row.

<td></td>

Initially I wanted to style the “Grande Sized Price” column only! These sinners in the initial web world decided to use a coding standard – the way that the data was saved – to dictate the UI. They created cells inside of the table rows. These you are able to style and add the price of your coffee in. In a later post I will discuss how we can only style the totals columns. #cry

<th></th>

If you have headers in your data (e.g. “coffee type:”, “small:”, “medium:”, “large:”), you can add this in a table header. Note the structure for this is within a table row. So each column can have a header giving more info about what data it contains.

Leave a Reply

Your email address will not be published. Required fields are marked *