HTML跨多行跨多列的表格
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML跨多行跨多列的表格
上节所示的表格比较简单，如果我要插入一张图片，并且要占4个单元的空间，那怎么办？这就要用到跨多行跨多列的表格，本节就开始讲解如何实现把多个单元格合并成一个单元格。
本节单词记忆：属性 1.cospan 2.rowspan
网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。
一、什么是跨多行跨多列的表格
有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。
colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。
要
实现如图1所示的跨多行跨多列表格，怎么办？不急，我们先来看看跨多列的表格是如何实现的。
图1 跨多行跨多列的表格
二、跨多列的表格
跨多列的表格是单元格在水平方向上跨多列。
语法:
创建跨多列的表格基本语法：
<TABLE>
<TR>
<TD colspan="所跨列数">单元格内容</TD>
</TR>
</TABLE>
下面通过示例1来说明colspan这一属性的用法。
示例1:
<HTML>
<HEAD>
<TITLE>跨多列的表格</TITLE>
</HEAD>
<BODY>
<TABLE border="2">
<TR>
<TD colspan="3">学生成绩表</TD>
<!--设置单元格水平跨3列，3是单元格所跨列数，而不是像素数-->
</TR>
<TR>
<TD >英语</TD>
<TD >数学</TD>
<TD >语文</TD>
</TR>
<TR>
<TD >95</TD>
<TD>98</TD>
<TD>89</TD>
</TR>
</TABLE>
</BODY>
</HTML>
这里，将第一行单元格在水平方向上所跨的列数设为3，因为表格共包括3列，所以第一行只有一个单元格，运行效果如图2所示。
跨多列表格已经实现了，下面我们想想如何实现跨多行的表格？
图2 跨多列的表格
三、跨多行的表格
单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行。
语法:
创建跨多行的表格基本语法：
<TABLE>
<TR>
<TD colspan="所跨行数">单元格内容</TD>
</TR>
</TABLE>
示例2:
<HTML>
<HEAD>
<TITLE>跨行表格</TITLE>
</HEAD>
<BODY>
<TABLE border="2">
<TR>
<TD rowspan="3">早餐菜谱</TD>
<!--设置单元格垂直跨3行，3是单元格所跨行数，而不是像素数-->
<TD>食物</TD>
<TD>鸡蛋</TD>
</TR>
<TR>
<TD>饮料</TD>
<TD>牛奶</TD>
</TR>
<TR>
<TD>甜点</TD>
<TD>开心粉</TD>
</TR>
</TABLE>
</BODY>
</HTML>
这里，由于第一行第一个单元格垂直跨了3行，还剩2个单元格，因此在接下来的两行都只有2个单元格，运行效果如图3所示。
图3 跨多行的表格
四、如何创建跨多行跨多列的表格
创建了跨多列的表格，也创建了跨多行的表格，但是在有些情况下要在一张表中既有跨多行又有跨多列的单元格，那将如何实现？这要说简单真的很简单，说难还真的不容
易，下面我们就以示例3和示例4来说明如何创建跨多行跨多列的表格。
示例3:
<HTML >
<HEAD>
<TITLE>跨多行多列表格1</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD>手机充值、IP卡</TD>
<TD colspan="2">办公设备、文具</TD>
</TR>
<TR>
<TD rowspan="2">各种卡的总汇</TD>
<TD>铅笔</TD>
<TD>彩笔</TD>
</TR>
<TR>
<TD>打印</TD>
<TD>刻录</TD>
</TR>
</TABLE>
</BODY>
</HTML>
示例3在浏览器中运行的结果如图4所示。
在创建如图2.9所示的表格时，应先创建表格标签<TABLE>…</TABL E>；然后在表格标签里创建行标签<TR>…</TR>，
这里一共创建了3行；最后在每行里创建列标签<TD>…</TD>，并设置跨多行跨多列的属性，即可实现跨多行跨多列的表格。
图4 跨多行多列表格1
示例4:
<HTML>
<HEAD>
<TITLE>跨多行多列表格2</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD rowspan="3">产品名称</TD>
<TD>掌上电脑</TD>
</TR>
<TR>
<TD>彩音盒MP3</TD>
</TR>
<TR>
<TD>18克拉钻戒</TD>
</TR>
<TR>
<TD colspan="2"><P>欢迎光临本购物网站</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
示例4在浏览器中运行的结果如图5所示。
大家可以试试修改rowspan和colspan 属性值的大小，如果把rowspan和colspan的值改得过小，表格中会出现空白区域，这样会使表格的编辑变得困难，因此在设置表格时，要注意各行的单元格列数应相同。
图5 跨多行多列表格2
小经验：一般情况下在设置表格行和列的时候，为了保证在表格里不出现空白区域，可以将跨多列或跨多行的单元格看成多个单元格，而单元格的个数就是所跨的列数或行数，只要保证各行的单元格列数相同，就不会出现空白区域。
本节作业：
制作如下图网页。
注意事项：
1.基本掌握HTML中TABLE的使用方法。
2.掌握如何实现跨行和跨列的布局显示。
网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！
点击下载第二章案例及作业资源返回《HTML入门经典》教程列表
转载请注明本文地址:/html/jc/500.html。