我们使用html创建表格的时候,合并单元格是最常见的需求。那么如何实现这种功能呢?下面我给大家分享一下。
工具/材料SublimeText
首先打开SublimeText软件,新建一个html文档,如下图所示
然后我们在html中定义一个表格,并且给表格设置边框,如下图所示
接下来我们通过colspan来合并单元格的内容,如下图所示
最后我们运行页面程序,你就会看到两个单元格的内容都合并到一个里面了,如下图所示
方法:
<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)
本例演示如何显示表格标题。
空单元格
本例展示如何使用 "&nbsp" 处理没有内容的单元格。
带有标题的表格
本例演示一个带标题 (caption) 的表格
跨行或跨列的表格单元格
本例演示如何定义跨行或跨列的表格单元格。
表格内的标签
本例演示如何在不同的元素内显示元素。
单元格填充(Cell padding)
本例演示如何使用单元格填充来创建单元格内容与其边框之间的空白。
单元格间距(Cell spacing)
本例演示如何使用单元格间距增加单元格之间的距离。
向表格添加背景颜色或背景图像
本例演示如何向表格添加背景
向表格单元添加背景颜色或者背景图像
本例演示如何向一个或者更多表格单元添加背景
在表格单元中排列内容
本例演示如何使用 "align" 属性排列单元格内容,以便创建一个美观的表格。
框架(frame)属性
本例演示如何使用 "frame" 属性来控制围绕表格的边框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
</head>
<body topmargin=4>
<table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6>
<caption>专业设置及在校生人数表</caption><!--标题-->
<!--第一行 -->
<tr align=center bgcolor=mediumturquoise>
<td><strong>学院名</strong></td>
<td colspan=4><strong>专业及人数</strong></td></tr>
<!--rowspan 跨行合并 也就是六行合并 -->
<tr align=center><td rowspan=6>计算机学院</td>
<!--clospan 跨列合并 也就是四列合并 -->
<td colspan=4 bgcolor=ddeeff>计算机科学与技术专业</td></tr>
<tr align=center><td>2006级</td><td>2007级</td><td>2008级</td><td>2009级</td></tr>
<tr align=center ><td>300人</td><td>200人</td>
<td>150人</td><td>120人</td></tr>
<tr align=center ><td colspan=4 bgcolor=ddeeff >软件工程专业</td></tr>
<tr align=center><td>2006级</td><td>2007级</td><td>2008级</td><td>2009级</td></tr>
<tr align=center><td >100人</td><td>80人</td><td>50人</td><td>40人</td></tr>
<tr align=center><td rowspan=3>外语学院</td>
<td colspan=4 bgcolor=ddeeff >英语专业</td></tr>
<tr align=center><td>2006级</td><td>2007级</td><td>2008级</td><td>2009级</td></tr>
<tr align=center ><td >100人</td><td>80人</td><td>50人</td><td>40人</td></tr>
</table></body>
</html>