一、表格元素< 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表格嵌套、合并表格的更多相关文章

  1. element-ui中的表格嵌套表格

    element-ui中有详细的各种表格及表格方法.也有表格展开出现二级的样式,但是却没有表格嵌套二级表格的方案,于是就自己写了一个,样式图如下: 展开后如下 这就是一个普通的二级表格嵌套,用的是el- ...

  2. jquery插入复杂表格，合并行列

    此方法为个人测试所写,针对各种兼容性问题还未测试,初写的目的是easyui复杂表头有些缺陷,比如某个表头合并两列, 在easyui中这样操作无法绑定两个值 或者说我没找到 再或者 可以做个隐藏 数据列 ...

  3. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  4. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  5. JS自动合并表格

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  7. dsplay:table页面合并表格

    在实际项目中经常会遇到合并表格的情形,现在我将自己合并的方法写出来,供大家教参一下,顺便自己也作个备忘. <%@ page language="java" contentTy ...

  8. datagrid-detailview.js easyui表格嵌套

    datagrid-detailview.js easyui表格嵌套

  9. jqgrid嵌套子表格

    jqgrid的subGrid子表格 jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单.使用的方式有两种: 使用普通的subGrid子表格: 使用一个完整jqGrid作为子表格: 1.选项含 ...

随机推荐

  1. fstatfs/statfs详解

    [fstatfs/statfs系统调用]       功能描述:   查询文件系统相关的信息.     用法:   #include <sys/vfs.h>    /* 或者 <sy ...

  2. 设置虚拟机里的Centos7的IP

    输入ip查询命名 ip addr  也可以输入 ifconfig查看ip,但此命令会出现3个条目,centos的ip地址是ens33条目中的inet值. 发现 ens33 没有 inet 这个属性,那 ...

  3. python内置函数-排列组合函数

    product 笛卡尔积 (有放回抽样排列) permutations 排列 (不放回抽样排列) combinations 组合,没有重复 (不放回抽样组合) combinations_with_re ...

  4. python编写定时执行脚本

    前几天在抓博客园文章,打算每天抓10条最新的,所以就在脚本中加了定时让它在每天凌晨四点中时执行,但是昨天发现,报错了: 显示是远程主机强制关闭了一个链接, 原因是:mysql数据库默认当连续8小时不对 ...

  5. 记忆化搜索：HDU1078-FatMouse and Cheese（记忆化搜索）

    FatMouse and Cheese Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...

  6. Linux命令之---which简单介绍

    命令简介 which命令的作用是,在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果.也就是说,使用which命令,就可以看到某个系统命令是否存在,以及执行的到底是哪一个位置的 ...

  7. CSS需要注意的问题1（转生活因拼搏而精彩的网易博客）

      1.检查HTML元素(如:<ul>.<div>).属性(如:class=”")是否有拼写错误.是否忘记结束标记(如:<br />) 因为Xhtml 语 ...

  8. Java Integer于Int 进行==双等于的内存比较时的一些问题说明

    转自: https://blog.csdn.net/xingkongdeasi/article/details/79618421 部分有所修改: 前言: 越是简单的东西,我们往往越是没有去把它明白,但 ...

  9. 数据库路由中间件MyCat - 使用篇（1）

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 基本概念 直接介绍概念太枯燥了,还是拿个和背景篇相似的例子介绍 业务场景:客户完成下单,快递员接受并更新运单 ...

  10. Python-S9-Day99——Web前端框架之Vue.js

    01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...