跨行列表格
知识准备
-
表格
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
-
表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
-
表格的表头
表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
-
表格中的空单元格
在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框
注意：这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符( )，就可以将边框显示出来
-
表格标签
<table> |
定义表格 |
<caption> |
定义表格标题 |
<th> |
定义表格的表头 |
<tr> |
定义表格的行 |
<td> |
定义表格的单元 |
<thead> |
定义表格的页眉 |
<tbody> |
定义表格的主题 |
<tfoot> |
定义表格的页脚 |
<col> |
定义表格的列的属性 |
<colgroup> |
定义表格列的组 |
-
跨行跨列
通过属性colspan和rowspan可以实现跨列和跨行
作业题目
跨行列表格
题目分析
首先可以将表格分为表格标题，页眉，页脚，这个表格的难点在于表格中间出现的跨行跨列混合单元格。我们还是逐步分析
-
首先通过<table>标签建立一个五行四列，带表格标题，区分表格页眉、主体、页脚的标准表格格式，并且将表格边宽度为1
<table border="1">
<caption>标题</caption>
<thead>
<tr>
<th>1-1</th>
<th>1-2</th>
<th>1-3</th>
<th>1-4</th>
</tr>
<tr>
<th>2-1</th>
<th>2-2</th>
<th>2-3</th>
<th>2-4</th>
</tr>
</thead>
<tbody>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
</tr>
</tfoot>
</table>
为了更加清楚，我们将每个单元格内容都写上了对应的坐标
第一步
-
经过第一步我们就可以看到一个基本的表格结构了，接下来需要处理的就是跨行和跨列。由题目可以看出第一行的第一列要跨两行合并、第一行的二三列要跨列合并、第一行的第四列要跨两行合并。因此我们只需要使用colspan和rowspan属性对上述三种合并形式进行实现即可
<table border="1">
<caption>标题</caption>
<thead>
<tr>
<th rowspan="2">1-1</th>
<th colspan="2">1-2</th>
<th rowspan="2">1-4</th>
</tr>
<tr>
<th>2-2</th>
<th>2-3</th>
</tr>
</thead>
<tbody>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>5-1</td>
<td>5-2</td>
<td>5-3</td>
<td>5-4</td>
</tr>
</tfoot>
</table>
这里需要注意的是，我们需要把跨行跨列后被合并的单元格删除掉，否则会由于空间不够而造成表格格式混乱
第二步
第三步
总结
可以看出对于复杂的跨行跨列表格结构，我们只需要先将标准表格画出，然后单独一个一个去处理跨行跨列行为即可
实现代码
<table border="1">
<caption>购物车</caption>
<thead>
<tr>
<th rowspan="2">名称</th>
<th colspan="2">2016-11-22</th>
<th rowspan="2">小计</th>
</tr>
<tr>
<th>重量</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果</td>
<td>3公斤</td>
<td>5元/公斤</td>
<td>15元</td>
</tr>
<tr>
<td>香蕉</td>
<td>2公斤</td>
<td>6元/公斤</td>
<td>12元</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">总价</th>
<td>27元</td>
</tr>
</tfoot>
</table>
效果图
网友评论