Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Why we should not use tables for HTML Layout?
In this article we will discuss about Table layout and its functions. We will understand why table layout is the least used layout in HTML and why it is not much recommended layout while designing website.
A layout in HTML specifies the fundamental organisation and visual style of a website. A website's HTML layout serves as a guide for how the HTML elements should be placed. It gives you the ability to build websites with basic HTML tags.
Table Layout
Due to its complexity, table layout is one of the least recommended layouts in HTML. It is based on <table> element, as its name implies. <table> element offers the capability of setting up data in rows and columns.
The <table> tag serves as both an opening and an ending tag, making it a container tag. While there are three meta tags that must be used in order to arrange data into the table, we can utilise more than one HTML element inside of an element.
The first one adds a new row to the table using the <tr> tag, which signifies "table row." The second one is <th> tag, which stands for table heading and stores the table's heading. And the final one is <td> i.e. table data that gets the information that needs to be stored in the table.
Example
Following example creates a table with a single row.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table>
<tr>
<th>This tag defines the heading of the table</th>
</tr>
<tr>
<td>This tag gets the information to be stores in the rows and columns </td>
<p> HTML components can be used inside table tags, and tables can include number of table rows and table data.</p>
</tr>
</table>
</body>
</html>
Example
Following example creates a table with a multiple rows −
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<table style width=40%>
<tr>
<th>Name</th>
<th>Age</th>
<th>Roll</th>
</tr>
<tr>
<td>Rama</td>
<td>17</td>
<td>1001</td>
</tr>
<tr>
<td>Radha</td>
<td>18</td>
<td>1002</td>
</tr>
</table>
</body>
</html>
Why we should not use tables for html layout
Here are several reasons why it's not recommended to use tables for HTML layout −
When we open a HTML document in a web browser the search engine starts reading HTML document. It starts showing the content of the webpage as soon as it read HTML. But it is difficult for search engine to render table layout as it has to wait for the ending </table> tag and because of this rendering a webpage with table layout takes more time.
Table layout gets in the way of the search engine optimization. When we create a table HTML we first have to define all the necessary elements of a table like table row, table heading and table data. If we want to add any other HTML element in table then according to process of rendering it will be rendered at the end. So suppose if we want to add a navigation bar then it will be shown at the end of the table. This will make the content of the webpage looks unorganized.
If you are using HTML4.01 then you cannot use Table layout because it only allows you to use a simple table for displaying tabular information. This is the reason why we mostly use HTML5 and not HTML4.
You cannot use nested tables in Table layout as it will make the maintenance of the tables more complex. If you create nested table and after some days you have to make some changes to the data then you have to go through the whole data which is time consuming as well as complex process.
Another reason of not using tables for HTML layout is its flexibility issue. When you create a table you have to give it a specified width and then it will take longer time for the table to load on a screen having different width. In this case your table will look good on a laptop screen but when you will load it on different devices like phone or monitor it will not scale to the appropriate screen size of the device.
Page size plays a major role in the selection of layout for website because lesser the page size lesser the time taken by the browser to render the page. In case of table layout we have to define three meta tags and without those tags the table won’t display data properly. We can add more HTML elements also but these three has to be there which overall increases the size of the page.
Conclusion
In this article we discussed about Table layout and its properties. We briefly discussed many points about table layout and all those points combined are sufficient to prove why table layout is not a recommended HTML layout to be used while designing a website. While discussing all these points we compared table layout with Div layout.
Div layout is the most commonly used HTML layout and it is highly recommended because of its properties. Try to keep all the above points in mind while choosing HTML layout for your website. As a suggestion we will recommend to use Div layout if it matches the requirement of your website.
260 Views
