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:
- In the above code, we have created the HTML basic syntax.
- 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.
- In the table, we created 3 table rows using <tr> tag. In the 1st <tr> tag, we have created a <td> tag.
- In the 2nd <tr> tag, we have created 2 <td> tags, one for the main content and another for a sidebar.
- And In the 3rd <tr> tag, we have created a <td> tag, for the “Footer section”.
- 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:
- Here, we have created a <table> tag, and inside it 4 <tr> tags.
- 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.
- 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.
- We can set the alternative row color in CSS but in the above, we set the color using “bgcolor”.
- 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.