display:table与本身的table的区别
一、为什么不用table系表格元素?
目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢?
1、用DIV+CSS编写出来的文件k数比用table写出来的要小,不信你在页面中放1000个table和1000个div比比看哪个文件大
2、table必须在页面完全加载后才显示,没有加载完毕前,table为一片空白,也就是说,需要页面完毕才显示,而div是逐行显示,不需要页面完全加载完毕,就可以一边加载一边显示
3、非表格内容用table来装,不符合标签语义化要求,不利于SEO
4、table的嵌套性太多,用DIV代码会比较简洁
二、但我想要一个表格的布局方式怎么办?
好处很多,但是有的项目中又需要类似表格的布局怎么办呢?可以用display:table来解决
display:table系列几乎是和table系的元素相对应的,请看下表:
table | (类似 <table>)此元素会作为块级表格来显示,表格前后带有换行符。 |
inline-table | (类似 <table>)此元素会作为内联表格来显示,表格前后没有换行符。 |
table-row-group | (类似 <tbody>)此元素会作为一个或多个行的分组来显示。 |
table-header-group | (类似 <thead>)此元素会作为一个或多个行的分组来显示。 |
table-footer-group | (类似 <tfoot>)此元素会作为一个或多个行的分组来显示。 |
table-row | (类似 <tr>)此元素会作为一个表格行显示。 |
table-column-group | (类似 <colgroup>)此元素会作为一个或多个列的分组来显示。 |
table-column | (类似 <col>)此元素会作为一个单元格列显示。 |
table-cell | (类似 <td> 和 <th>)此元素会作为一个表格单元格显示。 |
table-caption | (类似 <caption>)此元素会作为一个表格标题显示。 |
“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一样。使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界、背景等样式,而不会产生因为使用了table那样的制表标签所导致的语义化问题。
转载于:https://www.cnblogs.com/xiaoan0705/p/8921559.html
display:table与本身的table的区别相关推荐
- web前端入门到实战:table中cesllspacing与cellpadding的区别
table是什么?它是由一个个cell单元格构成的,在表格中,<td>的个数取决于每行中包裹的cell单元格个数!此外,默认table表格在没有添加css样式 html中常见table写法 ...
- 【数据分析师自学系列-MySQL】创建新表create table、create table as、create table like的区别
[数据分析师自学系列-MySQL]创建新表create table.create table as.create table like的区别 1.create table:基本创建新表方式 格式如下: ...
- 浅谈table布局和div布局的区别
目录 背景 table布局 div+css布局 总结: table布局和div布局的区别 背景 早期的网页布局,基本都是采用table布局的.早期的网页相对来说比较的简单,类似于报纸一样,只有文字和静 ...
- mysql table as_Mysql中create table as与like命令的区别
MySQL 是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这样就增加了速度并提高了灵活性.MySQL 所使用的 SQL 语言是用于访问数据库的最常用标准 ...
- display, visibility, overflow 三者的作用与区别
display, visibility, overflow 三者的作用与区别 display html可以将元素分类方式分为行内元素.块元素和行内块元素三种, 使用display属性能够将三者任意转换 ...
- html table表头说明,HTML table表头固定
HTML table表头固定 说说我在最近项目中碰到的css问题吧,作为问题知识集合总结笔记: table tbody { display: block; height: 200px; overflo ...
- layui table 添加img_layui中table表格的基本操作
最近抽空总结了下layui中table表格的相关配置,解释的比较全面,可供大家参考,页面效果如下: table表格.png table表格html部分: 新增 备注 编辑 table表格渲染js (包 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- Bootstrap table方法,Bootstrap table事件,配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
最新文章
- 12月第三周安全要闻回顾:浏览器安全不容忽视,SSL弱点影响网站安全
- 软件工程阅读作业感想
- 【公司金融课堂学习笔记】1、企业融资—风险投资
- 2019年秋计算机管理工作总结,年段工作总结(2019秋高一上)
- Eclipse代码注释模板
- C语言笔记(关键字)
- python语言中strike_Python学习笔记
- 编写第一个Linux环境下程序的编译,下载记录
- Lc151翻转字符串里的单词
- 远程控制-Virut蠕虫病毒(需专杀工具请三连并私信)
- 分析MP4的名人博客
- 标准 BT656 并行 数据结构 详解
- GITC2016花落上海,五大亮点抢先看
- 化学分子 降维算法umap、聚类算法hdbscan和kmeans
- ChatGPT:chatGPT本地部署、运行和接口调用
- libpython3.7m so静态库_Python3.7:加载共享库时出错:libpython3.7m.so.1.0
- freebsd SSH配置详解
- 香港城大计算机学院xutaowei,2018年3月20日学术报告(徐宏,香港城市大学)
- 《面试题》一、Java基础
- 教育部统考课程-计算机,教育部统考课程—《计算机应用基础》作业练习三.doc...
热门文章
- Java开发两年:简述jvm内存模型
- oppoJava面试!mysql客户端安装包
- i计算机网络的应用程序,计算机网络技术及其在校园网的研究与应用毕业论文.doc...
- matlab 生成连续信号,Matlab的连续信号生成及时频域分析
- Java一个月学到springboot_Java基础学习路线之SpringBoot入门
- java 二进制 归属权限_java 二进制 权限管理
- go nil json.marshal 完是null_字节跳动踩坑记#3:Go服务灵异panic
- html5 dzzxjbd cn,UEditor实现单张图片上传至腾讯云(对象存储服务)功能(html5
- linux var log管理,Linux下的syslog和/var/log
- duri oracle 连接字符串_Oracle连接字符串大全