7.表格样式-CSS基础
2020-10-23 本文已影响0人
見贤思齊_
一、表格标题位置（caption-side）
默认情况下，表格标题是在表格的上方。
在
CSS中，可以使用caption-side属性来定义表格标题的位置。
caption-side属性是在table元素中定义（也可以在caption元素中定义）。
1.标题位置
（1）语法格式
caption-side:取值;
① caption-side属性值
| 属性值 | 说明 |
|---|---|
| top | 标题在顶部（默认） |
| bottom | 标题在底部 |
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
table,th,td{
border: 1px solid #66A9FE;
}
/*表格标题位置，在底部*/
table{
caption-side: bottom; /*方法1，推荐*/
}
/* caption{
caption-side: bottom; /*方法2*/
} */
</style>
</head>
<body>
<table>
<caption>表格标题位置</caption>
<thead>
<tr>
<th>中国古代名人</th>
<th>朝代</th>
</tr>
</thead>
<tbody>
<tr>
<td>秦始皇</td>
<td>秦朝</td>
</tr>
<tr>
<td>项羽</td>
<td>秦朝</td>
</tr>
<tr>
<td>辛弃疾</td>
<td>南宋</td>
</tr>
</tbody>
</table>
</body>
</html>
表格标题位置示例1.png
二、表格边框合并（border-collapse）
在实际开发中，为了让表格更加美观，都是把单元格之间的空隙去掉。
在
CSS中，可以使用border-collapse属性来去除单元格之间的空隙，即将两条边框合并为一条。
border-collapse属性是在table元素中定义。
1.边框合并
（1）语法格式
border-collapse:取值;
① border-collapse属性值
| 属性值 | 说明 |
|---|---|
| separate | 边框分开，有空隙（默认值） |
| collapse | 边框合并，无空隙 |
② 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
table,th,td{
border: 1px solid #66A9FE;
}
table{
border-collapse: collapse; /*表格边框合并，去除边框间空隙*/
}
</style>
</head>
<body>
<table>
<caption>表格边框合并</caption>
<thead>
<tr>
<th>古诗名</th>
<th>作者</th>
<th>名句</th>
</tr>
</thead>
<tbody>
<tr>
<td>青玉案·元夕</td>
<td>辛弃疾</td>
<td>众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。</td>
</tr>
<tr>
<td>木兰词·拟古决绝词柬友</td>
<td>纳兰性德</td>
<td>人生若只如初见，何事秋风悲画扇。</td>
</tr>
<tr>
<td>将进酒·君不见</td>
<td>李白</td>
<td>天生我材必有用，千金散尽还复来。</td>
</tr>
</tbody>
</table>
</body>
</html>
表格边框合并示例1.png
三、表格边框间距（border-spacing）
在实际开发中，有时还是需要定义表格边框的间距。
在
CSS中，可以使用border-spacing属性来定义表格边框的间距。
border-spacing属性是在table元素中定义。
1.边框间距
（1）语法格式
border-spacing:像素值;
① 示例
Ⅰ.例1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>表格样式</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/边框样式.css"/> -->
<style type="text/css">
table,th,td{
border: 1px solid #66A9FE;
}
table{
border-spacing: 6px; /*设置表格边框间距*/
}
</style>
</head>
<body>
<table>
<caption>表格边框间距</caption>
<thead>
<tr>
<th>姓名</th>
<th>梦想</th>
<th>品德</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小淘</td>
<td>吃遍天下美食</td>
<td>优秀</td>
</tr>
<tr>
<td>思齊</td>
<td>建功立业</td>
<td>优秀</td>
</tr>
<tr>
<td>初见</td>
<td>游山玩水</td>
<td>优秀</td>
</tr>
</tbody>
</table>
</body>
</html>
表格边框间距示例1.png
