colspan 是合并列，rowspan是合并行，合并行的时候，比如rowspan="2"，它的下一行tr会少一列；合并列的时候 colspan="2"，此行的列会少一列。
代码演示：
<table border="1" style={{margin:200}}>
<tbody>
<tr>
<th colspan="2">我是占位符</th>
<th colspan="2">我是占位符</th>
</tr>
<tr>
<th rowspan="2">我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
<tr>
<th>我是占位符</th>
<th>我是占位符</th>
<th>我是占位符</th>
</tr>
</tbody>
</table>
演示结果
扩展资料：
rowspan规定表头单元格应该横跨的行数。注意： rowspan="0" 告知浏览器使单元格横跨到表格组件中的最后一个行（thead、tbody 或 tfoot）。
方法：
<table border=1>
<tr>
<td rowspan=2>1.1</td><td>1.2</td>
</tr>
<tr>
<td>2.2</td>
</tr>
</table>
rowspan合并行，colspan 合并列
定义和用法：
<table>标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
HTML 与 XHTML 之间的差异：
在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 属性是不被支持的。
TIY 实例：
表格
这个例子演示如何在 HTML 文档中创建表格。
表格边框
本例演示各种类型的表格边框。
没有边框的表格
本例演示一个没有边框的表格。
表格中的标题(Headings)
本例演示如何显示表格标题。
空单元格
本例展示如何使用 " " 处理没有内容的单元格。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何在不同的元素内显示元素。
单元格填充(Cell padding)
本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用单元格间距增加单元格之间的距离。
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
1、跨多行的表元 <th rowspan=#>
<table border>
<tr><th rowspan=3>Morning Menu</th><!--rowspan=3，跨三行表元-->
<th>Food</th><td>A</td></tr>
<tr><th>Drink</th><td>B</td></tr>
<tr><th>Sweet</th><td>C</td></tr>
</table>
2、跨多列的表元 <th colspan=#>
<table border>
<tr><th colspan=3>Morning Menu</th><!--colspan=3，跨三列表元-->
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
扩展资料：有合并就有拆分，下面是拆分的方法
拆分行：
<%@ page contentType="text/htmlcharset=ISO-8859-1" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=iso-8859-1">
<style type="text/css">
table{
font-size:10pt
border:1px solid #808080
}
th{
border-bottom:1px solid #808080
border-right:1px solid #808080
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table id="table1" width="100%" cellspacing="0" cellpadding="0">
<tr align="center" bgcolor="#3E3695" style="color:#FFFFFFheight:25px">
<th rowspan="3">1-1</th>
<th rowspan="3">1-2</th>
<th rowspan="2">1-3</th>
<th rowspan="1">1-4</th>
<th rowspan="3">1-5</th>
</tr>
<tr align="center" bgcolor="#3E3695" style="color:#FFFFFFheight:30px">
<th>2-4</th>
</tr>
<tr align="center" bgcolor="#3E3695" style="color:#FFFFFFheight:30px">
<th>2-3</th>
<th>3-4</th>
</tr>
</table>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）