1.表格标题位置：caption-side
默认情况下，表格标题在表格的上方。如果想要把表格标题放在表格的下方，应该怎么实现？
在CSS中，我们可以使用caption-side属性来定义表格标题的位置
caption-side属性取值只有2个：
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table,th,td{border:1px solid silver;} table{caption-side:bottom;} </style> </head> <body> <table> <caption>表格标题</caption> <!--表头--> <thead> <tr> <th>表头单元格1</th> <th>表头单元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>表行单元格1</td> <td>表行单元格2</td> </tr> <tr> <td>表行单元格3</td> <td>表行单元格4</td> </tr> </tbody> <!--表脚--> <tfoot> <tr> <td>表行单元格5</td> <td>表行单元格6</td> </tr> </tfoot> </table> </body> </html>
2.表格边框合并：border-collapse
在CSS中，我们可以使用border-collapse属性来去除单元格之间的空隙，也就是将两条边框合并为一条
border-collapse属性取值只有2个：
示例：取消表格边框的间隙
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table,th,td{border:1px solid silver;} table{border-collapse: collapse;} </style> </head> <body> <table> <caption>表格标题</caption> <!--表头--> <thead> <tr> <th>表头单元格1</th> <th>表头单元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>表行单元格1</td> <td>表行单元格2</td> </tr> <tr> <td>表行单元格3</td> <td>表行单元格4</td> </tr> </tbody> <!--表脚--> <tfoot> <tr> <td>表行单元格5</td> <td>表行单元格6</td> </tr> </tfoot> </table> </body> </html>
3.表格边框间距：border-spacing
在CSS中，我们可以使用border-spacing属性来定义表格边框间距
示例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> table,th,td{border:1px solid silver;} table{border-spacing: 8px;} </style> </head> <body> <table> <caption>表格标题</caption> <!--表头--> <thead> <tr> <th>表头单元格1</th> <th>表头单元格2</th> </tr> </thead> <!--表身--> <tbody> <tr> <td>表行单元格1</td> <td>表行单元格2</td> </tr> <tr> <td>表行单元格3</td> <td>表行单元格4</td> </tr> </tbody> <!--表脚--> <tfoot> <tr> <td>表行单元格5</td> <td>表行单元格6</td> </tr> </tfoot> </table> </body> </html>
