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. jquery跨域调用wcf

    使用jquery跨域调用wcf服务的时候会报如下错误 $.ajax({ url: 'http://localhost:28207/Service1.svc/GetData', method: 'get ...

  2. 如何查找STM32开发资料

    Ⅰ.概述 该文写给那些处于初学ST芯片开发.英文不好而又想偷懒的人. 该文主要的目的是提醒大家:学习一门技术是需要舍得花功夫,捷径是你在起点与终点之间不断的探索,最终总结出来的一条适合自己的路. 下面 ...

  3. 第四章 管理程序流(In .net4.5) 之 事件和回调

    1. 概述 本章讲解如何使用 委托.lambda表达式 和 匿名方法 来创建和使用事件. 2. 主要内容 2.1 理解委托 委托是一种用方法签名形式定义的类型.可以让它指向其他方法,可以通过它调用其他 ...

  4. 从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第四讲 WPF中 ControlTemplate

    上讲我们介绍了DataTemplate,现在我们就介绍下ControlTemplate,可能后面大多在编码时候会出现一些英文,工作习惯,请见谅. ControlTemplate: 控件的外观,也就是控 ...

  5. Android 虚拟机 Davlik

    Dalvik虚拟机是Google的用于移动设备的Android平台的一个主要部分.虚拟机可运行Java平台应用程序,这些应用程序被转换成紧凑的Dalvik可执行格式(.dex),该格式适合内存和处理器 ...

  6. 对Iframe和图表设置高度的优质代码

    //对Iframe和图表设置高度 function f() { parent.window.setWinHeight(parent.window.document.getElementById(&qu ...

  7. Hive深入浅出

    1.  Hive是什么 1) Hive是什么? 这里引用 Hive wiki 上的介绍: Hive is a data warehouse infrastructure built on top of ...

  8. wordpress 开发日志及技巧收集

    搜索结果数量提示 <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1" ...

  9. VPN错误800、错误789

    VPN突然无法连接解决方法: 1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它:HKEY_LOCAL_MACHINE\System\C ...

  10. Linux 虚拟机和物理机配互信出现无法连接

    配置文件位置:[root@hank-yoon data]# vi /etc/ssh/sshd_configPermitRootLogin yes 在物理机中,装完系统,默认情况下PermitRootL ...