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

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!

🧩 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.

🔥 Read with Full Features on Our Website

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
Google Advertisement

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.
Google Advertisement

<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.
Google Advertisement

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.

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

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

📌 What You’ll Learn:

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

✅ Step 1: Basic HTML Table Structure

🧠 Explanation:

🎯 Step 2: Style the Table with CSS

🧠 Explanation:

📱 Step 3: Make the Table Responsive

🧠 Explanation:

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

🧠 Explanation:

✅ Final Complete Code (HTML + CSS)

🎉 Conclusion

Recommended Posts

How to Create a Splash Screen in Flutter using Timer and Navigator

Simple Flutter Login UI with TextField and Button – Step-by-Step Guide

Simple Flutter Counter App Tutorial Using setState() for Beginners

How to Create a Beautiful HTML Image Gallery with <figure> and <figcaption>