Web
Design
Web Development
Apps
Development
Digital
Marketing
CMS
Ecommerce
Emerging Tech 
By: Rushik Shah
Using the ‘Table’ element in HTML can be considered as basis knowledge of HTML and just about everyone knows how to do this. In fact if you were to read the very basics about HTML like the “Foundations of Web Design” it is likely to include how to use ‘Table’. Hence the obvious question, “Why is this article about tables?”
Since ‘Table’ is one of the most common elements we tend not to pay attention to the finer details of how to use it and often many of us miss the more subtle options that can allow enhanced formatting options. The easy method of using is to simply define a ‘Table’ element and utilize it. However this article is meant to show how HTML and CSS can be used together to bring alive the ‘Table’ element in ways you may not have previously imagined.
Where do we use ‘Table’ element?
The ‘Table’ element can be used for several things like to display data in the form of a spreadsheet or to display statistics in an organized format. It allows you to arrange and present any kind of data n rows and columns of cells and does so with the help of the supporting elements like ‘tr, td, th’.
The basics of the ‘Table’ element:
This is a popular element and hence one would expect that it is being used properly at all times. But on the contrary this element is rarely used to its true potential by many of the web designers. The table element has several elements to define every section and furthermore is also divided into three sections, the header, body and footer as explained here.
The ‘th’ element:
The ‘th’ element is used for the heading for each column. For example in a table that is a list of books with its authors, the ‘th’ element can be used for the heading of the table which defines each column and is sued like this.
Usage:
<table>
<th>Title</th>
<th>Author</th>
</table>
The ‘tr’ element:
This is the row element. As one would expect, a table can have multiple rows and they can be defined using the ‘tr’ element.
The ‘td’ element:
This is called the data cell element and is used to display the data row wise as per the heading ‘trh’.
Caption:
This is an element that is not used widely. It can be used as a caption for the table and appears just above the table.
Usage: <caption> My Book List </caption>
Header:
The table header element ‘thead’ is used to group the heading for each column and encapsulates the table’s ‘tr’ tag.
Usage:
<table>
<caption>My Book List</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
</tr>
</thead>
</table>
Body:
The body element is similar to the header element and is used to encapsulate the body of the table. (‘tbody’)
Usage:
<table>
<caption>My Book List</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>The tale of two cities</td>
<td>Automan</td>
</tr>
</tbody>
</table>
Footer:
The table also has footer element. It is similar the structure of a HTML page in some ways and has a header, body and footer. The footer element (‘tfoot’) is used to group the summary (the footer) of the table. The purpose of this section of the table is similar to that of the HTML page and is used to display the copyright information.
Usage:
<table>
<caption>My Book List</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr>
<td>The tale of two cities</td>
<td>Automan</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Updated 1st Feb 2015</td>
</tr>
<tfoot>
</table>
Enhancing the table with ‘CSS’
Border:
The border element can be used to further define you table. As the name suggest it gives your table a ‘border’. Although this is an attribute as well, this element is generally implemented using a style sheet, since this way you have more options and can control how it appears to a greater extent.
Usage:
<head>
<style>
table, th, td
{
border: 2px solid #FF0000;
}
</style>
</head>
Collapsed Borders:
This property allows you to collapse all the borders into a single border and is a life saver at times.
Usage:
<head>
<style>
table { border-collapse: collapse; }
table, th, td
{
border: 2px solid #FF0000;
}
</style>
</head>
Table Formatting:
The table data can be formatted and made to appear however you desire using several formatting styles as listed below:
-
Width
-
Height
-
Text-align
-
Padding
-
Background-color
-
Color
-
Caption-side
Multiple color rows:
It is possible to change the color of every second row and this can be done using the alt attribute on the row element in this way:
Usage:
tr.alt td { baclkground-color:: #FF0000; color:#FFFFFF }
Conclusion:
The usage of the table element has decreased but it is far from dead. There are several ways in which you jazz up your table and format it as you please. Each section of the table is well defined which allows for some amazing possibilities as long as you have the creativity.
This is an article solely aimed at helping you to build better websites. It often happens that the quest to have an online presence or to get online fast; the businesses take the wrong design decisions. This issue is compounded when the website design firm is not experienced enough to provide the correct guidance. Having developed more than 2000 websites, Alakmalak is the one firm that always gets it right.
Bonus: Download a PDF version of The Ultimate Guide to Avoid 10 BIGGEST IT Outsourcing MISTAKES. Access it offline anytime.
- how to get the ‘Table’ element right in HTML
- Tricks to get the ‘Table’ element right in HTML
