Skip to main content

How to create multiple table in one page in HTML

Image
By

 

How to create multiple table in one page in HTML


How to create multiple table in one page in HTML

Creating multiple tables on a single webpage is a common requirement for displaying data comparisons, price lists, or technical specifications. While it might seem straightforward, achieving a layout where tables sit side-by-side while remaining mobile-responsive requires modern CSS techniques.


If you’re building a webpage and need to compare data like listing the prices of different cars side-by-side you’ll definitely need to put multiple tables on a single page.


But if you’ve ever tried this, you already know the headache. Getting  tables to align perfectly next to each other without breaking your layout on a mobile phone can be incredibly frustrating.


I remember the old days of web design when the quick fix was to "nest" tables literally putting a <table> inside the <td> of another table just to force them to sit side-by-side. If you are still doing that, please stop! It’s terrible for your website's SEO, it confuses screen readers, and it looks like an absolute mess on mobile devices.


Today, I’m going to show you the cleanest, most modern way to create multiple tables on one page using simple HTML and CSS Flexbox.

 

Read Also:

 

 


Why We Use Flexbox for HTML Tables


Search engines prioritize websites that load fast, use semantic HTML, and provide a flawless mobile experience. By using CSS Flexbox, we can create a lightweight "wrapper" around our tables.


This tells the browser: "Hey, put these tables next to each other on a desktop screen, but if the screen gets too small (like on a smartphone), neatly stack them one on top of the other."


Let’s look at the code.


The HTML Code


Here, we are wrapping two tables inside a single <div> container. Notice that I’m using standard tags like <thead> and <tbody>. This is crucial for accessibility and tells search engines exactly how your data is structured.

$ads={1} 


<div class="table-container">
  
  <table class="data-table">
    <thead>
      <tr>
        <th scope="col">Car Name</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Renault Kwid</td>
        <td>4.25L</td>
      </tr>
      <tr>
        <td>Renault Duster</td>
        <td>5.24L</td>
      </tr>
      <tr>
        <td>Renault XUV</td>
        <td>8.26L</td>
      </tr>
    </tbody>
  </table>

  <table class="data-table">
    <thead>
      <tr>
        <th scope="col">Car Name</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Maruti Suzuki XUV</td>
        <td>8.25L</td>
      </tr>
      <tr>
        <td>Maruti Suzuki Dzire</td>
        <td>12.01L</td>
      </tr>
      <tr>
        <td>Maruti Suzuki Swift</td>
        <td>13.00L</td>
      </tr>
    </tbody>
  </table>

</div>

⚠️ Why You Should Stop Using Nested Tables

Back in the early days of web design, we used tables for everything—even layouts. But today, search engines like Google look for semantic HTML. When you put a table inside another table, it creates three major problems:

  • ✖ It confuses Screen Readers: Visually impaired users won't be able to understand your data flow.
  • ✖ It’s a Mobile Disaster: Nested tables usually don't "stack," meaning your mobile users will have to scroll sideways, which is a huge "No" for SEO.
  • ✖ It’s Slow to Load: Extra tags mean extra weight and slower rendering times.

The CSS Code


Now for the magic. You can paste this CSS directly into your stylesheet or inside a <style> tag in your document’s <head>. This styling will make the tables align horizontally with a nice, clean gap between them.

$ads={2} 


/* This container controls the layout */
.table-container {
  display: flex;
  flex-wrap: wrap; /* This is what makes it mobile-responsive! */
  gap: 30px;
  justify-content: center;
  margin: 40px auto;
  max-width: 1000px;
}

/* Styling the tables to look modern and clean */
.data-table {
  flex: 1; /* Allows tables to share the space equally */
  min-width: 300px; /* Prevents tables from getting too squished */
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.data-table thead tr {
  background-color: #333333;
  color: #ffffff;
  text-align: left;
}

.data-table th, 
.data-table td {
  padding: 15px;
  border: 1px solid #dddddd;
}

/* Adds a slight background color to every other row for better readability */
.data-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

.data-table tbody tr:hover {
  background-color: #f1f1f1;
}

Key Takeaways


  • Stop Nesting Tables: Modern SEO hates tables-inside-tables. Use Flexbox containers instead.
  • Mobile-First Design: The flex-wrap: wrap property is the secret to making side-by-side tables stack vertically on smartphones.
  • Accessibility Matters: Always use <thead> and scope="col" to ensure screen readers can navigate your data correctly.
  • Performance: This CSS method is extremely lightweight, helping your Blogger page load faster compared to using heavy plugins or scripts.

Final Thoughts


Building a responsive layout doesn't have to be a struggle. By moving away from "old-school" table hacks and embracing CSS Flexbox, you’re not just making your website look better you're making it smarter.


Whether you are comparing car prices, listing exam dates, or displaying product features, this clean HTML structure ensures your data remains readable on every device. Give this code a try on your next project and see the difference in your site's professional feel!


Have questions about customizing these tables? Drop a comment below and let's discuss!


Labels:

Comments

Post a Comment

Popular posts from this blog

Contact Management System project using C with source code

By
Contact Management System (CMS)   A Contact Management System (CMS) is an essential application for organizing and managing contacts efficiently. Here's a simple implementation of a Contact Management System using C, allows users to perform operations such as adding, viewing, searching, modifying, and deleting contacts through a simple and user-friendly console interface. The CMS provides a practical demonstration of fundamental programming concepts such as arrays, structures, and string manipulation, making it an excellent project for students and beginners in C programming.   Project Overview The Contact Management System is designed to store basic information about contacts, including: Name: name of the person. Phone Number: phone number of the contact. Email Address: email address of the contact.   With this information, the program offers the following functionalities: Add New Contact...
Post a Comment
Show more »

Implementing Basic Add to Cart Functionality in Python Using Flask

By
In e-commerce websites, the "Add to Cart" feature allows users to select products they want to purchase and store them temporarily while they continue shopping. Implementing this functionality in a web application using Python and Flask is straightforward and can be done with a few simple steps.       Setting Up the Project: First, create a new directory for your project and set up a virtual environment to manage dependencies. Install Flask using pip and create three main files: `app.py`, `index.html`, and `cart.html`.   Read also:   Unlocking the Power of Free Google Tools for Seo Success Ultimate Guide: Google Search Console Crawl Reports you need to know Monitor What is dofollow backlinks: The ultimate 5 Benefit for your websites SEO Schema markup and How can you use schema markup for seo      Creating HTML Templates: Create HTML templates for displaying products (`index.html`) and the shopping cart (`cart.html`). These templates will use ...
Post a Comment
Show more »

Advanced HTML Concepts: Techniques and Examples for Modern Web Development

By
Advanced HTML goes beyond the basics of creating simple web pages, delving into powerful features and techniques that improve web interactivity, accessibility, and performance. It includes concepts such as semantic HTML, custom data attributes, responsive images with <picture> , enhanced forms, interactive content using <details> and <summary> , and embedding external resources with <iframe> .          Furthermore, advanced HTML focuses on SEO optimization through meta tags, accessibility improvements using ARIA, creating reusable Web Components, and optimizing performance with async and defer scripts.    Semantic HTML   Semantic elements clearly describe their meaning in a human- and machine-readable way.   <header> <h1>Welcome to My Website</h1> </header> <nav> <ul> <li><a href="home">Home...
Post a Comment
Show more »

Python Flask Student List CRUD System Using MySQL Database for Beginners

By
  In this tutorial, we are going to learn the python flask student list crud system using MySQL database for beginners. Before you have to learn how to python flask setting up and connect MySQL database connection and templates uses.    Read also: Python Flask tutorial Setting up a Flask and Sql Database on the create project folder you have to install two things to fetch data and flask. Here, below code to install using python terminal, and for MySQL, am using xampp software and database inside environment to turn on the apache server and MySQL database.   Read also: Python Flask with Mysql Database Import Flask and MySQL: from flask import Flask, render_template, request, redirect, url_for from flask_mysqldb import MySQL MySQL Database Connection: app = Flask(__name__) app.config['MYSQL_HOST'] = 'localhost' app.config['MYSQL_USER'] = 'root' app.config['MYSQL_PASSWORD'] = '' app.config['MYSQL_DB'] ...
2 comments
Show more »

Microdata Schema : How can Microdata schema Improve SEO with Examples

By
In this article, we will explore what microdata schema is, how it works, and provide some examples to help you better understand its importance. What is Microdata Schema? Microdata schema is a markup language that provides a standardized way of adding structured data to web pages. It uses HTML tags to describe information about the content on a web page, such as product reviews, events, recipes, and more. This makes it easier for search engines to crawl and index the content on a web page, which can help improve the visibility and ranking of the website. How Does Microdata Schema Work? Microdata schema uses a set of properties and item types to describe the content on a web page. Properties describe specific attributes of an item, while item types describe the type of item being described. For example, the property "name" might be used to describe the name of a person, while the item type "Person" would be used to indicate that the content being describ...
Post a Comment
Show more »

How to Create a Personal details information program in HTML

By
In this tutorial, we are learning how you can create a personal details information program in HTML with the simple using of HTML tags. HTML Form: <div class="container"> <h1 style="text-align:center">Personal Details</h1> <form class="form-control"> <label for="name">Name:</label><br> <input type="text" id="name" name="name"><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email"><br> <label for="dob">Date of Birth:</label><br> <input type="date" id="dob" name="dob"><br> <label for="gender">Gender:</label><br> <input type="radio" id="gender" name="gender" value="male...
Post a Comment
Show more »