css表格属性

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

一.表格

1、表格常用样式属性为：

内边距：padding

尺寸：width 、height

文本、字体格式化属性

背景属性：颜色、图片

边框:border

文本垂直对齐:

vertical-align : top / bottom / middle

2、表格特有样式属性

1、边框合并

属性:border-collapse

取值:

separate:分离边框(默认)

collapse:合并边框

2、边框边距

相当于：table中的cellspacing属性

注意：border-collapse 必须为 separate的时候才允许设置该属性

属性：border-spacing

取值：

取一个值：表示垂直和水平间距相等

取两个值：第一个值表示水平间距，第二个值垂直间距，两个值分开

3、表格标题位置：

属性：caption-side

取值：top , bottom

例如：

<!DOCTYPE html >
<head>
<title>文本格式</title>
<meta charset="utf-8" />
<style>
table{
border:2px dotted gray;
border-spacing:10px 20px;
}
td{
background-color:#f0f0f0;
width:200px;
height:50px;
border-collapse:separate;
border:1px solid black;
}
caption{
border:2px solid black;
caption-side:bottom;
}
</style>
</head>
<body>
<table>
<caption>这是标题</caption>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
</body></html>

复制代码

4、显示规则

属性：table-layout

作用：帮助浏览器如何显示或布局一张表

取值：

auto：列宽度由单元格内容决定，默认值，自动表格布局

fixed：列宽度由表格和列的宽度的来决定，固定表格布局

自动表格布局的特点：

1、单元格大小会适应内容大小

2、表格复杂是会比较慢

3、不确定列大小时

固定表格布局的特点：

1、表格、列的宽度取决于设置好的宽度

2、速度较快

<!DOCTYPE html >
<head>
<title>文本格式</title>
<meta charset="utf-8" />
<style>
table{
width:400px;
}
td{
border:1px solid black;
}
td.one{
table-layout:auto;
}
</style>
</head>
<body>
<table class="one">
<tr>
<td width="20%">100000000000000000000</td>
<td width="40%">10000000000</td>
<td width="40%">100</td>
</tr>
</table>
</body></html>

复制代码

[HTML5开发] css表格属性

[HTML5开发] css表格属性

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫