复习下关于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. Linux命令之解压

    Linux命令之解压 使用tar命令解压.zip文件的时候,遇到如下异常, tar -xzvf guangwang.zip gzip: stdin has more than one entry--r ...

  2. AutoFac控制反转 转载https://blog.csdn.net/u011301348/article/details/82256791

    一.AutoFac介绍 Autofac是.NET里IOC(Inversion of Control,控制反转)容器的一种,同类的框架还有Spring.NET,Unity,Castle等.可以通过NuG ...

  3. JavaScript实现10大算法可视化

    参考博客: https://www.cnblogs.com/Unknw/p/6346681.html#4195503 十大经典算法 一张图概括: 名词解释: n:数据规模 k:“桶”的个数 In-pl ...

  4. 转 Python - openpyxl 读写操作Excel

    Python - openpyxl 读写操作Excel   openpyxl特点   openpyxl(可读写excel表)专门处理Excel2007及以上版本产生的xlsx文件,xls和xlsx之间 ...

  5. zabbix cpu监控介绍

    一.CPU utilization 使用Zabbix查看CPU利用率,会有下面几个值: CPU idle time:空闲的cpu时间比[简称id]CPU user time:用户态使用的cpu时间比[ ...

  6. Java-技术专区-技术栈分析辨证方法

    1.好多公司动不动就JVM.高并发.分布式.微服务等等,我没有实际经验. 2.从事Java开发三年了,目前的职位是高级Java工程师,感觉技术和工资都到了瓶颈,对以后的发展方向有些迷茫. 3.加班时间 ...

  7. Windows IIS7 下安装配置 PHP7.0

    确认Microsoft Visual C++版本 Microsoft Visual C++的版本至关重要,根据Microsoft Visual C++版本下载的PHP不同.        PHP官网的 ...

  8. logging模板

    logging模板是一个专门用来做日至系统的 缺点是不能指定编码格式 import logging#引入logging板块 logging.basicConfig(#这个日志的基本配置 level=, ...

  9. vCenter 6.0 vsca 安装遇到的一些小问题

    在安装vCenter 6.0 vsca的时候,安装插件到第二个的时候,会报出一个windows installer的错误.需要联系软件管理员或者技术支持的一个error. 经过多次的测试,我终于找到了 ...

  10. JavaScript 绑定事件时传递数据

    var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...