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

Learn step-by-step how to build a responsive HTML table with headers and row data. Perfect for beginners looking to make mobile-friendly tables using simple HTML and CSS.

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.

🔥 Read with Full Features on Our Website

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

Google Advertisement

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

Google Advertisement

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:

Google Advertisement

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.

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

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

What You'll Learn

Step 1: Create a Basic HTML Table

Code:

Explanation:

Step 2: Add Basic CSS Styling

Code:

Explanation:

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

Code:

Explanation:

Final Responsive Table Code

How to Test Responsiveness

Bonus Tips

Conclusion

Recommended Posts

How to Toggle Dark Mode Using CSS Variables: Simple Guide with Code

How to Embed a YouTube Video in HTML Using iframe (Step-by-Step Guide)

Modern CSS Login Form UI Design Tutorial for Beginners

Simple File System Program in C for Create, Read, and Write Operations

Smart Memory Management in OS: Simulator using First Fit, Best Fit & Worst Fit

Simple Simulation of FCFS and Round Robin Scheduling in OS with Code