A big part of Responsive Web Design(RWD) is Responsive Tables. Responsive tables ensure that table data is displayed in a user-friendly and accessible manner across different screen sizes and devices. In this topic, you will learn about the importance of responsive tables and how to create them. Let's get started.
Tables
In this part, we will go through the basic elements of a table.
<table>— a container element that represents the entire table. It is used to group the table rows and define the structure of the table.<tr>— represents a table row. It is used to define a single row within the table. Each row contains table cells (<td>or<th>) as its child elements.<td>— stands for "table data" and represents a standard data cell within a table row. It is used to hold the actual content of the table.<th— stands for "table header" and represents a header cell within a table row. It is used to define the header or label for a column or a row. Typically,<th>elements are placed in the first row or the first column of the table.
Now that you know the basic elements of the table, let's create one.
HTML:
<!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">
<link rel="stylesheet" href="style.css">
<title>Example</title>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</body>
</html> Let's add simple styling.
CSS:
table {
border: 1px solid black;
}
th {
background-color: #f2f2f2;
font-weight: bold;
border: 1px solid black;
}
tr, td{
background-color: #f9f9f9;
border: 1px solid black;
}Output:
Keep in mind that the HTML table will shrink down on its own when you make the screen smaller. But that doesn't mean it's optimized for small screens. You can always alter it as you wish.
Responsive tables
Responsive tables in RWD are tables designed to adapt and display correctly on different screen sizes, from desktops to mobile devices. They ensure that table data remains readable and accessible, regardless of the device used. They enhance the user experience by improving data consumption and preventing information overload. Responsive tables also play a vital role in accessibility, making tabular data more usable for people with disabilities. By implementing responsive design practices, including responsive tables, websites can maintain cross-device consistency and future-proof themselves against evolving devices and screen resolutions.
Here's an example of how you can create responsive tables using HTML and CSS in RWD:
HTML:
<!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>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-responsive">
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> CSS:
.table-responsive {
overflow-x: auto;
}
.table-responsive table {
width: 100%;
border-collapse: collapse;
}
.table-responsive th,
.table-responsive td {
padding: 8px;
text-align: left;
border: black 2px solid;
}
@media (max-width: 768px) {
.table-responsive {
overflow-x: hidden;
}
}Output:
Let's break down the code and see what it means for a table to be responsive.
First, we have HTML Markup. In order to create the table structure, we used the HTML <table> element, along with <thead>, <tbody>, <th>, and <td> for table headers and cells respectively. Keep in mind that this is not what makes the table responsive, but these elements are necessary to make it responsive with the next steps. Along with HTML markup, we used appropriate classes or IDs to elements for styling purposes, in this case, table-responsive class.
Secondly, we applied CSS styling to make the table responsive. In the CSS above, overflow-x: auto on the table-responsive class ensures horizontal scrolling on smaller screens when the table exceeds the viewport width. The media query inside @media adjusts the table layout when the screen width is 600 pixels or less. In this case, overflow-x: hidden will prevent horizontal scrolling on smaller screens and the table will adjust its width to fit within the available space. Setting overflow-x to auto will create a scrollbar and make this table responsive. The table will look like this:
Conclusion
To summarize, responsive tables are a crucial component of responsive web design. They ensure that table data is presented in a user-friendly and accessible manner across various devices and screen sizes. By implementing responsive design practices, including responsive tables, websites can enhance the user experience, improve data consumption, and promote accessibility for individuals with disabilities. So let's continue exploring and implementing these techniques to build more effective and inclusive websites. Let's get down to practice.