Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Using proper HTML tables

Monday, November 19th, 2012 by Servage

In this article we’ll take a closer look at table structures in HTML. Tables have been invented for one purpose – but been abused for many other. Tables are what they say: Tables! Meant to represent tabular data or sheets – like an Excel document. Tables are not meant to be used to create layouts, design your website – sort header from content, build a menu with a table, or whatever else you may see when studying source code on the web. Use tables when you would do it on paper as well. For everything else, you should consider the HTML/CSS box model using div containers.

HTML table structure

So, you have some tabular data – in this case we have example data – but it could be some economic figures, weather information, or many other examples. The main thing about tables in HTML is the structure. The entire table is enclosed in a table tag, where you have the option to use three sub areas: Head, Body and Foot.

Head is meant for column descriptions. Body is meant for the actual content. Foot is menat for supplementary informtion – or maybe repeating the column names at the bottom. An example HTML table is enclosed below:

<table>
  <thead>
    <tr>
      <th>Head Col 1</th>
      <th>Head Col 2</th>
      <th>Head Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot Col 1</td>
      <td>Foot Col 2</td>
      <td>Foot Col 3</td>
    </tr>
  </tfoot>
</table>

CSS table layout

You can style your HTML table like any other HTML elements with CSS. The typical rules and options apply. In the example below we have used nested selects of elements (i.e. all “td” elements inside a “tbody” element etc.):

table {
  padding: 0;
  margin: 10px;
  font-size: 12px;
}

th {
  font-weight: bold;
  background-color: #ccc;
}

tbody td {
  padding: 5px;
}

tfoot td {
  font-size: 10px;
}

This should make it a little easier for beginners to understand the HTML table concept – and hopefully enables you to create better tables for your website faster :-)

Using proper HTML tables, 3.5 out of 5 based on 6 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.