HTML表格

        今天学习了HTML的表格标签，下面简要做一总结。

        表格是我们经常见到的一种数据展现方式，例如下面这张丑陋的歌单统计就是一种表格。

图1 表格

那么要怎样实现这样一张很丑的表格呢？噢，对哦，这么丑我干嘛要做呢，还不是为了...为了...不管嘛，以后有办法美化的，好吗？好的。

        HTML表格由<lable>标签来实现，<lable>标签与<tr>、<td>、<th>标签配合使用，组成简单的表格。下面贴一张上面歌单的代码，结合代码做出解释。

图2 表格对应代码

        其中可以给<table>标签赋予不同的属性，控制其表现形式，如width和height控制其宽和高，border设置其边框为1px以及设置背景颜色等。此外需要注意的是cellspacing和cellpadding属性，前者指定两个单元格之间的距离，后者指定单元格里面内容距离边框的距离。

        <table></table>标签对中的<caption>用于指定表格标题。<thead>指定表格表头，也就是表格每一列的标题，它与<tbody>和<tfoot>对应，这三部分可以类比于人体的头，身体和脚三部分啦，联想到之前学习的HTML结构也是包含这三部分，只是各自的意义和内容有所不同。在表头和表体部分都用<tr>标签定义了行，分别用<th>和<td>定义了列。

        关于表格主体部分单元格的划分，我们可以把它类比于切蛋糕（不好意思，饿了饿了）。我有一块方形的蛋糕，为了保持淑女形象，我就准备切块吃。

图3 完整蛋糕

我先使用<tr>标签，横着切了一刀，将蛋糕分成两块：

图4 表格第一行

然后我使用<td>标签把第一行蛋糕，不是，第一行表格分出一个单元格出来：

图5 第一个单元格

当然，<tr>的高度和<td>的宽度可以自己定，<th>的效果和<td>类似。之后我就按照这样切蛋糕去了。

        此外，<tfoot>部分用到的合并同行相邻两个单元格用colspan属性，也就是将两列并到了一起；若要合并同一列相邻两行的单元格用rowspan属性，也就是将两行并到一起。

        溜了溜了~~~去梦里吃蛋糕了。