Servage Magazine

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

Servage Web Development Course Part 4: Tables

Friday, March 2nd, 2018 by Servage

blogimageToday we will take a look at tables. Tables are in general comparable with tables in for example Word or Excel, and should be used the same way in HTML. That basically means that tables are a way to represent tabular data. They are not meant to be abused for other purposes, such as for example layouts. It has been “normal” for many years to use tables for page structure, which has distorted the use of tables. The correct way of doing layout is by use of div containers and CSS positioning (like described in a previous part of this course). Tables are for data.

The table HTML structure

The <table> tag has three sub-elements, which could be described as the three main areas of the table. The head, the body and the foot. Meaning that you have one row of title elements, then you have a number of data rows, and finally you have a foot row. The following code shows a complete example of a table. It is not mandatory to use all or any of these areas, like the second example suggests, you can also have data-rows only.

<table border="0" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Title Column 1</th>
      <th>Title Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Foot Column 1</td>
      <td>Foot Column 2</td>
    </tr>
  </tfoot>
</table>

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Tables offer a great deal of flexibility within the sphere of tabular data. You can use or leave out any areas of the table you don’t need, you can have as many columns as you wish, there is no row-limit, and you can even merge columns or rows by use of the collspan and rowspan attributes. Example here:

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td colspan="2">Row 2, Column 1 and 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

Table layout

There are unfortunately still some “odd” things going around with tables in some browsers, so to make sure I added the border, cellpadding and cellspacing attributes to the table tags. However, like with anything else, you should provide layout to your tables by use of CSS in your stylesheet. Here are some examples:

table {
  border: 1px solid #000000;
}
th {
  background-color: #cccccc;
  font-weight: bold;
}
th, td {
  padding: 5px;
}

Tables are easy to use, and probably one of the most used elements of HTML. Today many tables are modified with Javascript to add effects such as sortable behavior etc. We will get back to that in a later part of this course :-)

Servage Web Development Course Part 4: Tables, 3.6 out of 5 based on 18 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.