2-11. 表格的属性
2017-11-09 本文已影响0人
一Left一
1、宽度和高度属性（width/height）
- 可以给table标签和td标签使用
- 表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度
- 如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
2、水平对其和垂直对其属性（align/valign）
- 其中水平对齐可以给table标签和tr标签和td标签使用
- 垂直对齐只能给tr标签和td标签使用
- 给table标签设置align属性, 可以控制表格在水平方向的对齐方式
- 给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式
- 给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式
注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐 - 给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式
- 给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式
注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐
3、单元格间距和单元格内边距属性（cellspacing/cellpadding）
- 只能给table标签使用
- 外边距就是单元格和单元格之间的距离, 我们称之为外边距
- 默认情况下单元格和单元格之间的外边距的距离是2px
- 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距
- 默认情况下内边距是1
<body>
<!--
Excel中,最常见的表格
table标签代表一个表格,复合标签
tr: table row ,表格中的一行
td: table data ,每一行中的单元格
属性:
border: 控制表格的边框,初始边框值为0,如果需要边框就要给他赋值
width: 宽度, 使用在table,和td上,如果同时设置table上的宽度,和td上的宽度,最终td的宽度就近原则
height: 高度,
使用在table上,决定整个table的高度
使用在tr上,改变当前行的所有td的高度
使用在td上,也会改变当前行所有td的高度
同时使用在tr和td上,会听tr的
cellspacing: 改变单元格之间的间距,不能够做到变成细线表格
cellpadding: 单元格和内容之间的间距
align: 水平对齐方向
取值: left, center, right
使用在table上是使得整个table在网页中变化
使用在tr上,会是当前行的单元格内容变化
使用在td上时,会使当前单元格内容变化
当同事使用在tr和tr中的td上时,就近原则
valign: 垂直方向上的对齐方式
取值:
top
middle
bottom
对table标签没有作用
使用在tr上面,使得当前tr中的td内容位置发生变化
使用在td上,当前单元格内容在垂直方向上发生变化
同时设置tr和td,遵循就近原则
注意点:
如果没有指定表格的宽高,则表格会根据内容进行调整
-->
<!--<table border="1" cellspacing="0" cellpadding="0" width="200">-->
<!--<tr align="right">-->
<!--<td align="center">账单</td>-->
<!--<td >账单</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>账单</td>-->
<!--<td>账单</td>-->
<!--</tr>-->
<!--<tr>-->
<!--<td>账单</td>-->
<!--<td>账单</td>-->
<!--</tr>-->
<!--</table>-->
<table border="1" cellspacing="0" cellpadding="0" width="200" height="200" >
<tr valign="bottom">
<td valign="top">账单</td>
<td >账单</td>
</tr>
<tr>
<td>账单</td>
<td>账单</td>
</tr>
<tr>
<td>账单</td>
<td>账单</td>
</tr>
</table>
</body>
图片.png
http://www.w3school.com.cn/html/html_tables.asp
http://www.w3school.com.cn/tags/tag_table.asp
