HTML&CSS基础学习笔记1.15-合并单元格 -

octopole

浏览: 71603 次
性别:
来自: 杭州

最近访客更多访客>>

wapapapapapapow

cyouakari

zhoufh

loiyil

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML&CSS基础学习笔记1.15-合并单元格

博客分类：

HTML

html 合并单元格 colspan rowspan

合并单元格

之前的文章中，我们已经能够创建一个简单地表格了，如果我们需要把横向的某两个相邻单元格<td>或者纵向的某两个相邻单元格<td>合并，我们该怎么做呢？我们要知道的知识点如下：

1.标签<td>的[colspan]属性规定单元格可横跨的列数，即横向合并的单元格数；

2.标签<td>的[rowspan] 属性规定单元格可横跨的行数，即纵向合并的单元格数；

3.这2个标签也可以同时使用。

样式示例：

现在就来试试合并单元格吧：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>创建一个多行多列的表格</title>  
</head>  
<body>  
<h1>创建一个多行多列的表格</h1>  
  
<table border="1">  
    <tr><td colspan="2">第一个单元格</td><td>第二个单元格</td><td>第三个单元格</td></tr>  
    <tr><td rowspan ='2'>第四个单元格</td><td>第五个单元格</td><td>第六个单元格</td></tr>  
    <tr><td>第七个单元格</td><td>第八个单元格</td><td>第九个单元格</td></tr>  
</table>  
</body>  
</html>

结果是这样的：

更多学习内容，请前往http://www.mayacoder.com/lesson/index

查看图片附件

0
顶

1
踩

分享到：

Python新手学习基础之条件语句——elif语句 | Python新手学习基础之条件语句——if/else ...

2016-08-01 09:31
浏览 651
评论(2)
分类:Web前端
查看更多

2 楼 octopole 2016-08-02

up~~~~~

1 楼 octopole 2016-08-01

32131231232

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML&CSS基础学习笔记1.15-合并单元格

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML&CSS基础学习笔记1.15-合并单元格

评论

发表评论

相关推荐

HTML&CSS基础学习笔记1.33-元素选择器

HTML&CSS基础学习笔记1.32-选择器是什么

HTML&CSS基础学习笔记1.31-像素和相对长度

HTML&CSS基础学习笔记1.30-颜色的表达

HTML&CSS基础学习笔记1.29-灵活地使用样式

HTML&CSS基础学习笔记1.28-给网页添加一个css样式

HTML&CSS基础学习笔记1.27-input提交数据

HTML&CSS基础学习笔记1.26-input重置表单

HTML&CSS基础学习笔记1.25-input标签的选择文件和隐藏元素

HTML&CSS基础学习笔记1.24-input标签的单选与多选

HTML&CSS基础学习笔记1.23-表单的文本域和下拉列表

HTML&CSS基础学习笔记1.22-简单的注册页面

HTML&CSS基础学习笔记1.21-语义化标签

HTML&CSS基础学习笔记1.20-DIV标签2

HTML&CSS基础学习笔记1.19-DIV标签1

HTML&CSS基础学习笔记1.18-表格的边框

HTML&CSS基础学习笔记1.17-表格头部与尾部

HTML&CSS基础学习笔记1.16-单元格间距和表格主体

HTML&CSS基础学习笔记1.14—有序列表及列表嵌套

HTML&CSS基础学习笔记1.13—无序列表

最近访客更多访客>>