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 group footer content in form of table using HTML?
Grouping footer content in a table format helps organize website information in a structured, readable manner. This approach is particularly useful for websites with extensive footer content such as links, contact information, and company details that need clear categorization.
Syntax
Following is the basic syntax for creating a table-based footer structure
<footer>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>
</footer>
Using HTML Table Structure
The traditional approach uses HTML table elements to create a structured footer layout. This method provides semantic organization with <thead>, <tbody>, and <tfoot> sections.
Example
Following example demonstrates a complete footer table with company information
<!DOCTYPE html>
<html>
<head>
<title>Footer Table Structure</title>
<style>
footer table {
width: 100%;
border-collapse: collapse;
background-color: #f8f9fa;
font-family: Arial, sans-serif;
}
footer th, footer td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #dee2e6;
}
footer th {
background-color: #343a40;
color: white;
font-weight: bold;
}
footer td {
vertical-align: top;
}
</style>
</head>
<body>
<main style="height: 300px; padding: 20px;">
<h1>Website Content</h1>
<p>Main page content goes here...</p>
</main>
<footer>
<table>
<thead>
<tr>
<th>About Us</th>
<th>Services</th>
<th>Contact Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>TutorialsPoint - Learning Made Easy</p>
<p>Our Mission</p>
<p>Careers</p>
</td>
<td>
<p>HTML Tutorials</p>
<p>CSS Tutorials</p>
<p>JavaScript Tutorials</p>
</td>
<td>
<p>Email: info@tutorialspoint.com</p>
<p>Phone: +1-234-567-8900</p>
<p>Address: 123 Learning St.</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: center; background-color: #343a40; color: white;">
© 2024 TutorialsPoint. All rights reserved.
</td>
</tr>
</tfoot>
</table>
</footer>
</body>
</html>
This creates a structured footer with three columns displaying company information, services, and contact details with a copyright notice at the bottom.
Using CSS Grid Layout
Modern web development often uses CSS Grid instead of HTML tables for layout purposes, as it provides better responsive design capabilities and semantic structure.
Example
Following example shows a grid-based footer that mimics table structure
<!DOCTYPE html>
<html>
<head>
<title>Footer Grid Layout</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
main { padding: 20px; height: 200px; }
footer {
background-color: #2c3e50;
color: white;
padding: 30px 20px;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.footer-section h3 {
color: #3498db;
margin-bottom: 15px;
border-bottom: 2px solid #3498db;
padding-bottom: 8px;
}
.footer-section p {
margin: 8px 0;
line-height: 1.5;
}
.footer-section a {
color: #ecf0f1;
text-decoration: none;
}
.footer-section a:hover {
color: #3498db;
}
.footer-bottom {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #34495e;
}
@media (max-width: 768px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
</style>
</head>
<body>
<main>
<h1>Website Content</h1>
<p>This is the main content area of the website.</p>
</main>
<footer>
<div class="footer-grid">
<div class="footer-section">
<h3>Quick Links</h3>
<p><a href="#">Home</a></p>
<p><a href="#">About Us</a></p>
<p><a href="#">Privacy Policy</a></p>
<p><a href="#">Terms of Service</a></p>
</div>
<div class="footer-section">
<h3>Tutorials</h3>
<p><a href="#">HTML5 Tutorial</a></p>
<p><a href="#">CSS3 Tutorial</a></p>
<p><a href="#">JavaScript Tutorial</a></p>
<p><a href="#">React Tutorial</a></p>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>? support@tutorialspoint.com</p>
<p>? +1 (555) 123-4567</p>
<p>? 123 Learning Avenue</p>
<p>Education City, EC 12345</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 TutorialsPoint. All Rights Reserved.</p>
</div>
</footer>
</body>
</html>
This grid layout provides responsive behavior, automatically stacking columns on smaller screens while maintaining the organized table-like appearance.
Dynamic Footer Content with JavaScript
JavaScript can be used to dynamically generate footer content from data arrays, making it easier to manage and update footer information programmatically.
Example
Following example creates dynamic footer sections using JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Footer Content</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
main { padding: 20px; height: 150px; }
footer {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 20px;
}
.footer-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
}
.footer-section {
flex: 1;
min-width: 200px;
margin: 10px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
backdrop-filter: blur(10px);
}
.footer-section h3 {
color: #ffd700;
margin-bottom: 15px;
}
.footer-section ul {
list-style: none;
padding: 0;
}
.footer-section li {
margin: 8px 0;
padding: 4px 0;
}
</style>
</head>
<body>
<main>
<h1>Dynamic Footer Example</h1>
<p>Footer content is generated dynamically using JavaScript.</p>
</main>
<footer>
<div id="footer-container" class="footer-container">
</div>
</footer>
<script>
const footerData = [
{
title: 'Programming',
items: ['HTML5', 'CSS3', 'JavaScript', 'Python', 'Java']
},
{
title: 'Resources',
items: ['Documentation', 'Examples', 'Code Editor', 'Compiler']
},
{
title: 'Community',
items: ['Forums', 'Blog', 'Newsletter', 'Social Media']
}
];
function createFooterSections() {
const container = document.getElementById('footer-container');
footerData.forEach(section => {
const sectionDiv = document.createElement('div');
sectionDiv.className = 'footer-section';
const title = document.createElement('h3');
title.textContent = section.title;
sectionDiv.appendChild(title);
const list = document.createElement('ul');
section.items.forEach(item => {
const listItem = document.createElement('li');
listItem.textContent = item;
list.appendChild(listItem);
});
sectionDiv.appendChild(list);
container.appendChild(sectionDiv);
});
}
// Generate footer content when page loads
window.addEventListener('DOMContentLoaded', createFooterSections);
</script>
</body>
</html>
The JavaScript dynamically creates three footer sections with different categories of links, making it easy to update content by modifying the footerData array.
Comparison of Footer Grouping Methods
Following table compares different approaches for grouping footer content
| Method | Best Use Case | Advantages | Disadvantages |
|---|---|---|---|
| HTML Table | Structured data presentation | Semantic structure, screen reader friendly | Less flexible for responsive design |
| CSS Grid | Modern responsive layouts | Flexible, responsive, easy to maintain | Limited browser support for older versions |
| Flexbox | Equal-width columns | Good browser support, flexible alignment | More complex for complex grid layouts |
| JavaScript Dynamic | Content managed programmatically | Easy to update, data-driven approach | Requires JavaScript, initial load delay |
345 Views
