How do I put multiple tables side by side in HTML?

The best way to align multiple tables side by side is to wrap them in a container div and use CSS Flexbox. By setting the container to 'display: flex' and 'flex-wrap: wrap', the tables will sit next to each other on desktop and neatly stack on top of each other on mobile devices.

Can I put multiple tables in one HTML page?

Yes, you can add as many HTML tables to a single page as you need. However, it is important to wrap them in a responsive CSS container rather than nesting tables inside each other to ensure the page remains mobile-friendly and accessible.

Are nested tables bad for SEO?

Yes, using nested HTML tables for layout purposes is considered bad practice today. They are difficult for screen readers to parse, load slower, and often break mobile responsiveness, all of which can negatively impact your search engine rankings.

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!

Advertisement

How to create multiple table in one page in HTML