HTML Tables

During the past few years (and even to date) the use of HTML tables has been miss used. Many webmasters have actually build their layout based on tables which is wrong since the HTML tables are meant to be used for tabular data, and many webmasters nowadays don’t use tables at all, even for tabular data.

Even tho building a table based layout saves you from the hassle to hack your HTML code for browser usability the tables are not meant to be used for that. The tables facilitate and are of a better use if they are used properly, to display tabular data such as product list that does need more info. Limiting the use of tables to only tabular data will increase the number of code lines in your HTML file and that in many cases helps for SEO purpose.

Bringing on the tables

Lets see how the HTML code of the table would look like and how we can properly use the tables within our website.


<table>
<tr>
<td>Service</td>
<td>Type</td>
<td>Price</td>
</tr>
<tr>
<td>Coding</td>
<td>Static Layout</td>
<td>$60</td>
</tr>
<tr>
<td>Coding</td>
<td>WordPress Layout</td>
<td>$80</td>
</tr>
</table>

This is how the HTML code of the table will look like. While visible for human eyes would look like this.

Well as you can see in the above example we have used the tables for tabular data where we explain the service we offer, the type of work that will be done and the price for each service type.

Note also that the table might look ugly as of now, but we will speak later how we can design our tables with CSS in the CSS Tutorial category.

Hope you enjoyed this tutorial and was helpful for you.