How to Create Responsive Tables using CSS wit…
2020-04-30 16:01:34来源:博客园 阅读 ()
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!
原文链接:https://www.cnblogs.com/kungfupanda/p/12806464.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- How to use special characters in XML? 2019-11-23
- Html5知识点 2019-03-13
- css:Media Queries: How to target desktop, tablet and mob 2018-08-17
- react create-react-app 怎么添加sass 2018-07-09
- 【转】浏览器的渲染原理 2018-06-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash