In this post I’ll go into the semantics of tables. Tables are still hated by many web developers and since sometimes a firm ‘NO’ is the best way of changing things some people are still scared of using them. I’ll say it out loud:
Using tables in HTML is OK.
That is if you’re using them for tabular data. Some things are a table no matter what. To rephrase – if it looks like a table it IS a table.
The beginning
The table is a block level element so it goes anywhere a block level element can. It can even fit inside the button element.
Every table begins with a table tag. Needless to say that the table needs to be opened and closed.
<table>
The table element can have attributes. One of them that should be user more often is summary that describes the contents of the table. There are a few attributes that actually control the display of the table and should probably not be used, or at least be used as little as possible. These are all still valid even in XHTML1 strict: frame, rules, cellspacing, cellpadding, width and border. Align and bgcolor attributes were dropped in strict and should not be used anymore. You can achieve almost everything that the last two groups of attributes are there for with CSS. You might stumble upon some problems though.
List of attributes:
- summary
- frame
- rules
- cellspacing
- cellpadding
- width
- border
alignbgcolor
The regular attributes apply, a special case is the dir attribute that sets the direction of the table. With tables right-to-left (RTL) means the first cell will be on the right and the text will start on the right.
The header that’s not the head
Before we get to the content of the tables we need to check some other tags.
<caption>
The caption tag is used to “describe the nature of the table
“. The caption element is visible to all users and should be rendered as wide as the table. With the summary attribute it should provide all the information about the table to people using non visual renderers. There can only be on caption element and it has to be the first child in the table element (ignoring whitespace nodes of course).
There are some issues with rendering the caption though:
- Firefox renders the tables border differently that the captions border which creates a 1px difference – corrected with margin-left:-1px
- Internet Explorer 6 ignores margines on the caption element entirely. It also ignores the border collapse between the table cells and the caption
- caption-side property that defines if a caption is placed at the top or the bottom of the table is not really supported across A-grade browsers at the time of writing (Firefox supports it, but not changing top to bottom via scripting)
Read more about styling table captions.
Next time…
In the next edition of the tables we’ll go into rarely used colgroup and col tags.
looking forward for part 2, tnx!