表格
1、表格常用属性
1、边距属性：padding
2、尺寸属性:width,height
3、文本、字体属性
4、背景属性：background …
5、边框属性: border
6、垂直方向对齐：vertical-align
取值：top/middle/bottom
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中
td
{
text-align:right;
}
vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐
td
{
height:50px;
vertical-align:bottom;
}
2、表格特有属性
1、边框合并
属性：border-collapse
取值：
1、separate
默认值，分离边框模式
2、collapse
合并
2、边框边距
属性：border-spacing
作用：控制相邻单元格之间的距离
取值：
1个值：水平和垂直间距相同
2个值：第1个值表示水平间距，第2个值表示垂直间距。两个值之间用空格隔开
注意：border-collpase的值必须为 separate时才能设置边框边距
3、标题位置
标题：
默认位置：表格上方水平居中
属性：caption-side
取值：
1、top ：默认值
2、bottom : 标题位于表格之下
2、bottom : 标题位于表格之下
4、显示规则
作用：如何去布局一个表格,指定了表格显示单元格，行的算法规则, 又称为 表格布局
属性：table-layout
取值：
1、auto ：自动，自动表格布局(默认值)
列宽度是由内容来决定的
2、fixed ：固定，固定表格布局
列宽度有表格以及单元格所设定好的数据为主
auto与fixed的区别：
1、自动表格布局
1、单元格大小会适应内容
2、表格复杂时会比较慢
3、适用于不确定每列大小时使用
4、自定布局算法较慢，但是能反映传统的HTML表格
2、固定表格布局
1、列宽度取决于表格的宽度，列的宽度
2、会加速显示表格
3、固定表格布局算法比较快，但不够灵活
折叠边框：
border-collapse 属性设置是否将表格边框折叠为单一边框
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
实例：
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style type="text/css">
table {
border-collapse:collapse;
width:600px;
margin-bottom: 0px;
margin-top: 0px;
margin-right:auto;
margin-left: auto;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<caption>纵向表格</caption>
<tr>
<td>姓名</td>
<td>常梦丽</td>
</tr>
<tr>
<td>电话</td>
<td>123</td>
</tr>
<tr>
<td>性别</td>
<td>女</td>
</tr>
<table border="1">
<caption>横向表格</caption>
<tr>
<td>姓名</td>
<td>电话</td>
<td>性别</td>
</tr>
<tr>
<td>常梦丽</td>
<td>123</td>
<td>女</td>
</tr>
</table>
</body>
</html>
4638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
