table属性
在一开始,使用表格布局受很多人喜爱,也就是使用<tr><td>等标签,但是这种方法越来越不推荐,甚至有人列出来了一些列使用这些标签的缺点,大体来说也就是不符合语义化,是网页加载不流畅,内容不易修改之类的,但是在table布局的{display:table-row}{display:table-cell}兴起之后,table布局又成了一种广泛的布局方式。
以行为主
这个模型假设创作人创作的标记语言会显式声明行,而列是从单元格行里推导出来的。
即:第一列是由每行的第一个单元格构成。
属性
display:table-row | table-cell | inline-table | table –row-group | table-header-group | table-footer-group | table-column |table-column-group |table-caption
inline-table:生成行内级表
table-row:生成行,相当于<tr>
table –row-group :生成行组,相当于<tbody>
table-cell:table-row 中的单元格,相当于<td>
table-caption:表的总标题,只能有一个
辅助属性
border-collapse: collapse |separate |inherit
初始值:separate
collapse:合并边框
separate:分割单元格边框
border-spacing:<length>
说明:border-collapse必须为separate,用来控制table-cell间隔长度
合并边框布局
当border-collapse为collapse时,则进行合并边框操作
单元格边框之间不允许有任何间隔、
所以边框会合并,而且合并有一套他自己的规则和优先级,
- border-style:hidden,优先级最高优先于合并所有其他边框
- none优先级最低
- 宽边框优先级大于窄边框
- 如果宽度一样,边框样式 优先级顺序:double>solid > dashed > dotted > ridge > outset > groove > inset
- 如果上述都一样,边框所处位置方面还有顺序,按照:cell > row >row group > column >column group >table 使用
给出下面一段代码
<table> <tr> <td id=r1c1>1-1</td> <td id=r1c2>1-2</td> <td id=r1c3>1-3</td> <td id=r1c4>1-4</td> </tr> <tr> <td id=r2c1>2-1</td> <td id=r2c2>2-2</td> <td id=r2c3>2-3</td> <td id=r2c4>2-4</td> </tr> <tr> <td id=r3c1>3-1</td> <td id=r3c2>3-2</td> <td id=r3c3>3-3</td> <td id=r3c4>3-4</td> </tr> <tr> <td id=r4c1>4-1</td> <td id=r4c2>4-2</td> <td id=r4c3>4-3</td> <td id=r4c4>4-4</td> </tr> </table>
table{ border-collapse:collapse; border:3px outset gray; } td{ border:1px solid gray; padding:0.5em; } #r2c1,#r2c2{ border-style:hidden; } #r1c1,#r1c4{ border-width:5px; } #r2c4{ border-style:double; border-width:3px; } #r3c4{ border-style:dotted; border-width:2px; } #r4c1{ border-bottom-style:hidden; } #r4c3{ border-top:13px solid silver; }
得出下面的图像
分析各个单元格:
2-1 2-2 4-1bottom都为hidden,优先级最高,所以其边框都为隐藏
1-1 1-4 3-3 bottom 边框比相邻框宽所以优先显示
2-4 3-4 表明了宽度一样的情况下 double > dotted
table-layout属性
table-layout:auto | fixed | inherit
初始值:auto
固定布局fixed
表格一开始就固定宽度,宽度又第一列决定
给上面的html加上下面的css
table{ table-layout:fixed; width:400px; border-collapse:collapse; border:2px outset gray; } td{ border:1px solid gray; } #r1c1{ width:200px; } #r1c2{ width:75px; } #r2c3{ width:500px; }
出现
1-1 为100px 1-2 为75px 1-3 = 1-4 =(400-200-75-7)/2=59px;
在执行完#r1c2之后,表的布局已经确立下来了,所以#r2c3是无效的。
自动布局auto
自动布局必须要对每一个单元格计算才能得到最终的布局,原则上来说速度比固定布局慢很多
规则:
- 对于每一个单元格,计算出他的最大宽度和最小宽度
- 若width值大于最小可能宽度,则此width值为最小宽度,若width为auto,则最小宽度为单元格内容宽度
- 对于每一列,计算该列的最小和最大宽度
对于上面的html,加上以下css代码
table{ table-layout:auto; width:auto; border-collapse:collapse; } col#c3{ width:25%; } td{ white-space: nowrap; border:1px solid gray; } #r1c2{ width:40%; } #r2c2{ width:50px; } #r2c3{ width:35px; } #r4c1{ width:100px; } #r4c4{ width:1px; }
出现、
来对现象做一个解释
- 对于第一列 最小宽度是4-1的宽度,其他列没有规定,所以最大值也是100;
- 对于第二列 最小宽度是2-2的50px 最大是1-2的40%
- 对于第三列 最小宽度是35px 最大是25%
- 对于第四列 最小宽度小于内容,所以最小宽度是单元格内容宽度,最大宽度也是,计算为25px
列宽如下
- 最小100px / 最大100px
- 最小50px / 最大40%
- 最小35px / 最大25%
- 最小25px / 最大25px
最后总宽度:最小宽度215px,最大371.4286px
默认取最大宽度
关于flex布局以及各种常见布局
在这两篇博客中,这两者介绍的比较详细
flex布局:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool