需求:在consequence中,增加了一条记录,并且重用了两个信息没有改变的单元格.也就是增加新行的时候,只需要列出要增加的不同的信息
consequence August 9 93 4242ft 7289 5/5
August 27 98 4/5
HTML中可以使用rowspan属性指定一个表格数据单元格占多少行,然后从这个单元格所跨越的其他行中
删除相应的表格数据元素.看例子先咯
ok,看过例子之后,我们继续看下跨列,只需要为td元素添加一个colspan属性,然后指定列数就可以了.
与rowspan不同,跨多列的时候,需要删除同一行中表格数据元素;看例子咯
另外td中可以同时出现colspan和rowspan
先看下效果图
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格1</title>
<style type="text/css">
td,
th {
border: 1px solid black;
/* 单元格设置边框 */
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
/* 表格标题在表格的下方 */
caption-side: bottom;
/* border-spacing: 10px 30px; */
border-collapse: collapse;
}
th,
td {
border: thin dotted gray;
}
th {
background-color: #00FFFF;
}
caption {
font-style: italic;
padding-top: 8px;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.cell-color {
background-color: #fcba7a;
}
</style>
</head>
<body>
<!-- 分析;一共是7行6列 -->
<div>
<table style="margin-top: 100px;">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td >june16</td>
<td >75</td>
<td >1204ft</td>
<td >29686</td>
<td >4/5</td>
<td >4/5</td>
</tr>
<tr>
<td rowspan="2">june16</td>
<td >75</td>
<td rowspan="2">1204ft</td>
<td rowspan="2">29686</td>
<td >4/5</td>
<td >4/5</td>
</tr>
<tr>
<td >75</td>
<td >4/5</td>
<td >4/5</td>
</tr>
</table>
<table style="margin-top: 100px;">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td >june16</td>
<td >75</td>
<td >1204ft</td>
<td >29686</td>
<td >4/5</td>
<td >4/5</td>
</tr>
<tr >
<td >june16</td>
<td >75</td>
<td >1204ft</td>
<td >29686</td>
<td >4/5</td>
<td >4/5</td>
</tr>
<tr>
<td >75</td>
<td colspan="5">4/5</td>
</tr>
</table>
</div>
</body>
</html>