HTML跨多行跨多列的表格.docVIP

HTML跨多行跨多列的表格上节所示的表格比较简单，如果我要插入一张图片，并且要占4个单元的空间，那怎么办？这就要用到跨多行跨多列的表格，本节就开始讲解如何实现把多个单元格合并成一个单元格。 网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。 一、什么是跨多行跨多列的表格 有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。要实现如图1所示的跨多行跨多列表格，怎么办？不急，我们先来看看跨多列的表格是如何实现的。 图1 ?跨多行跨多列的表格? 二、跨多列的表格 跨多列的表格是单元格在水平方向上跨多列。 语法: 创建跨多列的表格基本语法： TABLE? TR???????? TD colspan=所跨列数单元格内容/TD? /TR/TABLE 下面通过示例1来说明colspan这一属性的用法。 示例1: HTMLHEADTITLE跨多列的表格/TITLE/HEADBODYTABLE border=2? TR??? TD colspan=3学生成绩表/TD ??? !--设置单元格水平跨3列，3是单元格所跨列数，而不是像素数--? /TR? TR??? TD 英语/TD??? TD 数学/TD??? TD 语文/TD? /TR? TR??? TD 95/TD??? TD98/TD??? TD89/TD? /TR/TABLE/BODY/HTML 这里，将第一行单元格在水平方向上所跨的列数设为3，因为表格共包括3列，所以第一行只有一个单元格，运行效果如图2所示。跨多列表格已经实现了，下面我们想想如何实现跨多行的表格？ 图2 跨多列的表格 三、跨多行的表格 单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行。WANGYEXX.COM 语法: 创建跨多行的表格基本语法： TABLE? TR???????? TD colspan=所跨行数单元格内容/TD? /TR/TABLE 示例2: HTMLHEADTITLE跨行表格/TITLE/HEADBODYTABLE 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 HEADTITLE跨多行多列表格1/TITLE/HEADBODYTABLE? 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…/TABLE；然后在表格标签里创建行标签TR…/TR，这里一共创建 了3行；最后在每行里创建列标签TD…/TD，并设置跨多行跨多列的属性，即可实现跨多行跨多列的表格。 图4 跨多行多列表格1 示例4: HTMLHEADTITLE跨多行多列表格2/TITLE/HEADBODYTABLE? border=1? TR??? TD? rowspan=3产品名称/TD??? TD掌上电脑/TD? /TR? TR??? TD彩音盒MP3/TD? /TR? TR??? TD18克拉钻戒/TD? /TR? TR??? TD colspan=2P欢迎光临本购物网站/P??? /TD? /TR/TABLE/BODY/