Hey everybody, I hope you are fine, today we are going to learn how to Make a Responsive Table in HTML and CSS. There are many websites or web applications that have been using tables to display the content. However many newbies or beginners face problems creating a responsive table using HTML and CSS3.
In today’s web development landscape, responsiveness is a key consideration when designing web pages. Ensuring that your content adapts to different screen sizes is crucial for providing a seamless user experience.
One common element that often requires responsive design is tables. In this article, we’ll explore how to create a responsive table using HTML and CSS, without diving into specific lines of code.
How to Make Responsive Table in HTML AND CSS
Before moving the codes, you should watch the video that I made, inside you can learn step-by-step usage of HTML and CSS to create a responsive table from scratch. However, you can get the source code below.
I hope you’ve watched the complete tutorial, hope you’ve learned something new from it. Once you learned it, you can implement the logic in your project to display the responsive table.
You May Also Like:
- How to Create An Admin Dashboard in HTML and CSS
- Responsive Header Design in HTML and CSS
- Sticky Navbar Using HTML CSS And JavaScript
- Responsive Footer Design Using HTML and CSS
- How to Make Progress Bar in HTML and CSS
Structuring Your Table
The foundation of creating a responsive table lies in the HTML structure. To begin, you should use standard HTML elements such as <table>, <thead>, <tbody>, <th>, and <td> to organize your tabular data. The <table> element encapsulates the entire table, and within it, you have the following sections:
<thead>: This is where you define the table’s header row(s) using<th>elements.<tbody>: This section contains the main content of the table, and it’s where you list your data using<td>elements.
<!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 Using HTML and CSS</title>
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
</head>
<body>
<div class="container">
<div class="tbl_content">
<h2>Responsive Table Using HTML and CSS</h2>
<table class="tbl">
<thead>
<tr>
<th>User ID</th>
<th>User Name</th>
<th>User Email</th>
<th>Status</th>
<th colspan="2">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="User Id">0001</td>
<td data-label="Name">John Doe</td>
<td data-label="Email">[email protected]</td>
<td data-label="Status">Active</td>
<td data-label="Edit">
<button class="btn_edit"><i class="fa fa-pencil"></i></button>
</td>
<td data-label="Delete">
<button class="btn_trash"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr>
<td data-label="User Id">0002</td>
<td data-label="Name">Simith Thoa</td>
<td data-label="Email">[email protected]</td>
<td data-label="Status">Pending</td>
<td data-label="Edit">
<button class="btn_edit"><i class="fa fa-pencil"></i></button>
</td>
<td data-label="Delete">
<button class="btn_trash"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr>
<td data-label="User Id">0003</td>
<td data-label="Name">Stephen Joy</td>
<td data-label="Email">[email protected]</td>
<td data-label="Status">Pending</td>
<td data-label="Edit">
<button class="btn_edit"><i class="fa fa-pencil"></i></button>
</td>
<td data-label="Delete">
<button class="btn_trash"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr>
<td data-label="User Id">0004</td>
<td data-label="Name">Jason Roy</td>
<td data-label="Email">[email protected]</td>
<td data-label="Status">Active</td>
<td data-label="Edit">
<button class="btn_edit"><i class="fa fa-pencil"></i></button>
</td>
<td data-label="Delete">
<button class="btn_trash"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr>
<td data-label="User Id">0005</td>
<td data-label="Name">Willimas Poe</td>
<td data-label="Email">[email protected]</td>
<td data-label="Status">Active</td>
<td data-label="Edit">
<button class="btn_edit"><i class="fa fa-pencil"></i></button>
</td>
<td data-label="Delete">
<button class="btn_trash"><i class="fa fa-trash"></i></button>
</td>
</tr>
<tr>
<td data-label="User Id">0006</td>
<td data-label="Name">Kevin Thomas</td>
<td data-label="Email">[email protected]</td>
<td data-label="Status">Active</td>
<td data-label="Edit">
<button class="btn_edit"><i class="fa fa-pencil"></i></button>
</td>
<td data-label="Delete">
<button class="btn_trash"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Applying Basic Styling
A well-structured table should also be visually appealing. You can use CSS (Cascading Style Sheets) to style your table. Basic styling can include defining fonts, colors, borders, and padding for the table cells (<th> and <td>). You can set a background color for the <thead> section to distinguish it from the body of the table, making it more readable.
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container {
max-width: 1440px;
width: 100%;
background: #fff;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
.container h2 {
padding: 2rem 1rem;
text-align: center;
/* background: #e74c3c; */
/* color: #fff; */
font-size: 2.5rem;
}
.tbl {
width: 100%;
border-collapse: collapse;
}
.tbl thead {
background: #424949;
color: #fff;
}
.tbl thead tr th {
font-size: 0.9rem;
padding: 0.8rem;
letter-spacing: 0.2rem;
vertical-align: top;
border: 1px solid #aab7b8;
}
.tbl tbody tr td {
font-size: 1rem;
letter-spacing: 0.2rem;
font-weight: normal;
text-align: center;
border: 1px solid #aab7b8;
padding: 0.8rem;
}
.tbl tr:nth-child(even) {
background: #ccc;
transition: all 0.3s ease-in;
cursor: pointer;
}
.tbl tr:hover td {
background: #839192;
color: #000;
transition: all 0.3s ease-in;
cursor: pointer;
}
.tbl button {
display: inline-block;
border: none;
margin: 0 auto;
padding: 0.4rem;
border-radius: 1px;
outline: none;
cursor: pointer;
}
.btn_trash {
background: #e74c3c;
color: #fff;
}
.btn_edit {
color: #fff;
background: #1e8449;
}
@media (max-width: 768px) {
.tbl thead {
display: none;
}
.tbl tr,
.tbl td {
display: block;
width: 100%;
}
.tbl tr {
margin-bottom: 1rem;
}
.tbl tbody tr td {
text-align: right;
position: relative;
transition: all 0.2s ease-in;
}
.tbl td::before {
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 1.2rem;
text-align: left;
}
.tbl tbody tr td:hover {
background: #ccc;
color: #000;
}
.tbl_content {
padding: 1rem;
}
}
Handling Responsiveness
To make your table responsive, you need to address its behavior on different screen sizes. The most common approach is to use media queries in your CSS. Media queries allow you to apply specific styles when certain conditions are met, typically based on the screen’s width.
For smaller screens, you may want to change the table’s layout to ensure it remains user-friendly. One common technique is to stack rows vertically rather than displaying them side by side. To achieve this, you can use CSS to control the layout of the <th> and <td> elements. Additionally, adjusting the font size or other style attributes can help improve readability on smaller screens.
Conclusion
In summary, creating a responsive table in HTML and CSS involves three main steps: structuring the table, applying basic styling, and handling responsiveness. By adhering to these principles, you can ensure that your tables look and function well on a wide range of devices and screen sizes, ultimately providing a better user experience. Remember that responsive design is a fundamental aspect of modern web development, and understanding how to create responsive tables is a valuable skill to have in your toolkit.
