Table布局

<table>最常用的也是最正确的使用方法是制作表格，由于其对占据的空间有着划分的作用，便可以使用<table>来布局。

实例

实现一个简单的布局，将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用，如果布局复杂，可以在单元格中再嵌套表格，单元格中的元素或者嵌套的表格用align和valign设置对齐方式。要注意的是，在HTML5标准中，<table>的align、bgcolor、cellpadding、cellspacing、frame、rules、summary、width属性皆已不再支持，由CSS设置相关属性来呈现效果。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TABLE布局</title>

</head>

<body>

<table border="0" style="width: 100%;">

  <tr>

    <td style="width: 200px;">导航栏</td>

    <td>内容</th>

  </tr>

</table>

</body>

</html>

问题

使用<table>来布局绝对不是一个好的解决方案，对于布局方案首选Flex布局，稍微复杂的布局可以选择Grid布局方案，<table>本身是为呈现表格化的数据而设计的，如果使用<table>来呈现数据表格是完全没有问题的。

  • <table>要比其它html标记占更多的字节，代码的复杂度会大大提升。
  • <table>会阻塞浏览器渲染引擎的渲染顺序，<table>是整体载入后才开始显示的，没有加载完毕前，<table>为一片空白，而<div>等标签可以逐行渲染，一边加载一边显示。
  • <table>经常需要多个关口，因为<table>可以影响在它们之前已经进入的DOM元素的显示的元素。假设因为表格最后一个单元格的内容过宽而导致纵列大小完全改变，这会造成浏览器的回流从而引发渲染性能问题。
  • <table>里显示图片时有可能需要你把单个、有逻辑性的图片切成多个图，这个主要看需求，<table>中进行单元格合并操作也是可行的方案。
  • <table>会影响其单元格内部的某些布局属性的生效。
  • <table>的各种属性逐渐不受支持，需要使用CSS控制显示相应效果。
  • <table>的语义是数据表格，使用<table>来布局不利于SEO。
  • 若布局较为复杂，则可能造成多层<table>嵌套，代码嵌套过多表现的过于复杂。

display

倘若需要类似于表格的布局，可以使用display: table;来呈现，display的table属性值只是声明了某些元素在浏览器中的样式，其并不包含语义，他的属性基本能够对应<table>系列标签，并且还能将缺少的表格元素会被浏览器以匿名方式创建，CSS2.1规范中写道：CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table-cell的三层嵌套关系。

  • table类似<table>：此元素会作为块级表格来显示，表格前后带有换行符。
  • inline-table类似<table>：此元素会作为内联表格来显示，表格前后没有换行符。
  • table-header-group类似<thead>：此元素会作为一个或多个行的分组来显示。
  • table-footer-group类似<tfoot>：此元素会作为一个或多个行的分组来显示。
  • table-row类似<tr>：此元素会作为一个表格行显示。
  • table-row-group类似<tbody>：此元素会作为一个或多个行的分组来显示。
  • table-column类似<col>：此元素会作为一个单元格列显示。
  • table-column-group类似<colgroup>：此元素会作为一个或多个列的分组来显示。
  • table-cell类似<td>和<th>：此元素会作为一个表格单元格显示。
  • table-caption类似<caption>：此元素会作为一个表格标题显示。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.cnblogs.com/mguo/p/3414118.html

https://www.cnblogs.com/cowboybusy/p/10530547.html

https://www.html5tricks.com/why-not-table-layout.html

Table布局的更多相关文章

  1. table布局， td内部元素溢出边界问题。 （已解决）

    今天,我尝试用table布局有多个输入需要提交的页面, 为了使输入元素占满td,我对其宽度设置为100%, 结果text输入元素溢出td, 具体情况如下: 解决办法是对td样式设置为overflow: ...

  2. 日历控件table布局

    作为初学者,一开始就接触div+css ,所以说实话,我并不怎么喜欢table布局,一般逃避. 先上这次的效果图: 看到这个图,第一次用table布局没实现,原因是给tr加下边框失效.当时没找到原因, ...

  3. css table 布局

    使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...

  4. div+css与table布局

    1:速度和加载方式方面的区别 div 的加载方式是即读即加载,遇到 <div> 没有遇到 </div> 的时候一样加载 div 中的内容,读多少加载多少:table 的加载方式 ...

  5. HTML中的table布局

    <table width="100" height="50" border="1" bgcolor="blue"& ...

  6. HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 网页设计——5.table布局

    今天做一个大的页面,主要是对table布局的理解: 代码: <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" ...

  8. 关于table布局的推荐使用原因

    一.关于table布局的性能 1.table标签比其他html标签占用更多字节,导致下载时间延迟,占用服务器更多的流量资源: 2.table会阻碍浏览器渲染引擎的渲染顺序,导致页面生成的延迟,造成不良 ...

  9. html页面布局之table布局：

    table布局: table来做整体页面的布局,布局技巧归纳如下: (1)按照设计图的尺寸设置表格的宽高以及单元格的宽高 (2)将表格的border.cellpadding.cellspacing全部 ...

  10. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

随机推荐

  1. JS - HTML精确定位

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  2. [转帖]JVM随笔 --- 安全点（safe point）与 安全区域（ safe region）

    https://zhuanlan.zhihu.com/p/461298916 11 人赞同了该文章 最近回顾 JVM safe point 与 safe region 又有一些新的感悟与收获,特别写篇 ...

  3. Chrony 的学习与使用

    Chrony 的学习与使用 背景 之前捯饬 ntp 发现很麻烦, 经常容易弄错了. 昨天处理文件精确时间时 想到了时间同步. 发现只有自己总结的ntpdate 但是还没有 chronyd相关的总结 本 ...

  4. Postgresql 数据库设置备份以及简单清理磁盘空间和wal日志的方法

    1. 最近想简单的进行数据库的备份工作, 因为现在数据库主要是用的pg数据库 , 所以想到用文本的方式进行, 有清理了一下日志表的数据 这里一起记录一下. 先记录一下查看比较大的表的信息. 从网上找了 ...

  5. 查看java所有的线程信息

    最近一直有一个困惑, 不知道如何查看所有的java的线程信息. 今天看blog时发现了一个简单方法 ps -Tp $pid 就可以了 也可以使用 ps- Lfp $pid的方式 这里简单写一下统计方法 ...

  6. 当你对 redis 说你中意的女孩是 Mia

    作者:京东科技 周新智 一.Redis 众所周知,Redis = Remote Dictionary Server,即远程字典服务. 是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久 ...

  7. Android APP升级时解析程序包时出现问题

    一个新的测试机在自动下载升级安装更新版本APP时,报出"解析程序包时出现问题"错误.原因众说纷纭, 一番搜索,下面的回答比较全面: https://stackoverflow.co ...

  8. 【JS 逆向百例】webpack 改写实战，G 某游戏 RSA 加密

    关注微信公众号:K哥爬虫,QQ交流群:808574309,持续分享爬虫进阶.JS/安卓逆向等技术干货! 声明 本文章中所有内容仅供学习交流,抓包内容.敏感网址.数据接口均已做脱敏处理,严禁用于商业用途 ...

  9. wap2app下拉刷新

    支持全局刷新,支持vue项目 目前支持wap2app,uin-app全局下拉刷新 戳我阅读原文 --转载自微信公众号:酿俗

  10. ffmpeg修改文件格式

    http://ffmpeg.org/ 官网下载windows版本 进这个文件夹 随便找一个格式的文件我这里以mp4 放在这个文件夹里面 然后状态栏输入cmd 输入下方命令代码 ffmpeg -i 66 ...