您的位置：首页 > Web前端 > CSS

<css 六>table

2016-04-03 23:57 866 查看

border:(表格边框)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table,th,td{
border:1px solid gray;
}
</style>
</head>
<body>
<table>
<tr>
<th>表头</th>
<td>格子</td>
<td>格子</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>

边框折叠：（border-collapse）

border-collapse:collapse;

宽度-width、高度-height设定：

width:75%;
height:55px;

表格中的文本对其方式：(text-align)

td{
text-align:top/bottom/left/right/center;
}

垂直对其方式：(vertical-align)

td{
vertical-align:top/bottom/left/right/center;
}

内边框设定:(padding)

td{
padding:5px;
}

表格颜色:

th{
border:3px solid green;
background-color:gray;
}
td{
background-color:red;
}

单元格边框：

table{
border-spacing:20px;或
border-spacing:20px  50px;
}

表格标题位置:

table{
caption-side:bottom/top;
}
<body>
<table>
<caption>表格标题</caption>
</table>
</body>

是否显示表格中的空单元格:

table{
border-collapse:separate;
empty-cells:hide/show;
}

表格布局算法：

table{
table-layout:fixed;
列宽由表格宽度和列宽度设定。
table-layout:table-layout:automatic;
默认。列宽度由单元格内容设定。
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

&lt;css 六&gt;table

<css 六>table