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
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
Join the conversation! Your thoughts help the community grow.