How to Create a Fully Responsive HTML Table with Headers and Rows

By Vandu
May 3, 2025

Follow us on

Learn step-by-step how to build a responsive HTML table with column headers and row data using clean code and modern design practices. Perfect for beginners!

How to Create a Fully Responsive HTML Table with Headers and Rows

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

Tables are essential for organizing data in web pages. But traditional tables can break on small screens like mobile devices. In this tutorial, you'll learn how to build a responsive table in HTML that adjusts beautifully across all screen sizes.

Let’s dive in with clear steps and code examples — perfect for beginners!

📌 What You’ll Learn:

  • How to create a table using HTML

  • Add column headers and row data

  • Make the table responsive using CSS

  • Test it on different screen sizes

🛠️ Step-by-Step: Creating a Basic HTML Table

✅ Step 1: Basic HTML Table Structure

Start by creating a simple table using HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Table</title>
</head>
<body>

  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>24</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>30</td>
        <td>Los Angeles</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

🧠 Explanation:

  • <table> is the main tag for creating a table.

  • <thead> contains the column headers.

  • <tbody> contains the row data.

  • <tr> is a table row.

  • <th> defines a header cell.

  • <td> defines a regular data cell.

🎯 Step 2: Style the Table with CSS

Now let's add some basic CSS to make the table look nice and readable.

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

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

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

🧠 Explanation:

  • width: 100% makes the table expand to the full container width.

  • border-collapse: collapse removes spacing between table borders.

  • padding and text-align improve readability.

  • thead background helps distinguish headers.

📱 Step 3: Make the Table Responsive

Let’s now make the table mobile-friendly using CSS.

<style>
  @media (max-width: 600px) {
    table, thead, tbody, th, td, tr {
      display: block;
    }

    thead {
      display: none; /* Hide headers */
    }

    tr {
      margin-bottom: 15px;
    }

    td {
      position: relative;
      padding-left: 50%;
    }

    td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      top: 12px;
      font-weight: bold;
    }
  }
</style>

🧠 Explanation:

  • @media targets small screen devices (max 600px).

  • display: block transforms table rows and cells into block elements.

  • thead is hidden since we’ll show headers in each td using ::before.

  • data-label is used to show the column name in each cell for small screens.

📋 Step 4: Add data-label to Each Table Cell

Now modify your HTML table like this:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Alice</td>
      <td data-label="Age">24</td>
      <td data-label="City">New York</td>
    </tr>
    <tr>
      <td data-label="Name">Bob</td>
      <td data-label="Age">30</td>
      <td data-label="City">Los Angeles</td>
    </tr>
  </tbody>
</table>

🧠 Explanation:

  • The data-label="ColumnName" is custom data used to show the heading text next to the value on small screens.

✅ Final Complete Code (HTML + CSS)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table Example</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }

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

    thead {
      background-color: #f4f4f4;
    }

    @media (max-width: 600px) {
      table, thead, tbody, th, td, tr {
        display: block;
      }

      thead {
        display: none;
      }

      tr {
        margin-bottom: 15px;
      }

      td {
        position: relative;
        padding-left: 50%;
      }

      td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 12px;
        font-weight: bold;
      }
    }
  </style>
</head>
<body>

  <h2>Responsive Table with Headers and Rows</h2>

  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Name">Alice</td>
        <td data-label="Age">24</td>
        <td data-label="City">New York</td>
      </tr>
      <tr>
        <td data-label="Name">Bob</td>
        <td data-label="Age">30</td>
        <td data-label="City">Los Angeles</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

🎉 Conclusion

Now you’ve learned how to create a responsive table with headers and rows using only HTML and CSS. This approach works great on both desktop and mobile, and is easy to implement on any website.

TOPICS MENTIONED IN THIS ARTICLE

responsive HTML table
HTML table with headers
responsive design in HTML
build table in HTML
HTML table example
Subscribe to our Newsletter!

Thank you for visiting! Enjoy exploring our diverse collection of blogs, crafted with passion and insight to inspire and inform. Happy reading!

© 2025 Pay18News. All rights reserved.
Developed by Keynate