How to create multiple table in one page in HTML

How to Create Responsive Side-by-Side Tables Using CSS Flexbox

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 placing 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 creates 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."

The HTML Code

Here, we wrap two tables inside a single <div> container. Notice the use of standard tags like <thead>, <tbody>, and scope="col". This is crucial for web accessibility (W3C Table Guidelines) and helps search engines interpret the structure accurately.

$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, tables handled entire page layouts. Today, search engines favor semantic markup. Placing a table inside another table triggers three primary drawbacks:

Confuses Screen Readers: Visually impaired users relying on assistive technology won't be able to determine logical data flow.
Mobile Responsiveness Failures: Nested structures fail to break cleanly into vertical stacks, forcing horizontal viewport overflow.
Bloated Render Times: Redundant markup increases DOM weight, degrading overall page speed metrics.

The CSS Code

Paste this CSS directly into your stylesheet or within a <style> block inside your template. This configuration distributes tables evenly and applies a clean gap between them.

$ads={2}

/* Controls overall layout and wrapping */
.table-container {
  display: flex;
  flex-wrap: wrap; /* Enables multi-line stacking on smaller viewports */
  gap: 30px;
  justify-content: center;
  margin: 40px auto;
  max-width: 1000px;
}

/* Base table presentation */
.data-table {
  flex: 1; /* Distributes available container width evenly */
  min-width: 300px; /* Prevents cell compression past readable bounds */
  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;
}

/* Zebra striping for improved tracking */
.data-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

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

Key Takeaways

Ditch Nested Tables: Nested markup harms accessibility and complicates responsive reflow. Favor CSS-driven container mechanics.
Mobile-First Stacking: The flex-wrap: wrap; rule enables side-by-side elements to flow downward on mobile devices automatically.
Accessible Markup: Retain structural elements like <thead> alongside explicit headers (scope="col") to support screen readers.
Optimized Delivery: Clean CSS reduces dependency on heavy JavaScript frameworks and layout libraries.

Final Thoughts

Building a responsive layout doesn't require complex workarounds. By stepping away from obsolete layout hacks and adopting CSS Flexbox, your pages become easier to maintain, faster to render, and fully responsive across all viewports.

Whether you are comparing vehicle prices, presenting examination schedules, or detailing specifications, this pattern ensures complete clarity on desktops and mobile devices alike.

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