动手练习：创建你的第一个表格
对于表格的理论知识，我们已经说了很多了，所以，让我们来看一个使用的例子，并建立一个简单的表格。
首先，将 blank-template.html 和 minimal-table.css 文件拷贝到你的本地环境上。
每一个表格的内容都包含在这两个标签中：
在表格中，最小的内容容器是单元格，是通过
html
如果我们想要一行四个单元格，我们需要把这组标签拷贝三次，更新你表中的内容，让它看起来是这样的：
html
你会看到，单元格不会放置在彼此的下方，而是自动与同一行上的其他单元格对齐。每个
如果想让这一行停止增加，并让单元格从第二行开始，我们需要使用
把你已经创建好的 4 个单元格放入
html
现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的
结果
这样会产生一个如下所示的表：
| 我是第一个单元格 | 我是第二个单元格 | 我是第三个单元格 | 我是第四个单元格 |
| 第二行，第一个单元格 | 单元格 2 | 单元格 3 | 单元格 4 |
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
备注：你也可以在 GitHub 中查看 simple-table.html（也可以查看在线示例）。
使用
现在，让我们把注意力转向表格标题，位于行或列开头的特殊单元格，定义了行或列包含的数据类型（例如，本文第一个示例中的“人员”和“年龄”单元格）。为了说明它们为什么这么有用，来看下面这个例子，首先是源代码：
html
| 诺基 | 弗洛尔 | 艾拉 | 胡安 | |
| 品种 | 杰克罗斯犬 | 贵宾犬 | 流浪犬 | 可卡犬 |
| 年龄 | 16 | 9 | 10 | 5 |
| 主人 | 岳母 | 我 | 我 | 嫂子 |
| 饮食习惯 | 吃掉所有人的剩菜 | 啃咬食物 | 吃得多 | 吃到爆炸为止 |
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
这是表格实际呈现的效果：
这里的问题是：虽然你可以弄清楚发生了什么，但是尽可能的交叉参考数据并不容易。如果列和行的标题以某种方式出现，那将会更好。
动手练习：表格标题
让我们来改进这个表格。
首先，把 dogs-table.html 和 minimal-table.css 文件保存到你的本地环境，HTML 文件包含上文你看到的几种狗的数据。
为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用
保存你的 HTML 文件，然后在浏览器中加载，然后你应该会看到，现在的标题更像标题了。
备注：你可以在 GitHub 中找到完成的版本 dogs-table-fixed.html（也可以查看在线示例）。
为什么标题是有用的？
我们已经给出了部分答案，当标题明显突出的时候，你可以更加简单地找到你想找的数据，设计上也会看起来更好。
备注：即使你不给表格添加你自己的样式，表格标题也会带有一些默认样式：加粗和居中，让标题可以突出显示。
表格标题也有额外的好处，随着 scope 属性（我们将在下一篇文章中了解到），这个属性允许你让表格变得更加无障碍，每个标题与相同行或列中的所有数据相关联。屏幕阅读设备能一次读出一列或一行的数据，这是非常有帮助的。
允许单元格跨越多行和列
有时候希望单元格跨越多行或多列。下面是一个显示常见动物名字的简单示例。在某些情况下，希望在动物名称旁边显示雄性和雌性的名称。有时候又不需要，这种情况下，只希望动物名称横跨整个表格。
一开始的标记写法是这样的：
html
| 动物 | |
|---|---|
| 河马 | |
| 马 | 公马 |
| 母马 | |
| 鳄鱼 | |
| 鸡 | 母鸡 |
| 公鸡 |
table {
border-collapse: collapse;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
但是输出的结果不是我们想要的：
需要一个方法，让“动物”、“河马”和“鳄鱼”横跨两列，让“马”和“鸡”竖跨两行。幸好，表格中的标题和单元格有 colspan 和 rowspan 属性，可以实现这些效果。这两个属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格。比如，colspan="2" 会使单元格横跨两列。
让我们使用 colspan 和 rowspan 来改进现有的表格。
首先，把 animals-table.html 和 minimal-table.css 文件复制到你的本地环境，HTML 文件中包含了你刚才看到的动物示例的数据。
接着，使用 colspan 让“动物”、“河马”和“鳄鱼”横跨两列。
最后，使用 rowspan 让“马”和“鸡”竖跨两行。
保存后，用浏览器打开你写的 HTML 文件，看看改进的地方。
备注：你也可以在 GitHub 上找到完成的版本 animals-table-fixed.html（也可以查看在线示例）。
为表格中的列提供共同的样式
不使用
在继续阅读之前，我们将在本文介绍最后一个特性。HTML 有一种为整列数据的定义样式信息的方法：就是
备注：这样设计列的样式仅限于几个属性：border、background、width 和 visibility。要设置其他属性，必须对列中的每个
下面是一个简单的示例：
html
| 数据 1 | 数据 2 |
|---|---|
| 加尔各答 | 橙汁 |
| 机器人 | 爵士乐 |
下面就是上述代码的结果：
这并不理想，因为必须在列中的所有三个单元格中重复样式信息（在实际项目中，可能会在所有单元格中设置一个 class，并在单独的样式表中指定样式）。
使用
可以在