HTML表格嵌套、合并表格

一、表格元素< table>

table常用属性

border：边框像素
width，height：表格宽度/高度
bordercolor：表格边框颜色
bgcolor：表格背景颜色

二、tr，th，td元素

th和td元素是在tr中的
一组tr代表一行
一组th或td代表一列

<table border="1" width="800" bordercolor="#777777" bgcolor="#5f9ea0">

    <tr>

        <th>asa</th>

    </tr>

    <tr>

        <td>hahha</td>

    </tr>

</table>

效果

从以上效果和代码可以看出，th表示表头，会自动居中，td表示普通内容

三、合并单元格(重点)

合并单元格在表格中是最重要的，需要两个属性colspan和rowspan
1.colspan：合并的是该行的单元格，就是同一行不同列的单元格合并，比如colspan=”2”则需要删除该行一个单元格，否则超出格子
2.rowspan：合并的是该列的单元格，同列不同行，与colspan一样若要rowspan=”2”将删除下一列的一个td或th标签，（不管删除下一列的哪一个，这一行被合并，其他元素都是在后面的，除了该列以前元素）

<table border="1" width="70" bordercolor="#777777" bgcolor="#5f9ea0">

    <tr>

        <th>asa</th><th>asas</th><th>as</th>

    </tr>

<tr>

    <td rowspan="2">hahha</td><td>hahha</td><td>hahha</td>

</tr>    <!-- rowspan合并该列的两个单元格，所以它的下一列将删除一个单元格-->

    <tr>

        <td colspan="2">hahha</td>

    </tr>   <!--colspan合并该行的2个单元格，所以该行删除一个标签-->

    <tr>

        <td>hahha</td><td>hahha</td><td>hahha</td>

    </tr>

</table>

效果

四、表格嵌套

- 在某个th或td中加table
- 最好在嵌套表格的地方用合并单元格（就是把嵌套的表格放入合并的单元格）

<table border="1" width="800" bordercolor="blue">

    <caption><h1>阿水的阿里blog</h1></caption>

    <tr>

        <th>name</th> <th>password</th> <th>goal</th>

    </tr>

    <tr>

        <th>xlj</th><th colspan="2">001</th>

    </tr>

    <tr>

        <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue">

        <caption><h1>阿水的阿里blog</h1></caption>

        <tr>

            <th>name</th><th>password</th><th>goal</th>

        </tr>

        <tr>

            <th>xlj</th><th colspan="2">001</th>

        </tr>

        <tr>

            <th>asa</th><th rowspan="2">002</th><th>88</th>

        </tr>

        <tr>

            <th>add</th><th>76</th>

        </tr>

    </table></th><th>88</th>

    </tr>

    <tr>

        <th>add</th><th>76</th>

    </tr>

</table>

五、表格练习代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>阿水的阿里</title>

</head>

<body>

<table border="1" width="800" bordercolor="blue">

    <caption><h1>阿水的阿里blog</h1></caption>

    <tr>

        <th>name</th> <th>password</th> <th>goal</th>

    </tr>

    <tr>

        <th>xlj</th><th colspan="2">001</th>

    </tr>

    <tr>

        <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue">

        <caption><h1>阿水的阿里blog</h1></caption>

        <tr>

            <th>name</th><th>password</th><th>goal</th>

        </tr>

        <tr>

            <th>xlj</th><th colspan="2">001</th>

        </tr>

        <tr>

            <th>asa</th><th rowspan="2">002</th><th>88</th>

        </tr>

        <tr>

            <th>add</th><th>76</th>

        </tr>

    </table></th><th>88</th>

    </tr>

    <tr>

        <th>add</th><th>76</th>

    </tr>

</table>

</body>

</html>

效果

以上的表格标题在table中写：

< caption>< h1>阿水的阿里blog< /h1>< /caption>
caption是表格标题居中，并且一直跟着表格，不管表格怎么移动

HTML表格嵌套、合并表格的更多相关文章

element-ui中的表格嵌套表格
element-ui中有详细的各种表格及表格方法.也有表格展开出现二级的样式,但是却没有表格嵌套二级表格的方案,于是就自己写了一个,样式图如下: 展开后如下这就是一个普通的二级表格嵌套,用的是el- ...
jquery插入复杂表格，合并行列
此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值或者说我没找到再或者可以做个隐藏数据列 ...
使用jquery合并表格中相同文本的相邻单元格
一.效果二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...
JQuery合并表格单元格
转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格一.需求如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...
JS自动合并表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
ASP.NET中重复表格列合并的实现方法(转自脚本之家)
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...
dsplay:table页面合并表格
在实际项目中经常会遇到合并表格的情形,现在我将自己合并的方法写出来,供大家教参一下,顺便自己也作个备忘. <%@ page language="java" contentTy ...
datagrid-detailview.js easyui表格嵌套
datagrid-detailview.js easyui表格嵌套
jqgrid嵌套子表格
jqgrid的subGrid子表格 jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单.使用的方式有两种: 使用普通的subGrid子表格: 使用一个完整jqGrid作为子表格: 1.选项含 ...

随机推荐

表格和网页ico图标
表格: 表格格式: <table> <tr> 表格的行 <th >表头</th> <th>表头 </th> </tr> ...
基于flash-marker.js 的地图标注闪烁代码调试
修改网上流传的flash-marker.js (function (global, factory) { typeof exports === 'object' && typeof m ...
【JS】实时监控页面，input框数值自动求和
需求: 有一个页面需要将input框填入的各个费用自动相加,添加到“合计费用”里. 解决方案: 使用jquery的blur实践,每个费用的Input框检测到失去焦点时,将所有的input框数值相加求和 ...
2019年Vue学习路线图
https://juejin.im/entry/5c108864f265da61726555ed 官网: https://cn.vuejs.org/index.html js引入地址 https:// ...
常用模块之 os,json,shelve,xml模块
os 即操作系统在 os 中提供了很多关于文件,文件夹,路径处理的函数这是我们学习的重点 os.path 是os模块下专门用于处理路径相关的 python是一门跨平台语言,由于每个平台路径规则不同 ...
精通SpringBoot--整合Redis实现缓存
今天我们来讲讲怎么在spring boot 中整合redis 实现对数据库查询结果的缓存.首先第一步要做的就是在pom.xml文件添加spring-boot-starter-data-redis.要整 ...
GoF23种设计模式之创建型模式之原型模式
一.概述用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 二.适用性 1.当一个系统应该独立于它的产品创建.构成和表示的时候. 2.当要实例化的类是在运行时刻指定的时候,例如:通过动 ...
openstack源
为了红帽系在云计算的市场份额,CentOS推出了官方openstack软件源. http://mirrors.ustc.edu.cn/centos/6/cloud/x86_64/openstack-j ...
MapReduce进行数据查询和实现推简单荐系统
1 运行环境说明 1.1 硬软件环境 1.2 机器网络环境 2 书面作业1:计算员工相关 2.1 书面作业1内容 2.2 实现过程 2.2.1 准备测试数据 2.2.2 问题1:求各个部 ...
使用python实现简单爬虫
简单的爬虫架构调度器 URL管理器管理待抓取的URL集合和已抓取的URL,防止重复抓取,防止死循环功能列表 1:判断新添加URL是否在容器中 2:向管理器添加新URL 3:判断容器是否为空 4: ...

HTML表格嵌套、合并表格

一、表格元素< table>

table常用属性

二、tr，th，td元素

三、合并单元格(重点)

四、表格嵌套

五、表格练习代码

HTML表格嵌套、合并表格的更多相关文章

随机推荐

热门专题