表格的样式一般可以在HTML中直接定义，但是结构和样式需要分开声明，这可以方便后期的维护和修改。CSS中的表格样式有caption-side(表格标题位置)、border-collapse(表格边框合并)、border-spacing(表格边框间距)。
caption-side
caption-side属性取值只有2个，如下表
| 属性值 | 说明 |
| top | 标题在顶部(默认) |
| bottom | 标题在底部 |
举一个标题在底部的示例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表格标题位置title>
<style type="text/css">
table{
caption-side: bottom;
}
table,td{
border: 1px solid silver;
}
style>
head>
<body>
<table>
<caption>四大天王caption>
<tr>
<td>刘德华td>
<td>60岁td>
tr>
<tr>
<td>张学友td>
<td>60岁td>
tr>
<tr>
<td>郭富城td>
<td>56岁td>
tr>
<tr>
<td>黎明td>
<td>55岁td>
tr>
table>
body>
html>
border-collapse
在表格加入边框后单元格之间有一定的空隙 ，为了美观，我们可以把单元格之间的空隙去除。
border-collapse属性取值有2个，如下表
| 属性值 | 说明 |
| separate | 边框分开，有空隙 |
| collapse | 边框合并，无空隙 |
示例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表格边框合并title>
<style type="text/css">
table{
border-collapse: collapse;
}
table,td{
border: 1px solid silver;
}
style>
head>
<body>
<table>
<caption>四大天王caption>
<tr>
<td>刘德华td>
<td>60岁td>
tr>
<tr>
<td>张学友td>
<td>60岁td>
tr>
<tr>
<td>郭富城td>
<td>56岁td>
tr>
<tr>
<td>黎明td>
<td>55岁td>
tr>
table>
body>
html>
border-spacing
表格边框的间距，直接用像素值。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表格边框间距title>
<style type="text/css">
table{
border-spacing: 5px;
}
table,td{
border: 1px solid silver;
}
style>
head>
<body>
<table>
<caption>四大天王caption>
<tr>
<td>刘德华td>
<td>60岁td>
tr>
<tr>
<td>张学友td>
<td>60岁td>
tr>
<tr>
<td>郭富城td>
<td>56岁td>
tr>
<tr>
<td>黎明td>
<td>55岁td>
tr>
table>
body>
html>
本节主要学习了表格样式，最后对其总结。
表格标题位置：caption-side
表格边框合并：border-collapse
表格边框间距：border-spacing
