Post
Ask Question

How To Create Responsive Tables In HTML?

Introduction

In today's digital world, where mobile devices dominate the browsing landscape, creating responsive web designs has become essential. Tables, which are commonly used to display tabular data, pose a unique challenge when it comes to responsiveness. In this article, we will explore various solutions to make tables responsive, allowing them to adapt and provide an optimal viewing experience on small screens like phones while scaling up gracefully to larger screens. Let's dive into the world of responsive tables and learn how to design them effectively using HTML and CSS.

What are tables in HTML?

Tables in HTML are used to organize and display data in a tabular format. They consist of rows (<tr>) and cells (<td>) that are organized into columns using table header cells (<th>). The <table> element is used to define the table structure, while the <caption>, <thead>, <tbody>, and <tfoot> elements can be used to provide additional information and structure to the table.

To read more about tables, refer to this article- How to create tables in HTML?

What are the different ways to create responsive tables in HTML?

There are several approaches to creating responsive tables in HTML. Let's read about some of the commonly used techniques.

Horizontal Scrolling

When dealing with tables containing a large number of columns, it may not be practical to display them all on a small screen. One solution is to enable horizontal scrolling on the table container, allowing users to scroll horizontally to view the entire table. This approach is best suited for situations where retaining the original table structure is crucial, such as complex data comparisons or analysis.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scrolling</title>
    <style>
        .table-wrapper {
            overflow-x: auto;
        }
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Creating table using Horizontal Scrolling</h1>
    <div class="table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>Classes</th>
                    <th>Class 1</th>
                    <th>Class 2</th>
                    <th>Class 3</th>
                    <th>Class 4</th>
                    <th>Class 5</th>
                    <th>Class 6</th>
                    <th>Class 7</th>
                    <th>Class 8</th>
                    <th>Class 9</th>
                    <th>Class 10</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Average attendence (%)</td>
                    <td>78</td>
                    <td>74</td>
                    <td>64</td>
                    <td>75</td>
                    <td>86</td>
                    <td>77</td>
                    <td>78</td>
                    <td>89</td>
                    <td>80</td>
                    <td>70</td>
                </tr>
                <tr>
                    <td>Average grade (%) </td>
                    <td>80</td>
                    <td>89</td>
                    <td>78</td>
                    <td>91</td>
                    <td>80</td>
                    <td>79</td>
                    <td>78</td>
                    <td>64</td>
                    <td>79</td>
                    <td>89</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Output

table

Mobile-First Approach

The mobile-first approach involves designing tables for small screens first and then progressively enhancing them for larger screens. You can start by simplifying the table layout for mobile devices, such as stacking rows vertically and removing unnecessary elements. Then, use CSS media queries to apply styles specific to different screen sizes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Table</title>
    <style>
        .responsive-table {
            width: 100%;
        }
        @media screen and (max-width: 768px) {
            .responsive-table {
                display: block;
            }
        }
        @media screen and (min-width: 768px) {
            .responsive-table {
                display: table;
            }
        }
        .responsive-table th,
        .responsive-table td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        .responsive-table th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Table using Mobile First Approach</h1>
    <table class="responsive-table">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
                <td>Data 5</td>
            </tr>
            <tr>
                <td>Data 6</td>
                <td>Data 7</td>
                <td>Data 8</td>
                <td>Data 9</td>
                <td>Data 10</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Output

table

Priority-Based Column Hiding

Another common technique is to hide certain columns on smaller screens to prioritize essential information and improve readability. Identify non-essential columns and use CSS media queries to hide them at narrower breakpoints. Consider providing alternative ways for users to access the hidden data, like expandable sections or tooltips.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Priority-based Column Hiding</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th,
        td {
            padding: 8px;
            text-align: left;
            border: 1px solid #ddd;
        }
        th.hide-on-small,
        td.hide-on-small {
            display: table-cell;
        }
        @media screen and (max-width: 768px) {
            th.hide-on-small,
            td.hide-on-small {
                display: none;
            }
        }
    </style>
</head>
<body>
    <h1>Creating table using Priority-based Column Hiding</h1>
    <table>
        <tr>
            <th>Column 1</th>
            <th class="hide-on-small">Column 2</th>
            <th class="hide-on-small">Column 3</th>
        </tr>
        <tr>
            <td>Data 1</td>
            <td class="hide-on-small">Data 2</td>
            <td class="hide-on-small">Data 3</td>
        </tr>
    </table>
</body>
</html>

Output

table

Here, the normal view of the table will be the same as in the above image. But, if we adjust the window size, it will hide other columns of the table like the below image.

table

Vertical Orientation

For tables with limited columns and more extensive content in each cell, a vertical orientation can benefit small screens. Transform the table into a list-like structure, with each row represented as a separate block and the cell data arranged vertically.

Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Table</title>
    <style>
        .vertical-table {
            list-style-type: none;
            display: flex;
            border: 1px solid #ddd;
            padding: 10px;
        }

        .vertical-table li {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            border-left: 1px solid #ddd;
        }

        .table-header {
            font-weight: bold;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>Creating table using Vertical Orientation</h1>
    <ul class="vertical-table">
        <li>
            <span class="table-header">Column 1</span>
            <span class="table-data">Data 1</span>
        </li>
        <li>
            <span class="table-header">Column 2</span>
            <span class="table-data">Data 2</span>
        </li>
        <li>
            <span class="table-header">Column 3</span>
            <span class="table-data">Data 3</span>
        </li>
    </ul>
</body>
</html>

Output

table

Collapsible Rows

Tables with a large number of rows can be overwhelming on smaller screens. Implementing collapsible rows allows users to expand and collapse sections, improving the user experience. Utilize JavaScript or CSS techniques to create collapsible rows that reveal additional details when expanded.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collapsible Rows</title>
    <style>
        .hidden-row {
            display: none;
        }

        .collapsible-row:hover {
            cursor: pointer;
            background-color: #f2f2f2;
        }

        .collapsible-row:hover .arrow {
            transform: rotate(90deg);
        }

        .arrow {
            transition: transform 0.3s ease;
        }

        .hidden-content {
            background-color: #f9f9f9;
            padding: 10px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const collapsibleRows = document.querySelectorAll(".collapsible-row");

            collapsibleRows.forEach(function (row) {
                row.addEventListener("click", function () {
                    this.nextElementSibling.classList.toggle("hidden-row");
                });
            });
        });
    </script>
</head>
<body>
    <h1>Table with Collapsible Rows</h1>
    <table>
        <tr class="collapsible-row">
            <td>Row 1</td>
            <td>Details 1<span class="arrow">▶</span></td>
        </tr>
        <tr class="hidden-row">
            <td colspan="2" class="hidden-content">Additional details for Row 1</td>
        </tr>
        <tr class="collapsible-row">
            <td>Row 2</td>
            <td>Details 2<span class="arrow">▶</span></td>
        </tr>
        <tr class="hidden-row">
            <td colspan="2" class="hidden-content">Additional details for Row 2</td>
        </tr>
    </table>
</body>
</html>

Output

table

The collapsible rows look like the above image, and when we will uncollapse it, it will look like the below image.

table

Best Practices for Responsive Table Design

Following are the best practices for responsive table design,

  • Keep the table structure simple, using semantic HTML tags for headers, data cells, and captions. Use `<th>` for table headers and `<td>` for data cells.
  • Use meaningful column and row headers to improve accessibility and facilitate understanding. Include appropriate `<caption>` and `<thead>` sections.
  •  Avoid using fixed-width values for columns, allowing the table to adapt fluidly to different screen sizes. Use relative units like percentages or `em` to allow for flexibility.
  • Ensure the table remains scannable and easy to read, even on smaller screens. Adjust font sizes, spacing, and colors for better legibility.
  • Test your responsive table design across various devices and screen sizes to ensure optimal performance. Use browser developer tools or online emulators to simulate different screen sizes and resolutions.

Conclusion

Creating responsive tables requires a thoughtful approach and a solid understanding of HTML and CSS. By implementing the discussed techniques and best practices, you can design tables that gracefully adapt to different screen sizes, providing an optimal user experience across devices. Remember to test your designs thoroughly and iterate as needed. With the code examples and knowledge gained from this article, you are well-equipped to tackle the challenge of responsive table design. By mastering responsive tables, you will enhance the usability and accessibility of your web applications, ensuring a seamless experience for users across various devices.


Similar Articles