Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create multi-column layout in HTML5 using tables?
Design your webpage to display content across multiple columns using HTML tables. This approach allows you to create structured layouts with a main content area in the center, navigation menu on the left, and additional content like advertisements on the right.
Basic Three-Column Layout Structure
Tables provide a simple way to create multi-column layouts by using table rows (<tr>) and table data cells (<td>). Each cell acts as a separate column with customizable width and styling.
Example
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width="100%" border="0">
<tr valign="top">
<td bgcolor="#aaa" width="20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor="#b5dcb3" height="200" width="60%">
Technical and Managerial Tutorials
</td>
<td bgcolor="#aaa" width="20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
</table>
</body>
</html>
Key Attributes Explained
The layout uses several important table attributes:
-
width="100%"- Makes the table span the full browser width -
border="0"- Removes visible borders between cells -
valign="top"- Aligns content to the top of each cell -
bgcolor- Sets background color for individual cells -
widthon cells - Controls column proportions (20%, 60%, 20%)
Two-Column Layout Alternative
You can create a simpler two-column layout by removing one cell:
<table width="100%" border="0">
<tr valign="top">
<td bgcolor="#f0f0f0" width="30%">
<b>Navigation</b><br />
Home<br />
About<br />
Contact
</td>
<td bgcolor="#ffffff" width="70%">
Main content area for articles and information
</td>
</tr>
</table>
Modern Alternative
While tables work for layout, modern web development prefers CSS Grid or Flexbox for better responsiveness and semantic markup. However, tables remain useful for tabular data display.
Conclusion
HTML tables provide a straightforward method for creating multi-column layouts. Use percentage-based widths for responsive design and consider modern CSS alternatives for complex layouts.
980 Views
