html布局之table表格布局
1.1 table布局
1、布局方式
布局方式一:使用table元素及相关元素进行布局。
布局方式二:使用与表格相关的display属性值来模拟表格进行布局。
2、两种布局方式的区别
table元素在HTML中是一个包含语义的标签,它用于描述数据。使用与表格相关的display属性值只是声明了某些元素在浏览器中的样式而不包含语义。
注意:当需要制表展示数据时,不要使用与表格相关的display属性值定义的表格。
3、匿名表格元素——CSS table布局的特性:缺少的表格元素会被浏览器以匿名的方式创建
CSS2.1规范: CSS2.1表格模型中的元素,可能不会全部包含在除HTML之外的文档语言中。这时,那些“丢失”的元素会被模拟出来,从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿table对象,使其符合table/inline-table、table-row、table-cell的三层嵌套关系。
意思是如果为某一元素使用“display:table-cell;”属性,而不将其父容器设置为“display:table-row;”属性,则浏览器会默认创建出一个表格行,就好像文档中真的存在一个被声明的表格行一样。
1.2与表格相关的display属性值
1、概述
与表格相关的display属性值使其设置的元素像表格元素那样渲染。
2、详细介绍
display:table ;使该元素按table样式渲染 。
display:table-row; 使该元素按tr样式渲染 。
display:table-cell ;使该元素按td样式渲染 。
display:table-row-group ;使该元素按tbody样式渲染 。
display:table-header-group; 使该元素按thead样式渲染 。
display:table-footer-group; 使该元素按tfoot样式渲染 。
display:table-caption; 使该元素按caption样式渲染 。
display:table-column; 使该元素按col样式渲染 。
display:table-column-group ;使该元素按colgroup样式渲染 。
1.3实例详解——三栏栅格布局
1、使用table及相关元素布局
实例:
<table class="table-one"> <tr> <td>CELL A</td> <td>CELL B</td> <td>CELL C</td> </tr> </table> 或 <table class="table-two"> <tr> <th>CELL A</th> <th>CELL B</th> <th>CELL C</th> </tr> </table>
.table-one,.table-two{ border-spacing: 0; } .table-one td,.table-two th{ width: 100px; height: 36px; border: 1px solid blue; text-align: center; }
2、使用与表格相关的display属性值布局
实例:
.container { display: table; } .row { display: table-row; } .cell { display: table-cell; width: 100px; height: 36px; border: 1px solid blue; line-height:36px; text-align:center; }
<div class="container"> <div class="row"> <div class="cell">CELL A</div> <div class="cell">CELL B</div> <div class="cell">CELL C</div> </div> </div>
以上HTML文档明确地为三个单元格定义了包含它的表格和表格行,使用到了所有创建的CSS类名。然而,可以减少这些标签,移除一行div元素试试:
<div class="row"> <div class="cell">CELL A</div> <div class="cell">CELL B</div> <div class="cell">CELL C</div> </div>
即使上面的代码遗漏了声明表格的那一行,浏览器仍将创建一个匿名的表格行。还可以移除更多的代码:
<div class="cell">CELL A</div> <div class="cell">CELL B</div> <div class="cell">CELL C</div>
以上代码遗漏了声明表格和表格行的代码,浏览器同样会创建出这些匿名的盒对象。即使缺少这些标签元素,最终的效果仍然是一样的。
3、总结
创建匿名表格元素的规则:
这些匿名的盒对象不是变出来的,也不会自动往HTML源码中添加新的标签。
如果布局中调用了匿名元素,浏览器将会根据需要创建一个匿名的盒对象并将它的CSS display属性设置为table、table-row或table-cell中的一个。 如果某个元素已经被设置为“display:table-cell;”,而它的父节点(包含它的容器)没有被设置为“display:table-row;”属性,那么浏览器将会创建一个被设置为“display:table-row;”的匿名盒对象来嵌套它。并且与之相邻的属性为“display: table-cell;”的兄弟节点也都会被这个匿名盒对象所包含,直到碰到一个没有被设置为“display: table-cell;”的元素而结束这一行。
发表评论
-
html框架之iframe和frame及frameset
2019-01-22 14:55 4103html框架之iframe和frame及f ... -
Select下拉选择框的美化
2017-11-02 17:19 3180Select下拉选择框的美化 1.1 CSS修改select下 ... -
Input元素去除获取焦点时的边框
2017-11-02 10:27 6920Input元素去除获取焦点 ... -
Input[type="radio"]和Input[type="checkbox"]的选中
2017-11-01 17:03 1566Input[type="radio"]和I ... -
Input只读属性详解
2017-11-01 16:27 1551Input只读属性详解 1.1概述 Reado ... -
input[type="file"]标签的美化
2017-11-01 15:34 1098input[type="file"]标签的 ... -
HTML实现页面自动跳的方法
2017-09-14 11:42 871HTML实现页面自动跳的方法 1.1方法一 直 ... -
html marquee标签讲解
2017-09-01 09:02 1602html marquee标签讲解 1.1概述 ... -
html路径小结
2017-08-25 09:38 553html路径小结 1.1概述 ... -
html meta标签用法详解(一)
2017-08-24 10:18 1085html meta标签用法详解(一) 1.1概述 ... -
Hack技术总结
2017-08-23 11:22 784Hack技术总结 1.1概述 ... -
HTML行内元素和块级元素的转换
2016-10-07 16:24 6210HTML行内元素和块级元素的转换 1.1 CSS displa ... -
div元素按比例缩放的实现方法
2016-09-08 17:54 16033div元素按比例缩放的实现方法 某些场景下,窗 ... -
HTML img布局问题详解
2016-09-08 16:52 1092HTML img布局问题详解 1.1 ... -
HTML中空格的实现方法详解
2016-09-08 15:15 2325HTML中空格的实现方法详解 浏览器总是会截短 ... -
RGB颜色与HEX十六进制颜色的换算
2016-09-07 20:57 1014RGB颜色与HEX十六进制颜色的换算 1.1换算表格 ... -
Web语义化详解
2016-07-21 14:51 619Web语义化详解 1.1概述 Web语义化主 ... -
DIV+CSS布局和TABLE布局详解
2016-07-21 10:53 764DIV+CSS布局和TABLE布局详 ... -
HTML引入CSS样式的方式详解
2016-07-21 10:06 1435HTML引入CSS样式的方式详解 1.1内联属性(Inlin ... -
设置input输入框为只读方法详解
2016-07-18 11:02 4883设置input输入框为只读方法详解 1.1禁用状态与启用状态 ...
相关推荐
博客引用的table布局小例子,没有办法设置为0积分,请见谅
前段时间做的表格布局。是同学老师布置的一个作业,作业要求是用DW做,我拿来写代码练手了,因为我还没有系统的学习完看起来有点乱,至少在命名规范这一方面,而且很多HTML5不在用的标签也在用,是跟着作业要求一步...
项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格的合并,即采用正行嵌套一个单独的...
Table2CSS是一款可以将表格布局网页完美转换 成DIV+CSS方式的软件。 支持外部CSS,支持网页及目录批量转换。 Table2CSS在线演示视频:(演示视频为英文版本,软件为中文版本) http://www.table2css.com/demo-video ...
但是,我们所见到的 Web 页面按照一定的规则布局排版的(通常是多列的),所以就要借助一定的方法来实现这种布局,通常的解决方案是:使用区块元素 <div> 或 表格(<table>)来布局 Web 页面的内容。 使用表格进行...
它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。 网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格...
html表格美化,创建一个布局协调、色调统一、美观、大方的表格
Table布局的缺点是比其它html标记占更多的字节,会阻挡浏览器渲染引擎的渲染顺序,会影响其内部的某些布局属性的生效,优点就是用table做表格是完全正确的
之所以拿出这个来说事,是因为看到一篇文章Tips for Authoring Fast-loading HTML Pages,提到了table-layout。 先来看看w3school上关于table-layout的介绍: 定义和用法 tableLayout 属性用来显示表格单元格、行...
Table2CSS Converter这是一个搜索引擎优化工具,转换成网页的HTML代码表tableless的CSS 。...Table2CSS是一款可以将表格布局网页完美转换成DIV+CSS方式的软件。支持外部CSS,支持网页及目录批量转换。
Tablelayout类以行和列的形式对控件进行管理,每一行为一个TableRow对象,或一个View控件。当为TableRow对象时,可在TableRow下添加子控件,默认情况下,每个子... java的swing编程和html中经常会使用到表格,可见表
什么时候会用到表格 现在,表格<table>一般不再用于网页整体的布局。...表格布局计算 使用表格很简单,但有时候表格最终为每一个格子呈现的状态,可能不是你想要的。比如说某些格子出现了换行,然后整个
1、创建一个文本文件main.html...2、使用table完成布局和表格部分设计,网页宽度设计为1170px; 3、复制文本,使用<font><b>等标记定义文本格式 4、复制网页链接地址 5、复制网页图片 hadoop.apache.org/releases.html
表格背景的设置它们的基本用法和body一样,这里不再详细介绍。Bgcolor设置背景色Background设置背景图像复杂的网页布局可能需要借助嵌套表格。但是,
本网页是利用table制作!为了文本能够更好的显示,所以采用表格布局!
表格(Table) 表格进阶(Advanced) 多窗口页面(Frames) 会移动的文字(Marquee) 多媒体页面(Alternative Inline Elements) 详细目录 页面 文件结构 语言字符集信息 背景色彩和文字色彩 页面空白 链接 开新...
***本文关键词:table-layout属性值、定义和用法、固定表格布局、自动表格布局。 1定义和用法 tableLayout属性用来显示表格单元格、行、列的算法规则。 ①该属性指定了完成表布局时所用的布局算法。 ②固定...
HTML静态网页设计作业,采用DIV+CSS布局,共有多个页面,首页使用CSS排版比较丰富,色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js,有的视频...
html-table-for-network 滨江雨网是用静态html网站做的,所有页面都采用表格布局。 它与文本、段落、图像、表格嵌套、页面之间的链接相关,是html的练习。
1.首先我自己写了一个简单的div布局。 2.实现几个用标签做的按钮的功能 分别是新增 修改 删除 查询和返回。 代码如下 html+css(原谅我写在一起吧。。毕竟渲染不是我的强项) <html> <head><...