《HTML跨多行跨多列的表格》由会员分享，可在线阅读，更多相关《HTML跨多行跨多列的表格（19页珍藏版）》请在金锄头文库上搜索。
1、HTMLHTML 跨多行跨多列的表格跨多行跨多列的表格上节所示的表格比较简单，如果我要插入一张图片，并且要占 4 个单元的空间， 那怎么办？这就要用到跨多行跨多列的表格，本节就开始讲解如何实现把多个 单元格合并成一个单元格。本节单词记忆：属性 1.cospan 2.rowspan网页学习网提示：html 语言非常简单，不需要逻辑理解，而绝大部分朋友觉得 它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有 必要的。一、什么是跨多行跨多列的表格一、什么是跨多行跨多列的表格有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建 跨多行的列。colspan 属性用于
2、创建跨多列的单元格，rowspan 属性用于创建跨 多行的单元格。要 实现如图 1 所示的跨多行跨多列表格，怎么办？不急，我们先来看看跨多列的 表格是如何实现的。图 1 跨多行跨多列的表格 二、跨多列的表格二、跨多列的表格跨多列的表格是单元格在水平方向上跨多列。语法语法: :创建跨多列的表格基本语法：“单元格内容单元格内容下面通过示例 1 来说明 colspan 这一属性的用法。示例示例 1:1:跨多列的表格colspan=“3“学生成绩表学生成绩表英语数学语文959889这里，将第一行单元格在水平方向上所跨的列数设为 3，因为表格共包括 3 列， 所以第一行只有一个单元格，运行效果如图 2
3、所示。跨多列表格已经实现了， 下面我们想想如何实现跨多行的表格？图 2 跨多列的表格三、跨多行的表格三、跨多行的表格单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格 是单元格在垂直方向上跨多行。WANGYEXX.COM语法语法: :创建跨多行的表格基本语法：“单元格内容单元格内容示例示例 2:2:跨行表格rowspan=“3“早餐菜谱早餐菜谱食物鸡蛋饮料牛奶甜点开心粉这里，由于第一行第一个单元格垂直跨了 3 行，还剩 2 个单元格，因此在接下 来的两行都只有 2 个单元格，运行效果如图 3 所示。图 3 跨多行的表格四、如何创建跨多行跨多列的表格四、如何创建跨多行跨多列的表
4、格创建了跨多列的表格，也创建了跨多行的表格，但是在有些情况下要在一张表 中既有跨多行又有跨多列的单元格，那将如何实现？这要说简单真的很简单， 说难还真的不容 易，下面我们就以示例 3 和示例 4 来说明如何创建跨多行跨多列的表格。示例示例 3 3:跨多行多列表格 1手机充值、IP 卡colspan=“2“办公设备、文具办公设备、文具rowspan=“2“各种卡的总汇各种卡的总汇铅笔彩笔打印刻录示例 3 在浏览器中运行的结果如图 4 所示。在创建如图 2.9 所示的表格时，应 先创建表格标 签；然后在表格标签里创建行标签，这里一共创建 了 3 行；最后在每行里创建列标签， 并设置跨多行跨多列的属
5、性，即可实现跨多行跨多列的表格。图 4 跨多行多列表格 1示例示例 4:4:跨多行多列表格 2rowspan=“3“产品名称产品名称掌上电脑彩音盒 MP318 克拉钻戒colspan=“2“欢迎光临本购物网站欢迎光临本购物网站示例 4 在浏览器中运行的结果如图 5 所示。大家可以试试修改 rowspan 和 colspan 属性值的大小，如果把 rowspan 和 colspan 的值改得过小，表格中会 出现空白区域，这样会使表格的编辑变得困难，因此在设置表格时，要注意各 行的单元格列数应相同。图 5 跨多行多列表格 2小经验：一般情况下在设置表格行和列的时候，为了保证在表格里不出现空白 区域，可以将跨多列或跨多行的单元格看成多个单元格，而单元格的个数就是 所跨的列数或行数，只要保证各行的单元格列数相同，就不会出现空白区域。本节作业：制作如下图网页。注意事项：1.基本掌握 HTML 中 TABLE 的使用方法。2.掌握如何实现跨行和跨列的布局显示。网页学习网提示：光看教程是无法让你掌握 HTML 知识，最好是完成作业后才进 入下一次教程，动起手来吧！点击下载第二章案例及作业资源 返回HTML 入门经典教程列表转载请注明本文地址:http:/ http:/ G4gXSgj49aNu
