The quickest way to create responsive tables is by using CSS and <div> tag. Creating responsive tables using CSS without the traditional <table> tag can enhance the flexibility and design of your To attract potential customers it is crucial that your data is well-represented and optimized on your website.
web pages. By utilizing CSS properties effectively, you can achieve visually appealing and functional tables that adapt well to different screen sizes.
To attract potential customers it is crucial that your data is well-represented and optimized on your website.
Data representation helps manage and present your information in an organized manner that is easy for your audience to understand. One such essential form of data representation is tabular representation, mainly used for statistical data.
In web design and Ruby on Rails development, tables are conventionally created using<table> </table> tags.
Creating a table using a traditional table is a bit challenging task, especially when the concern is making it responsive as many themes do not support responsive tables. Other problems that might occur with Traditional HTML tables are:
- Fixed column widths, making it hard for them to fit on smaller screens creating mobile unresponsiveness.
- By default, tables do not automatically wrap content well, but CSS properties like word-wrap can help.
- Standard tables lack built-in responsiveness, often requires additional CSS for responsiveness , though JavaScript can enhance interactivity.
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. Although times are changing, table builder plugins like TableKit are helping solve these issues by making responsive, well-styled tables much easier to build in WordPress without relying heavily on custom code. So, these plugins are also worth exploring now.
So what to do?
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.
With CSS styling, you can use the display property and provide a width for all our divs to make them look like a table automatically.
In this blog we will be discussing the following topics:
- Why to use CSS Div Tags
- Step-by-Step Guide for creating Responsive Tables
- Comparison Chart
Why Use CSS Div Tags for Responsive Tables?
Using CSS div tags instead of traditional HTML tables offers several benefits:
- Better responsiveness: Div tags adapt seamlessly to different screen sizes.
- Easier customization: CSS allows for more flexible styling.
- Improved mobile compatibility: Div-based tables work well on smartphones and tablets.
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.
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 to your theme’s style.css file.
Step-by-Step Guide to Creating Responsive Tables
Step 1: Create a Master Div for the Div 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; } |
Does this feel overwhelming? Let our WordPress experts help make better, more responsive tables. Get In Touch
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 often as needed 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.
Short on time? Let our WordPress core contributors help make changes quickly! Get In Touch
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 along 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!
Comparison Chart: <table> vs. <div>-Based Tables
| Feature | <table> | <div>-Based (CSS) |
| Semantic Meaning | Semantically correct for tabular data. | Lacks inherent semantic meaning; requires ARIA. |
| Flexibility | Less flexible for complex layouts. | More flexible for complex and non-tabular layouts. |
| Styling | Less flexible styling; requires extra effort for advanced design. | Highly stylable with full CSS control. |
| Responsiveness | Can be made responsive but often complex and requires extra styling | Easier to make responsive using flexbox or grid. |
| Accessibility | Built-in accessibility features. | Requires ARIA attributes for accessibility. |
If you feel stuck at any point or need professional help with customizing your WordPress website, get in touch with us. One of our WordPress experts will get on a call with you to help you on priority.
FAQs About Responsive Tables
- Why use CSS div tags instead of HTML tables?
CSS div tags offer better flexibility and responsiveness compared to traditional HTML tables. - Can I use CSS grid for responsive tables?
Yes, CSS grid is another great option for creating responsive layouts. - How do I test my tables for responsiveness?
Use browser developer tools to simulate different screen sizes and test your tables.
