复习下关于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. ASP.NET Core项目目录结构介绍

    我们下面通过在Visual Studio 2017中创建一个空的Web应用程序来详细说明下asp.net core项目目录结构: 1.项目结构说明 (1).依赖项 这里主要分两部分SDK, 目前这两部 ...

  2. 03 java语言基础逻辑运算符

    03.01_Java语言基础(逻辑运算符的基本用法) A:逻辑运算符有哪些 &,|,^,! &&,|| B:案例演示 逻辑运算符的基本用法 注意事项: a:逻辑运算符一般用于连 ...

  3. #include和前置声明(forward declaration)

    #include和前置声明(forward declaration) 1.    当不需要调用类的实现时,包括constructor,copy constructor,assignment opera ...

  4. python基础【第七篇】

    字典 列表可以存储大量的数据类型,但是只能按照顺序存储,数据与数据之间关联性不强. 所以咱们需要引入一种容器型的数据类型,解决上面的问题,这就需要dict字典. 字典(dict)是python中唯⼀的 ...

  5. JAVA计算整数的位数

    /** * 计算整数的位数 * @param x * @return */ public static int countIntegerLength(int x){ final int [] size ...

  6. 2018-8-10-win10-uwp-dataGrid

    title author date CreateTime categories win10 uwp dataGrid lindexi 2018-08-10 19:16:51 +0800 2018-2- ...

  7. dill：解决python的“AttributeError: Can't pickle local object”及无法pickle lambda函数的问题

    python的pickle是用来序列化对象很方便的工具,但是pickle对传入对象的要求是不能是内部类,也不能是lambda函数. 比如尝试pickle这个内部类: 结果会报错AttributeErr ...

  8. dubbo-源码阅读之服务发布

    原理 dubbo根据spring 2.0的schma实现 解析xml并初始化相关bean 初始化dubbo:service为ServiceBean实例  通过spring的生命周期相应回调实现服务发布 ...

  9. ICPC2008哈尔滨-E-Gauss Elimination

    题目描述 Li Zhixiang have already been in “Friendship” ocean-going freighter for three months. The excit ...

  10. BZOJ 4289 最短路+优化建图

    题意:给出一个N个点M条边的无向图,经过一个点的代价是进入和离开这个点的两条边的边权的较大值,求从起点1到点N的最小代价.起点的代价是离开起点的边的边权,终点的代价是进入终点的边的边权. 解法:参考h ...