合并单元格

之前的文章中，我们已经能够创建一个简单地表格了，如果我们需要把横向的某两个相邻单元格<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

HTML&CSS基础学习笔记1.15-合并单元格的更多相关文章

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

    上一篇讲html学习笔记,讲过了合并单元格,那么今天就来介绍下如何控制单元格的间距,以及表格主体的相关知识. 单元格间距 在上个知识点的显示结果中你可能发现了,单元格与单元格之间有一小段空白.这是由& ...

  2. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  3. CSS基础学习笔记

    一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...

  4. C#学习笔记8：HTML和CSS基础学习笔记

    <!-- 1.<P>...</P>段落标签 2.<br/>折行标签. 3.<img src="" height="*px& ...

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

    今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧 表格的边框 前面为了方便观察表格单元格的情况,我们给<table>加了border属性.<table>的borde ...

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

    像素和相对长度 之前的笔记中,我们提到过用属性width.height来设置图片的尺寸,它们的单元都是”px(像素)”.长度单位总结一下,目前比较常用到px(像素).em.% 百分比,要注意其实这三种 ...

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

    选择器是什么 选择器是CSS样式为了定位页面上的任意元素的一种方法. 选择器主要分为:元素标签选择器.通用选择器.类选择器.ID选择器.属性选择器.组合选择器.伪类选择器.伪元素选择器. 先做个了解, ...

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

    元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...

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

    颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...

随机推荐

  1. 无线通信技术协议-Zigbee 3.0

    物联网的无线通信技术有:短距离的无线局域网通信技术和长距离的无线广域网通信技术. 短距离局域网通信技术有Zigbee.Wi-Fi.Bluetooth.Z-wave.6LoWPAN等. 长距离广域网通信 ...

  2. POSTGRESQL小玩

    因为CDH上需要用它来建HIVE的元库... 参考: http://www.cnblogs.com/mchina/archive/2012/06/06/2539003.html 一.简介 Postgr ...

  3. 【转】Thunderbird on Ubuntu 12.04 – 调整邮件列表行间距

    原文网址:http://www.xuebuyuan.com/414703.html markz@markz-hp6200:~$ cd .thunderbird/ markz@markz-hp6200: ...

  4. cocos2d-x 头文件中添加方法变量导致编译报错

    代码如下: HelloWorldScene.h #ifndef __HELLOWORLD_SCENE_H__#define __HELLOWORLD_SCENE_H__ #include " ...

  5. v4l2采集视频和图片源码

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h&g ...

  6. ERP售前顾问形象寓意

    几个做销售的朋友一起去X山旅游,一群爱侃的人凑在一起,一顿云山雾罩的神吹是少不了的.突然看到一栋平房前面伸出一个大大的幌子:铁嘴铜牙.下面一行小字:不灵不要钱(管理专家:提供专业解决方案). 销售都是 ...

  7. lua面向对象封装及元表(metatable)性能测试

    Lua本身是没有面向对象支持的,但面向对象编程在逻辑复杂的大型工程却很有用.于是很多人用Lua本身的数据结构table来模拟面向对象.最简单的一种方法是把对象的方法.成员都放到table中.如: -- ...

  8. nginx本地的测试环境添加SSL

    要在本地添加SSL,首先要做的是防火墙是不是放开了443端口,同时,在nginx安装时是不是支持了ssl模块,这个安装网上很容易找到相关资料 防火墙,个人还是用iptables比较直观 先将selin ...

  9. DedeCMS源码安装

    一.源码下载地址 可以从以下网站下载DedeCMS源码进行安装,这里我下载了AB模板网的一个服装网站源码来演示DedeCMS源码的安装 http://www.adminbuy.cn/dedecms/2 ...

  10. Android应用开发-小巫CSDN博客client之嵌入有米广告

    Android应用开发-小巫CSDN博客client之嵌入有米广告 上一篇博客给大家介绍怎样集成友盟社会化组件,本篇继续带来干货,教大家怎样嵌入广告到应用中去.小巫自称专业对接30年,熟悉各大渠道SD ...