1.colspan && rowspan均在td标签中使用

2.每个单元格大小一致的前提

<table border="1" bordercolor="red">
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
</table>

效果:

colspan属性代码:

<table border="1" bordercolor="red">
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td colspan="3">nokiacomputer</td>
</tr>
</table>
效果:

全面举例说明:

一行一列的表格:

<table>

<tr>

<td></td>

</tr>

</table>

一行两列的表格:

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

一行三列的表格:

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

两行一列的表格:

<table>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</table>

两行两列的表格:

<table>

<tr>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

</tr>

</table>

有趣的现象:

<table border="1" bordercolor="red">
<tr>
    <td rowspan="2">nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
</table>

效果:

而在第二行去掉一个<td>nokiacomputer</td>时 ,

代码如下:

<table border="1" bordercolor="red">
<tr>
    <td rowspan="2">nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
<tr>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
    <td>nokiacomputer</td>
</tr>
</table>

效果:

为什么多一列时会自动向后排?

多两列时会不会也是这样的?

效果:

果然如此!

html之colspan && rowspan讲解的更多相关文章

  1. IE下默认TD colspan rowspan值为1

    IE下默认TD colspan rowspan值为1,即使这个TD没有合并没有rowspan,colspan属性,其值都为1,chrome下正常. 判断是否rowspan colspan为TD.get ...

  2. table表格中的 colspan rowspan cellpadding cellspacing

    横跨两列的单元格: colspan  属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...

  3. jQuery Table2CSV插件(表格转CSV) 完美支持colspan和rowspan

    table2csv:将表格转化为csv数据 参数:一个JSON对象 { 'repeatChar':'拆分单元格填充字符', //默认为null则将单元格值填充到拆分的每个单元格中,如果给定字符串则用给 ...

  4. C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素

    Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. /// <summary> /// Html格式内容 ...

  5. <table>标签总结(colspan跨列 ,rowspan跨行)

    table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...

  6. 全面系统讲解CSS工作应用+面试一步搞定

    [TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...

  7. 冰冻三尺非一日之寒--web来了

    第十四章    html  css 1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. H ...

  8. Windows Community Toolkit 3.0 - UniformGrid

    概述 UniformGrid 控件是一个响应式的布局控件,允许把 items 排列在一组均匀分布的行或列中,以填充整体的可用显示空间,形成均匀的多个网格.默认情况下,网格中的每个单元格大小相同. 这是 ...

  9. Python 21 Django 实用小案例1

    实用案例 验证码与验证   KindEditor      组合搜索的实现 单例模式      beautifulsoup4 验证码与验证 需要安装Pillow模块 pip stall pillow ...

随机推荐

  1. 画画板--第三方开源--DrawableView

    Android上的第三方开源DrawableView支持手写,类似于写字板.DrawableView支持改变画笔颜色,画笔线条粗细,画布的手势缩放和拖曳显示部分区域.并最终支持将手绘的图保存到本地.在 ...

  2. Learning Scrapy笔记(零) - 前言

    我已经使用了scrapy有半年之多,但是却一直都感觉没有入门,网上关于scrapy的文章简直少得可怜,而官网上的文档(http://doc.scrapy.org/en/1.0/index.html)对 ...

  3. 创业日记-关于学习Python

    2015年7月2日 深圳 阴天 学习Python有一个月了,总整感觉Python是一个比较小而灵活的语言. 为什么要学习Python 今年我已入行有9年了,一直在写C#,关于微软的集成环境也用的比较顺 ...

  4. 在openSUSE13.2上gem install rails -v 4.1成功,但是之后不存在rails命令解决

    解决方案为,不要用sudo gem install就好了,卧槽

  5. 转载:监控每个节点(jvm部分)

    操作系统和进程部分 操作系统和进程部分的含义是很清楚的,这里不会描述的很详细.他们列出了基本的资源统计,例如CPU和负载.操作系统部分描述了整个操作系统的情况,进程部分只是描述了Elasticsear ...

  6. JVM学习总结五——性能监控及故障处理工具

    之前扯了四篇理论,这一篇终于可以动动手了.本篇我们将介绍JVM常用的一些工具,这些工具将是我们监控JVM状态.处理故障和调优分析的利器. 不过在开始之前,我还是要先车扯两句:工具终归只是帮助我们我们处 ...

  7. 转:CentOS 7 安装Nginx

    一.准备工作: 1.安装必备工具: ? 1 2 3 $ yum -y install gcc gcc-c++ autoconf automake   $ yum -y install zlib zli ...

  8. 最近对python颇有兴趣

    因为最近租的房子到期了,于是在豆瓣小组找房子,萌生利用python爬虫去抓取小组的房源信息. 最近2个小玩意准备做一下,mark 一下 1.豆瓣租房小组Python爬虫抓取 2.51job 职位抓取

  9. 元音字母A的发音规则

    摘抄自百度文库 A/a的发音比较复杂,归纳起来有10种情况: 一.在重读开音节中读[ei]. 例如: plane [plein]  radio [ˈreidiəu] wake [weik]  pape ...

  10. 利用FormsAuthentication.RedirectFromLoginPage进行身份验证

    web.config中: <authentication>节 格式: <authentication mode="Forms">    //I.Window ...