用css样式，为表格加入边框
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
在右侧代码编辑器中添加如下代码：
<style type="text/css">table tr td,th{border:1px solid #000;}</style>
上述代码是用 css 样式代码（后面章节会详细讲解），为th，td单元格添加粗细为一个像素的黑色边框。
结果窗口显示出结果样式：
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>为表格添加边框</title><style type="text/css">table tr td,th{border:1px solid #000;}</style></head><body><table summary=""><tr><th>班级</th><th>学生数</th><th>平均成绩</th></tr><tr><td>一班</td><td>30</td><td>89</td></tr><tr><td>二班</td><td>35</td><td>85</td></tr><tr><td>三班</td><td>32</td><td>80</td></tr></table></body></html>
运行结果
caption标签，为表格添加标题和摘要
表格还是需要添加一些标签进行优化，可以添加标题和摘要。代码如下：
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table><caption>标题文本</caption><tr><td>…</td><td>…</td>…</tr>…</table>
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>认识table表标签</title><style type="text/css">table tr td,th{border:1px solid #000;}</style></head><body><table summary="本表格记录到库存记录，记录包括U盘和耳机库存量"><caption> 到库存记录</caption><tr><th>产品名称 </th><th>品牌 </th><th>库存量（个） </th><th>入库时间 </th></tr><tr><td>耳机 </td><td>联想 </td><td>500</td><td>-1-2</td></tr><tr><td>U盘 </td><td>金士顿 </td><td>120</td><td>-8-10</td></tr><tr><td>U盘 </td><td>爱国者 </td><td>133</td><td>-3-25</td></tr></table></body></html>
运行结果
