跨行跨列表格
2018-01-10 本文已影响0人
王嘉豪_TW
跨行列表格
知识准备
-
表格
表格由
<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">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> <th colspan="3">5-1</th> <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>
效果图
