CSS Tables Design: In web development, tables are indispensable for organizing and presenting data with precision. Whether you’re building a data-packed dashboard, showcasing products on an e-commerce site, or displaying a pricing comparison, the design of your tables holds the key to an enhanced user experience.
This article is your guide to best practices in CSS table design, aiming to empower you to craft tables that are not only visually appealing but also responsive and user-friendly across various web projects.
CSS Table Examples with code
Now, You will get the best UI of Tables Template using HTML & CSS that will be very useful for your projects. So, You can use the given table code in your web application to create a user-friendly & attractive table.
We have provided HTML code to create a table with headers (first, Lastname, Gender, City) and some rows of data and also provide different CSS codes according to the types of table design. All Are shares separately one by one so, that you can easily get according to your project needs.
Simple Table
A simple HTML table consists of rows and columns created using the <table>, <tr>, <th>, and <td> tags to organize and display data on a webpage.
This HTML code creates a simple table.
<div class="simple-table">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>Peter</td>
<td>Griffin</td>
</tr>
</tbody>
</table>
</div>This CSS code creates a design of simple table.
.simple-table td, .simple-table th {
border: 1px solid;
padding: 5px;
text-align: left;
}
.simple-table table {
width: 100%;
}Border Table –
A bordered table is a structured arrangement of data with visible borders around each cell, enhancing the visual distinction between rows and columns.
This HTML code creates a bordered table
<div class="border-table">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>This CSS code designs the bordered table.
.border-table td, .border-table th {
border: 1px solid;
padding: 5px;
text-align: left;
}
.border-table table {
width: 100%;
border-collapse: collapse;
}Borderless table
A borderless table is a structured grid of information without visible lines or edges around each cell, creating a clean and seamless appearance with no distinct borders between rows and columns.
This HTML code creates a borderless table
<div class="borderless-table">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>This CSS code designs a borderless table.
.borderless-table td, .borderless-table th {
padding: 5px;
text-align: left;
}
.borderless-table table {
width: 100%;
border-collapse: collapse;
}
Horizontal Dividers Table
A table with horizontal dividers features visible lines or separators only between rows, enhancing the readability and organization of the information presented in a tabular format.
This HTML code creates a table with horizontal divideres
<div class="horizontal-dividers">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>This CSS code design a table with horizontal dividers
.horizontal-dividers td, .horizontal-dividers th {
padding: 15px 15px 5px 15px;
text-align: left;
border-bottom: 1px solid lightgray;
}
.horizontal-dividers table {
width: 100%;
border-collapse: collapse;
}Vertical Dividers Table
A table with vertical dividers features visible lines or separators only between columns, aiding in the clarity and organization of data presented in a tabular format.
This HTML Table creates a table with vertical dividers
.vertical-dividers td, .vertical-dividers th {
padding: 15px 15px 5px 15px;
text-align: left;
border-left: 1px solid lightgray;
}
.vertical-dividers td:first-child, .vertical-dividers th:first-child{
border-left: none;
}
.vertical-dividers table {
width: 100%;
border-collapse: collapse;
}This CSS code designs a table with vertical dividers
<div class="vertical-dividers">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>Zebra Striped Table
A zebra-striped table is a design technique where alternating rows in a table are given different background colors, creating a visually distinctive pattern that resembles the stripes of a zebra. This improves readability and helps distinguish between rows in large sets of data.
This CSS code designs a zebra striped table
.striped-table th{
background-color: #0170b5;
color: white;
}
.striped-table tr:nth-child(even){
background-color: #f2f2f2;
}
.striped-table td, .striped-table th {
padding: 10px;
text-align: left;
}
.striped-table td:first-child, .striped-table th:first-child{
border-left: none;
}
.striped-table table {
width: 100%;
border-collapse: collapse;
}
This HTML code creates a zebra striped table
<div class="striped-table">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>Sticky Header Table
A sticky header table is a user interface design feature where the header row of a table remains fixed or “sticks” at the top of the page or viewport as the user scrolls down, providing continuous visibility to column labels and facilitating easier data interpretation.
This HTML code creates a table with a sticky header
<div class="sticky-header">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr> <tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>
This CSS code designs a table with a sticky header
.sticky-header thead tr:first-child{
background-color: #0170b5;
color: white;
position:sticky;
top:0px;
}
.sticky-header td, .sticky-header th {
padding: 10px;
text-align: left;
border: 1px solid lightgray;
}
.sticky-header td:first-child{
bordwer-
}
.sticky-header table {
width: 100%;
border-collapse: collapse;
height: 10px;
overflow-y:auto;
}
.sticky-header {
width: 100%;
border-collapse: collapse;
height: 250px;
overflow-y:auto;
}Vertical Header Table
A vertical header table is a design layout where the header labels for columns are presented vertically along the side of the table, rather than horizontally at the top. This format is useful when dealing with tables with a large number of columns, as it helps conserve horizontal space while maintaining clear labeling
This HTML code creates a table with a vertical header
<div class="vertical-header">
<table>
<tbody>
<tr>
<th>Name</th>
<td>Kunal Singh</td>
</tr>
<tr>
<th>Gender</th>
<td>Male</td>
</tr>
<tr>
<th>City</th>
<td>Patna</td>
</tr>
</tbody>
</table>
</div>This HTML code designs a table with a vertical header
.vertical-header td, .vertical-header th {
padding: 10px;
text-align: left;
border: 1px solid lightgray;
}
.vertical-header table {
width: 100%;
border-collapse: collapse;
}
Dark Table
A dark table typically refers to a user interface design where the background color of the table, or the entire interface, is dark or has a dark theme. This can provide a modern and visually appealing look, with lighter text and elements contrasting against the darker background for enhanced readability and aesthetics.
This HTML code creates a structure of a dark table
<div class="dark-table">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>This CSS code designs to make dark table
background-color: black;
}
.dark-table tr:nth-child(even){
background-color:#2c3034;
}
.dark-table td, .dark-table th {
padding: 10px;
text-align: left;
border: 1px solid lightgray;
}
.dark-table table {
width: 100%;
border-collapse: collapse;
background-color: #32383e;
color:white;
}
Hoverable Table
A hoverable table is a user interface feature where table rows or cells change their appearance (such as color or highlighting) when a user hovers the mouse pointer over them. This interactive design provides visual feedback to users, indicating the element they are pointing to and adding a dynamic aspect to the table interface.
This HTML code creates a structure of a hoverable table.
<div class="hoverable-table">
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amit</td>
<td>Singh</td>
<td>Male</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Kunal</td>
<td>Kumar</td>
<td>Male</td>
<td>Patna</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
<tr>
<td>Monika</td>
<td>Kumari</td>
<td>Female</td>
<td>Jaipur</td>
</tr>
</tbody>
</table>
</div>This CSS code designs to make a hoverable table
.hoverable-table tr:hover{
background-color: #f4f4f4;
}
.hoverable-table th{
background-color: lightgray;
}
.hoverable-table td, .hoverable-table th {
padding: 10px;
text-align: left;
border: 1px solid lightgray;
}
.hoverable-table table {
width: 100%;
border-collapse: collapse;
}