How to Create Responsive Tables using CSS without <table> Tag
https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/
Data representation is a crucial part on any website. If you have or manage a lot of data, but do not have a proper way to represent it, then it won’t be understood by anyone, and is of no value.
In most cases, tabular representation is an important type of data representation. Especially when it concerns statistical data.
In web design, tables are conventionally created using <table></table> tags. Creating a table is a bit of a challenging task, especially when the concern is making it responsive. And if you’re a WordPress developer then you might know, that many themes do not support responsive tables. Styling the tables is a challenge too, and there isn’t much option.
So, how can we overcome this problem? It’s very simple.
No, the solution is not JS..
You might be thinking that we need a jQuery plugin or JavaScript plugin to solve this issue. But it is not so. You do not need to install any plugin or additional framework. You can simply do this using the HTML <div> tag and some CSS styling.
Amazed?! Confused?! Don’t be! 😀
By the end of this article, you will be a master in creating good responsive HTML tables! I’ll guide you through the whole process.
So, it’s all about CSS?
Yes.
Using only CSS we can achieve this because of a special property provided. This styling is not used frequently used and hence many developers might not know about the same. We can use the display property and provide a width for all our divs to make them look like a table automatically.
How to use the ‘display’ property to represent a table?
The below table gives you the relation between a ‘table‘ tag and the corresponding supported CSS property to represent the same element. So, when creating a table, all you need to do is, instead of the HTML ‘table‘ tag, merely use the ‘div‘ tag and add the corresponding CSS to display a table.
| <table> | {display:table} |
| <tr> | {display: table-row} |
| <thead> | {display: table-header-group} |
| <tbody> | {display: table-row-group} |
| <tfoot> | {display: table-footer-group} |
| <col> | {display: table-column} |
| <colgroup> | {display: table-column-group} |
| <td>, <th> | {display: table-cell} |
| <caption> | {display: table-caption} |
Here’s an example to walk you through the process of creating a table.
Let’s begin.
Basically, a table has 3 primary parts namely the table header, table body and table footer. So first of all, let’s create a master div i.e. the main table div in which we will create a table.
Note: For the below steps, you need to add the HTML code in your template or a page on your website and the CSS code should be added in your theme’s style.css file.
Step 1: Create Master Div for the Table
| HTML code | CSS code |
| <div id=“resp-table”> </div> |
#resp-table { width: 100%; display: table; } |
Step 2: Add a Table Caption
| HTML code | CSS code |
| <div id=“resp-table-caption”> Responsive Table without Table tag </div> |
#resp-table-caption{ display: table-caption; text-align: center; font-size: 30px; font-weight: bold; } |
Step 3: Create a Table Header Row
| HTML code | CSS code |
| <div id=“resp-table-header”></div> | #resp-table-header{ display: table-header-group; background-color: gray; font-weight: bold; font-size: 25px; } |
Step 4: Add Table Header Cells
| HTML code | CSS code |
| <div class=“table-header-cell”> Header 1 </div> <div class=“table-header-cell”> Header 2 </div> <div class=“table-header-cell”> Header 3 </div> <div class=“table-header-cell”> Header 4 </div> <div class=“table-header-cell”> Header 5 </div> |
.table-header-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
Step 5: Create the Table Body
| HTML code | CSS code |
| <div id=“resp-table-body”> </div> |
#resp-table-body{ display: table-row-group; } |
Step 6: Create Table Rows
| HTML code | CSS code |
| <div class=“resp-table-row”> </div> |
.resp-table-row{ display: table-row; } |
Duplicate these rows as many times as you need to create a table as desired.
Step 7: Create Table Cells in the Rows
| HTML code | CSS code |
| <div class=“table-body-cell”> Cell 1–1 </div> <div class=“table-body-cell”> Cell 1–2 </div> <div class=“table-body-cell”> Cell 1–3 </div> <div class=“table-body-cell”> Cell 1–4 </div> <div class=“table-body-cell”> Cell 1–5 </div> |
.table-body-cell{ display: table-cell; } |
Copy these cells in each row you’ve created.
Step 8: Create the Table Footer
| HTML code | CSS code |
| <div id=“resp-table-footer”> </div> |
#resp-table-footer { display: table-footer-group; background-color: gray; font-weight: bold; font-size: 25px; color: rgba(255, 255, 255, 0.45); } |
Step 9: Add Footer Cells
| HTML code | CSS code |
| <div class=“table-footer-cell”> Footer 1 </div> <div class=“table-footer-cell”> Footer 2 </div> <div class=“table-footer-cell”> Footer 3 </div> <div class=“table-footer-cell”> Footer 4 </div> <div class=“table-footer-cell”> Footer 5 </div> |
.table-footer-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
Once again, create as many cells as needed.
Time to Test
Now, you can check your code template by opening the HTML page in a browser. The result should be something around the lines of this:
What about responsiveness?
Now, you may be thinking how to make this table responsive?! But guys! You’ve already made the table responsive!
Don’t believe it?! Just check the responsiveness of the same page using developer tools or by resizing the window. Amazed?
All this is possible because of the ‘display’ properties you used. Intrinsically these properties are responsive. You just need to apply them properly. Rest all is taken care of by the browser and your stylesheet. 🙂
So go ahead, create tables and share your views with us. We’d like to see the tables you’ve created!
