我们要做如下样式的一个表格
-
首先实现一个简单的表格
- 这个表格有四行四列，那我就先做一个这样的表格
- 表格由 ** <table> ** 来定义，行由<tr>定义，列<td>来定义，
主要结构是：
<table border="1">
<tr>
<td>...</td>
<td>...</td>
...
</tr>
...
</table>
-
最后实现的简单表格
-
下一步需要合并单元格，需要使用的如下
- rowspan，作用是指定单元格纵向跨越的行数。
- colspan的作用是指定单元格横向跨越的列数。
- 只要加在你需要合并的<td>里
//colspan用法
<table border="1">
<tr>
<td colspan=“3”> </td> //表示所在单元格横跨三列
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
// rowspan用法
<table border="1">
<tr>
<td rowspan=“3”> </td> //表示所在单元格横跨三行
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
- 合并好单元格之后的效果
-
最后需要加一个居中标题
- html有一个标签caption 专门定义表格标题，并且在表格上方居中
<table border="1">
<caption>购物车</caption>
...
</table
- 最后发现一个问题
- 表格中的文字没有加粗和居中
如果把 td 换成 th 一切就都好了
注意：th 用于表头
