复习下关于html中的表格。

基本结构：

表格由 table 标签为父标签进行包裹，可以在 table 上添加几种属性。

border ： 定义表格的边框。

cellspacing ： 间距，指单元格之间的距离，类似 盒模型中的 margin。

cellpadding ： 补白，指单元格内文字与边框的距离 类似盒模型中的 padding 。

其它 比如 宽高对齐方式，建议使用css进行设置。

tr 标签，表示 行。

td 标签，表示单元格。

表格一般都会设置表头，用来定义一列的信息。

表头设置 用 tr 包裹，表示一行，th 标签 定义表头

<table border="1" align="center" cellspacing="2" cellpadding="10">

    <tr>

        <th>性别</th>

        <th>姓名</th>

        <th>电话</th>

    </tr>

</table>

　　

下面，简单定义一个表格

<table border="1" align="center" cellspacing="2" cellpadding="10">

    <tr>

        <th>性别</th>

        <th>姓名</th>

        <th>电话</th>

    </tr>

    <tr>

        <td>男</td>

        <td>张三</td>

        <td>130000</td>

    </tr>

    <tr>

        <td>男</td>

        <td>李四</td>

        <td>131120</td>

    </tr>

    <tr>

        <td>女</td>

        <td>小红</td>

        <td>4541124</td>

    </tr>

</table>

　　


我们经常需要合并单元格，来显示一些数据

比如，类似下面这样

直接上重点：

rowspan ： 合并行

上图 其实 是 第二行的第三个单元格 合并了 第三行及第四行 的第三个单元格。

合并掉几个，就要在相应的行内，删除掉对应的单元格。

代码如下：

<table border="1" align="center" cellspacing="2" cellpadding="10">

    <tr>

        <th>学科</th>

        <th>分数</th>

        <th>总计</th>

    </tr>

    <tr>

        <td>数学</td>

        <td>80</td>

        <td rowspan="3">123</td>

    </tr>

    <tr>

        <td>语文</td>

        <td>95</td>

    </tr>

    <tr>

        <td>英语</td>

        <td>92</td>

    </tr>

</table>

colspan ：合并单元格

效果如下：

此时，第一行的第一个单元格，合并掉了第一行的第二个单元格，同样的，既然合并了，就需要删除掉对应的单元格。

代码如下：

<table border="1" align="center" cellspacing="2" cellpadding="10">

    <tr>

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

        <td>abc</td>

    </tr>

    <tr>

        <td>123</td>

        <td>abc</td>

        <td>abc</td>

    </tr>

    <tr>

        <td>123</td>

        <td>abc</td>

        <td>abc</td>

    </tr>

</table>

　下面，写一个具体的示例作为参考

效果如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        table{

            border-collapse: collapse;

            width: 500px;

        }

        td,th{

            border: 1px solid #B2C2E3;

            height: 26px;

            text-align: center;

        }

        th{

            background-color: #DBE3F9;

            font-size: 14px;

        }

        td{

            font-size: 12px;

        }

        .noborder{

            border: 0;

            background-color: #ffffff;

            height: 5px;

        }

        .h{

            color: #E33F06;

        }

        .l{

            color: #0C0C6C;

        }

        .tred{

            color: #FF0000;

        }

        .datebg{

            background-color: #F4F7FC;

        }

    </style>

</head>

<body>

<table>

    <thead>

    <tr>

        <th colspan="2">日期</th>

        <th>天气现象</th>

        <th>气温</th>

        <th>风向</th>

        <th>风力</th>

    </tr>

    </thead>

    <tr>

        <td rowspan="2" class="datebg">22日星期五</td>

        <td class="datebg">白天</td>

        <td>晴间多云</td>

        <td class="h">高温7℃</td>

        <td>无持续风向</td>

        <td>微风</td>

    </tr>

    <tr>

        <td class="datebg">夜间</td>

        <td>晴</td>

        <td class="l">低温4℃</td>

        <td>无持续风向</td>

        <td>微风</td>

    </tr>

    <tr>

        <td class="noborder" colspan="7"></td>

    </tr>

    <tr>

        <td rowspan="2" class="tred datebg">23日星期六</td>

        <td class="datebg">白天</td>

        <td>晴间多云</td>

        <td class="h">高温7℃</td>

        <td>无持续风向</td>

        <td>微风</td>

    </tr>

    <tr>

        <td class="datebg">夜间</td>

        <td>晴</td>

        <td class="l">低温4℃</td>

        <td>无持续风向</td>

        <td>微风</td>

    </tr>

</table>

</body>

</html>

　　

以上就是本文的全部内容。

HTML —— 表格的更多相关文章

  1. HTML 表格<table><caption><th><tr><td><thead><tbody><tfoot><col><colgroup>

    <table>标签: 定义和用法: <table>标签定义HTML表格. 简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  2. html-3,table 表格标签 tr th td caption thead tbody tfoot 的简单使用

    <!-- table border='1' style="border-collapse:collapse;" border 表格的像素宽度 border-collapse: ...

  3. HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列

    在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...

  4. HTML——表格table标签，tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  5. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

  6. table的thead,tbody,tfoot

    为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时,table是作为一个整体解释的,使用tbody可以优化显示. 如果表格很长,用tbody分段,可以一部分一部分地显示 ...

  7. table样式测试总结tr td宽度分析

    题外话:一直以来习惯布局用ul,li样式调整比较方便,不会互相影响出现一些问题,but~现在公司涉及很多表格打印,都是用table写的,好多宽度高度合并啊,组合啊~~~,单元格之间互相影响,有的样式设 ...

  8. table标签修改tr,td标签的行距

    修改tr标签的行距,tbale标签的td标签间距 看如下Css文件的代码,其都没有table的tr行距产生效果 tr{ margin-top: 10px; padding: 10px; } td{ m ...

  9. thead tbody tfoot

    <!DOCTYPE html> <html lang="en"> <head> <title>Title</title> ...

  10. html5 表格标签 table tr td

      最重要的三个 <table>     表格声明标签 属性: boarder    边框粗细 style    可配合css 使用 <tr>    行标签 table row ...

随机推荐

  1. Jmeter_Beanshell 返回值中提取参数值

    Jmeter_Beanshell  返回值中提取参数值[准备环境]: ①Jmeter版本:5.1,JDK:1.8 ②前置条件:将json.jar包置于..\apache-jmeter-5.1\lib\ ...

  2. Tomcat负载均衡、调优核心应用进阶学习笔记（五）：Tomcat调优和Tomcat监控（差评）

    文章目录 tomcat调优 tomcat监控 tomcat调优 vi catalina.sh # --------------------------------------------------- ...

  3. python学习笔记：python简介和入门

    编程语言各有千秋.C语言适合开发那些追求运行速度.充分发挥硬件性能的程序.而Python是用来编写应用程序的高级编程语言. Python就为我们提供了非常完善的基础代码库,覆盖了网络.文件.GUI.数 ...

  4. 常用内置模块（一）——time、os、sys、random、shutil、pickle、json

    常用内置模块 一.time模块 在python中,时间分为3种       1.时间戳: timestamp,从1970年1月1日到现在的秒数, 主要用于计算两个时间的差    2.localtime ...

  5. Linux执行Java文件

    最近学习shell脚本,写个简单java类让linux去执行 java类没别的东西,就引了一个fastjson的jar,写了个main方法 序列化一个User对象 打印 package com.lws ...

  6. sql合并字段

    <!-- 对发送方式合并查询 --> <!--查询所有满足条件的营销活动 --> <select id="CRM-MK-ACT-DEFINE-SELECT&qu ...

  7. 转 jmeter 关联

    jmeter(十二)关联之正则表达式提取器   如果有这样的情况:一个完整的操作流程,需要先完成某个操作,获得某个值或数据信息,然后才能进行下一步的操作(也就是常说的关联/将上一个请求的响应结果作为下 ...

  8. connect failed: 127.0.0.1#953: connection refused

    Problem1 : root@jeremy-VirtualBox:/etc/bind# /etc/init.d/bind9 restart * Stopping domain name servic ...

  9. 分布式-技术专区-Redis分布式锁实现-第二步

    再上次篇章中汇集了相关的分布式锁的概念进行控制,接下来我们采用的是注解声明式开发服务方案,进行声明式开发代替编程式开发方案.  1.利用aop实现分布式锁2.只用在方法上加个注解,同时加上了重试机制 ...

  10. shell 脚本文件类型.sh ，变量

    1. shell脚本编程的基本过程 (1)建立shell文件,以 .sh 结尾的文件 (2)赋予shell文件执行权限,chmod 0777 文件名 (3)执行shell文件, ./ 文件名 或者ba ...