html之colspan && rowspan讲解

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>

</tr>

</table>

一行两列的表格：

<table>

<tr>

</tr>

</table>

一行三列的表格：

<table>

<tr>

</tr>

</table>

两行一列的表格：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

两行两列的表格：

<table>

<tr>

</tr>

<tr>

</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讲解的更多相关文章

IE下默认TD colspan rowspan值为1
IE下默认TD colspan rowspan值为1,即使这个TD没有合并没有rowspan,colspan属性,其值都为1,chrome下正常. 判断是否rowspan colspan为TD.get ...
table表格中的 colspan rowspan cellpadding cellspacing
横跨两列的单元格: colspan 属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...
jQuery Table2CSV插件(表格转CSV)完美支持colspan和rowspan
table2csv:将表格转化为csv数据参数:一个JSON对象 { 'repeatChar':'拆分单元格填充字符', //默认为null则将单元格值填充到拆分的每个单元格中,如果给定字符串则用给 ...
C&num; Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素
Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. /// <summary> /// Html格式内容 ...
&lt&semi;table&gt&semi;标签总结（colspan跨列，rowspan跨行）
table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...
全面系统讲解CSS工作应用+面试一步搞定
[TOC] 一.课程介绍二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...
冰冻三尺非一日之寒--web来了
第十四章 html css 1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. H ...
Windows Community Toolkit 3&period;0 - UniformGrid
概述 UniformGrid 控件是一个响应式的布局控件,允许把 items 排列在一组均匀分布的行或列中,以填充整体的可用显示空间,形成均匀的多个网格.默认情况下,网格中的每个单元格大小相同. 这是 ...
Python 21 Django 实用小案例1
实用案例验证码与验证 KindEditor 组合搜索的实现单例模式 beautifulsoup4 验证码与验证需要安装Pillow模块 pip stall pillow ...

随机推荐

AC&lowbar;Dream 1211 Reactor Cooling
/* 题意:无源无汇,并且每条边的容量有上下界限的网络流问题!既然无源无汇,那么素有的节点都应该满足“入流==出流”! 输出每一条边的流量,使得满足上面的条件.(如果u->v有流量,那么v-&g ...
mysql中key 、primary key 、unique key 与index区别
一.key与primary key区别 CREATE TABLE wh_logrecord ( logrecord_id ) NOT NULL auto_increment, ) default NU ...
android学习日记19--四大组件之Services(服务)
一个Android应用主要由四个基本组件组成,Android四大基本组件分别是Activity,Content Provider内容提供者,Service服务,BroadcastReceiver广播接 ...
浅谈NoSQL之MongoDB数据库
对于SQL数据库(关系型数据库)我们大家都有所了解,比如MySQL,sqlserver,oracle等数据库.在日常的开发过程中我们遇到服务器端的数据存储时几乎第一反应就是使用SQL据库像我们最常见的 ...
angularjs ng-bind-html的用法总结
angular中的$sanitize服务. 此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: ng-bing- ...
Nginx入门讲解——初步认识了解nginx&period;conf配置文件以及配置多个虚拟主机
本文引自网络进攻学习之用https://blog.csdn.net/weixin_38111957/article/details/81080539 一. 引言上节文章讲述了如何用信号控制Nginx服 ...
spring(二、bean生命周期、用到的设计模式、常用注解)
spring(二.bean生命周期.用到的设计模式.常用注解) Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的. ...
shell统计当前文件夹下的文件个数、目录个数
1. 统计当前文件夹下文件的个数 ls -l |grep "^-"|wc -l 2. 统计当前文件夹下目录的个数 ls -l |grep "^d"|wc -l ...
zoj 3762（求三角形的最大高）
给出n个点,要你找到一个三角形,它的高是最长的. 思路:暴力超时了,是用先找出n个点与其他点的最长边,再枚举顶点过的.......具体证明不知道..... #include<algorithm& ...
NodeJS学习笔记四
Generator简介基本概念 Generator函数有多种理解角度.从语法上,首先可以把它理解成,Generator函数是一个状态机,封装了多个内部状态. 执行Generator函数会返回一个遍历 ...