表格相关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table style="width: 400px;" border="1">
<caption> <b>这是表格的标题</b> </caption>
<tr>
<th>列1</th>
<th>列2</th>
</tr>
<tr>
<td>hhhh</td>
<td>xxxx</td>
</tr>
<tr>
<td>嗯嗯嗯</td>
<td>啊啊啊</td>
</tr>
</table>
<br>
<table style="width: 240px;" border="1">
<tr>
<td rowspan="2">跨两行的单元格</td>
<td>普通单元格</td>
</tr>
<tr>
<td>普通单元格</td>
</tr>
<tr>
<td colspan="2">跨两列的单元格</td>
</tr>
<tr>
<td>普通单元格</td>
<td>普通单元格</td>
</tr>
</table>
<br>
<table style="width: 400px" border="1">
<caption> <b>这是这个表格的标题</b> </caption>
<theader>
<tr>
<th> </th>
<th>书名</th>
<th>作者</th>
</tr>
</theader>
<tfoot>
<tr>
<td colspan="3" style="text-align: right">现总计：4本图书</td>
</tr>
</tfoot>
<tbody>
<tr>
<th rowspan="2">java体系</th>
<td>疯狂java讲义</td>
<td>李刚</td>
</tr>
<tr>
<td>疯狂java讲义</td>
<td>李刚</td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="2">java体系</th>
<td>疯狂java讲义</td>
<td>李刚</td>
</tr>
<tr>
<td>疯狂java讲义</td>
<td>李刚</td>
</tr>
</tbody>
</table>
<h4>通过css设置表格背景为黑色，单元格之间的间距为1px <br>
通过设置背景颜色为黑色可以实现边框效果
</h4>
<table style="background-color: black; border-collapse: separate; border-spacing: 1px; ">
<caption> <b>这是这个表格的标题</b> </caption>
<colgroup style="background-color: white;">
<col style="width: 160px;">
<col span="2" style="width: 100px;">
</colgroup>
<thead>
<tr>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" style="text-align: right">现总计：2本图书</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>疯狂java讲义</td>
<td>李刚</td>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>疯狂java讲义</td>
<td>李刚</td>
<td>1</td>
</tr>
</tbody>
</table>
</body>
</html>
