• Post category:HTML

Best Examples to Create the HTML Layout Using Tables

HTML Layout with Tables

In this article, we will see about web page layout design with tables. We can also create the HTML layout using tables, which means <table>, <td>, and <tr> tags. Let’s see the example code.

Ex:

<html>
   <head>
      <title>Table HTML Layout</title>
   </head>
   <body>
      <table width = "100%" border = "0">         
         <tr>
            <td colspan = "2" bgcolor = "#327fc9">
              <center><h1>This is Web Page Main title</h1></center> 
            </td>
         </tr>
         <tr valign = "top" colspan = "2">
            <td  bgcolor="#b7d0e8">
               Content...
            </td>
            <td bgcolor = "#b7d0e8" height = "200" width="30">
               <b>Sidebar</b><br />
               <p> HTML<br />
               CSS<br />
               JavaScript...</p>
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#327fc9">
               <center>Copyright © 2023</center>
            </td>
         </tr>         
      </table>
   </body>
</html>

Output:

html layout with tables

  1. In the above code, we have created the HTML basic syntax.
  2. Inside the body section, we have created the <table> tag. The table tag is paired tag, so we need to create opening and closing tags.
  3. In the table, we created 3 table rows using <tr> tag. In the 1st <tr> tag, we have created a <td> tag.
  4. In the 2nd <tr> tag, we have created 2 <td> tags, one for the main content and another for a sidebar.
  5. And In the 3rd <tr> tag, we have created a <td> tag, for the “Footer section”.
  6. See the above output, the HTML layout is displayed successfully.

Let’s see another example model of HTML layout:

<html>
   <head>
      <title>Table HTML Layout</title>
   </head>
   <body>
      <table width = "100%" border = "0">         
         <tr>
            <td colspan = "2" bgcolor = "#327fc9">
              <center><h1>This is Web Page Main title</h1></center> 
            </td>
         </tr>
         <tr valign = "top" colspan = "2">
            <td  bgcolor="#b7d0e8" height = "100">
               Section
            </td>
            <td bgcolor = "#b7d0e8" height = "200" width="30" rowspan="2">
               <b>Sidebar</b><br />
            </td>
         </tr>
         <tr>
            <td  bgcolor="#b7d0e8" height = "100">
               Article
            </td></tr>
         <tr>
            <td colspan = "2" bgcolor = "#327fc9">
               <center>Copyright © 2023</center>
            </td>
         </tr>         
      </table>
   </body>
</html>

Output:

READ ALSO  Easy Way to Change Color of Specific Word in HTML

html layout with tables

  1. Here, we have created a <table> tag, and inside it 4 <tr> tags.
  2. In the 1st <tr> tag, we have created the “header”, the 2nd <tr> tag is for the “section” and “sidebar”, the 3rd <tr> tag is for the “article” and the 4th <tr> tag is for “footer” section.
  3. To split the table row into 2, we need to set the “rowspan” to 2. To split a column into 2, we need to set “colspan” attribute to 2.
  4. We can set the alternative row color in CSS but in the above, we set the color using “bgcolor”.
  5. So, see the above output, the layout design is successfully displayed.

I hope you have understood a little about the HTML table layout. If you have any doubts about this then please comment below.

Leave a Reply