Home > Article > Web Front-end > Why shouldn't we use tables for HTML layout?

Why shouldn't we use tables for HTML layout?

WBOYforward: 2023-09-04 18:25:06574browse

Why shouldnt we use tables for HTML layout?

In this article, we will discuss table layout and its functionality. We will learn why the table layout is the least used layout in HTML and why it is not a recommended layout when designing websites.

Layout in HTML specifies the basic organization and visual style of a website. The HTML layout of a website serves as a guide on how to place HTML elements. It enables you to build a website using basic HTML tags.

Table layout

Due to its complexity, the table layout is one of the least recommended layouts in HTML. As the name suggests, it is based on the

element. The

element provides the functionality to set data by row and column. The

tag acts as both an opening and closing tag, making it a container tag. Although three meta tags are necessary to arrange the data into a table, we can use multiple HTML elements within a single element.

The first one adds a new row to the table using the

tag, which means "table row". The second is the

tag, which represents the table title and stores the title of the table. The last one is	, which is table data, to obtain the information that needs to be stored in the table. Example The following example creates a table containing 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 The following example creates a table containing 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 shouldn’t use tables for html layout The following are several reasons why it is not recommended to use tables for HTML layout - When we open an HTML document in a web browser, search engines start reading the HTML document. As soon as it reads the HTML it starts displaying the web content. But it is difficult for search engine to render table layout because it has to wait for the closing

tag, which represents the table title and stores the title of the table. The last one is

, which is table data, to obtain the information that needs to be stored in the table.

Example

The following example creates a table containing 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

The following example creates a table containing 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 shouldn’t use tables for html layout

The following are several reasons why it is not recommended to use tables for HTML layout -

When we open an HTML document in a web browser, search engines start reading the HTML document. As soon as it reads the HTML it starts displaying the web content. But it is difficult for search engine to render table layout because it has to wait for the closing

tag, so it takes more time to render a web page with table layout.

Table layout hinders search engine optimization. When we create table HTML, we first have to define all the necessary elements of the table such as table rows, table header, and table data. If we want to add any other HTML element in the table then it will be rendered last as per the rendering process. So let's say if we want to add a navigation bar then it will appear at the end of the table. This makes the content of the web page look cluttered.

If you are using HTML4.01, you cannot use table layout because it only allows you to use simple tables to display tabular information. That's why we mainly use HTML5 instead of HTML4.

You cannot use nested tables in table layouts as this makes maintenance of the table more complex. If you create nested tables and after a few days you have to make some changes to the data, then you have to go through the entire data which is time consuming and complex process.

Another reason not to use tables for HTML layout is its flexibility. When creating a table, you have to give it a specified width, then the table will take longer to load on screens with different widths. In this case, your table looks fine on a laptop screen, but when you load it on a different device like a phone or monitor, it doesn't scale to the appropriate screen size of the device.

Page size plays an important role in the choice of website layout because the smaller the page size, the less time it takes the browser to render the page. In the case of table layout, we have to define three meta tags, without these tags the table will not display the data correctly. We can also add more HTML elements, but these three elements must be present, which overall increases the size of the page.

in conclusion

In this article, we discussed table layout and its properties. We briefly discussed a number of points about table layout, all of which combined are enough to demonstrate why table layout is not the recommended HTML layout to use when 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 is highly recommended due to its properties. Try to keep all the above points in mind while choosing an HTML layout for your website. As a recommendation, we recommend using the Div layout if it meets the requirements of your website.

The above is the detailed content of Why shouldn't we use tables for HTML layout?. For more information, please follow other related articles on the PHP Chinese website!

html5 html 搜索引擎

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Design Twitter widgets using the latest Twitter APINext article：Design Twitter widgets using the latest Twitter API

See more

Why shouldn't we use tables for HTML layout?

Table layout

Example

Example

Why we shouldn’t use tables for html layout

in conclusion

Related articles