前言
HTML 中的<table>标签表示表格数据----通过二维数据表来展示信息。
表格相关的HTML标签：<table> <tr> <td> <th> <thead> <tbody> <tfoot> <caption> <col> <colgroup>
表格标签的编写顺序：
<table>定义表格 每个表格从<table>开始<caption>定义表格标题，可选（可写可不写，根据需要）<colgroup>用于对表格的列进行组合，以方便对列设置属性，可选<col>用于为表格的列设置属性，可选<thead>用于对表格的表头内容进行分组，可选<tfoot>用于对表格的页脚、脚注或表注进行分组，可选<tbody>用于组合表格的主体内容，可选<tr>定义表格中的行 每个表格行从<tr>开始<td>定义单元格 每个单元格从<td>开始扫描二维码关注公众号，回复： 8756042 查看本文章
<th>定义表头单元格<thead>、<tbody>以及<tfoot>很少被使用
表格实验
1 . 无边框表格
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
2 . 普通边框表格
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
3 . 粗边框表格
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
4 . 为表格设置cellpadding属性
<table border="1" cellpadding="100">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
5 . 为表格设置cellspacing属性
<table border="1" cellspacing="20">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<table border="1" cellspacing="0">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
6 . 为表格设置border-collapse属性
<table border="1" style="border-collapse: collapse;">
<tr>
<td>First </td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
7 . 为表格设置frame属性
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table frame="above">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<table frame="hsides">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
8 . 表格跨列、跨行
<!-- 横跨两列的单元格 -->
<table border="1">
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<!-- 横跨两行的单元格 -->
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
9 . 使用<col> <colgroup>为列设置属性
为行设置属性? 设置
<tr>即可。
<table width="100%" border="1">
<col style='background: #ccc;' />
<col style='background: #444;' />
<col style='background: #888;' />
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
<table width="100%" border="1">
<colgroup span="2" style="background: #ddd;font-weight: bold;"></colgroup>
<colgroup style="background:blue;"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
后语
第一次是用 segmentfault 写文章就发现可以将剪切板的图片粘贴（
Ctrl+V）添加到文章，很惊喜。 之前使用的是作业部落，会员才能上传图片。
参考资料：
【1】W3school http://www.w3school.com.cn/ta...
【2】MDN https://developer.mozilla.org...