复习下关于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. java并发编程笔记（一）——并发编程简介

    java并发编程笔记(一)--简介 线程不安全的类示例 public class CountExample1 { // 请求总数 public static int clientTotal = 500 ...

  2. spring mvc 程序

    首先我们的界面在返回的时候回根据我们的配置信息进行路径的查找  然后会识别我们的控制器返回的字符串(其实就是界面的名字)而找到界面的信息,eg:如果我们返回的是success那么就会去找我们的WEB- ...

  3. 监控软件munin安装设置

    准备工作需要web环境需要设置epel源 wget -P /etc/yum.repos.d/ http://mirrors.aliyun.com/repo/epel-6.repo 服务器端安装设置 y ...

  4. lucene简单使用

    lucene7以上最低要求jdk1.8 lucene下载地址: http://archive.apache.org/dist/lucene/java/ <dependency> <g ...

  5. Android组件内核之Service内核原理（三）

    阿里P7Android高级架构进阶视频免费学习请点击:https://space.bilibili.com/474380680本篇文章将先从以下三个内容来介绍Service内核原理: [startSe ...

  6. Linux的各个发行版本（一）

    三大流派 1.Slackware SUSE Linux Enterprise Server (SLES) OpenSuse桌面 2.debian 迄今为止最遵循GNU规范的Linux系统 Ubuntu ...

  7. opensns学习

    根据ThinkPHP官方文档学习opensns框架 主要看了下opensns所用的单一入口模式的意义. 基础 opensns目录结构 index.php 入口文件 Application 应用目录(含 ...

  8. shell常见的返回状态码

  9. HashMap循环

    1. Map的四种遍历方式下面只是简单介绍各种遍历示例(以HashMap为例),各自优劣会在本文后面进行分析给出结论. (1) for each map.entrySet()   Java   1 2 ...

  10. CSP 2019 模板整合

    qwq以下都为9.24后写的模板 namespace IO{ const int S = 1 << 20; char I[S + 1], *Is = I, *It = I, O[S + 1 ...