HTML表格跨行是指在HTML表格中,一个单元格的内容跨越多行,从而使得表格的显示更加美观。
要实现HTML表格跨行,需要使用rowspan属性。rowspan属性可以把一个单元格的内容拉伸到多行,从而使得整个表格看上去更加美观。rowspan属性可以在td或th元素中使用:
<td rowspan="2">Cell content</td>
上面代码中,rowspan="2"属性告诉浏览器:这个单元格的内容应该拉伸到下面的一行。如果想要拉伸到多行,可以将rowspan属性的值修改为相应的数字。
此外,还可以使用colspan属性来实现HTML表格跨列。colspan属性可以将一个单元格的内容拉伸到多列:
<td colspan="2">Cell content</td>
上面代码中,colspan="2"告诉浏览器:这个单元格的内容应该拉伸到后面的一列。如果想要拉伸到多列,可以将colspan属性的值修改为相应的数字。
要将单元格跨多个列,请使用 colspan
属性。
分配给 colspan
的值必须是整数。
您还必须删除展开后的单元格将覆盖的单元格元素。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th>2nd Favorite:</th>
<td>HTML</td>
<td>HTML</td>
<td>Oracle</td>
<td>MySQL</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>XML</td>
<td colspan="2" rowspan="2">This is a test.</td>
<td>203</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5">© 2011 www..cn Enterprises</th>
</tr>
</tfoot>
</table>
</body>
</html>
要将单元格跨多行,您可以使用 rowspan
属性。您分配给此属性的值是要跨越的行数。
分配给 rowspan
的值必须为整数。
如果希望中间列中的一个单元格跨越所有三行,您将 rowspan
属性应用于单元格2。
您还必须删除展开后的单元格将覆盖的单元格元素。
以下代码将单元格扩展为覆盖多行。
<!DOCTYPE HTML>
<html>
<head>
<style>
td {
border: thin solid black;
padding: 5px;
font-size: x-large
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td rowspan="3">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
</body>
</html>
HTML 脚本 JavaScript 是可插入 HTML 页面的编程代码。JavaScript 使 HTML 页面具有更强的动态和交互性。JavaScript 插入 HTML ...
HTML 简介 现在您可以通过如下的一个 HTML 实例来建立一个简单的 HTML 页面,以此来简单了解一下 HTML 的结构。 HTML 实例 !DOCT...
XHTML 文档是根据文档类型声明进行验证的。 通过 DTD 验证 XHTML 1. 严格DTDXHTML 文档是根据文档类型声明(DTD)进行验证的。只...
AJAX 简介 AJAX 可以用于创建快速动态的网页。 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。您应当...
上世纪九十年代,Glasgow Haskell编译器(诞生于格拉斯哥[Glasgow]大学)开始时作为英国政府资助的学术研究项目的一部分,有着如...