How to Create a Mobile-Friendly HTML Table with Headers and Rows

Build a Responsive Table with Column Headers and Row Data in HTML

Tables are a great way to display data in rows and columns, especially for reports, lists, or product inventories. However, a common problem with traditional HTML tables is they don’t look good on mobile devices.

In this tutorial, we’ll show you how to build a responsive HTML table that adapts to small screens. We’ll go through step-by-step with code and explanations so even if you're new to HTML and CSS, you'll easily understand it.

What You'll Learn

How to create a basic table using HTML
How to add headers and row data
How to use CSS to make the table responsive
How to test the responsiveness

Step 1: Create a Basic HTML Table

Let’s start with a simple HTML table with headers and some row data.

Code:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
    <tr>
      <td>Charlie</td>
      <td>28</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

Explanation:

<table>: Starts the table.
<thead>: Holds the header row.
<tr>: Table row.
<th>: Table header cell (bold and centered by default).
<tbody>: Contains the actual data rows.
<td>: Table data cell (normal text).

Step 2: Add Basic CSS Styling

This makes the table look cleaner and more readable.

Code:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1rem;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
  }

  thead {
    background-color: #f2f2f2;
  }
</style>

Explanation:

width: 100%: Makes the table stretch to fit its container.
border-collapse: collapse: Removes space between borders.
padding: Adds space inside each cell.
background-color: Highlights the header row.

Step 3: Make the Table Responsive (Mobile-Friendly)

Tables don’t scroll well on small screens, so we’ll wrap it in a container with overflow-x: auto.

Code:

You can also write this using CSS:

Explanation:

overflow-x: auto: Adds a horizontal scrollbar if the table is wider than the screen.
.table-responsive: A class to apply responsive behavior with CSS.

Final Responsive Table Code

Here’s the full HTML + CSS code you can copy and use directly:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive HTML Table</title>
  <style>
    .table-responsive {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
      font-size: 1rem;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 12px;
      text-align: left;
    }

    thead {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

  <h2>Responsive Table Example</h2>

  <div class="table-responsive">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>New York</td>
        </tr>
        <tr>
          <td>Bob</td>
          <td>30</td>
          <td>Los Angeles</td>
        </tr>
        <tr>
          <td>Charlie</td>
          <td>28</td>
          <td>Chicago</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>
</html>

How to Test Responsiveness

Open the page in a browser.
Resize the browser window or open it on a mobile device.
If the screen is too small, the table will scroll horizontally instead of breaking layout.

Bonus Tips

You can make the table more attractive using media queries for different screen sizes.
Use frameworks like Bootstrap if you want advanced responsive tables without much code.
Avoid too many columns — they can be hard to scroll on phones.

Conclusion

Building a responsive HTML table is not as hard as it seems. With just a few lines of HTML and CSS, you can create a clean and mobile-friendly table for any kind of data.