复习下关于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. 用 Flask 来写个轻博客 (13) — M(V)C_WTForms 服务端表单检验

    目录 目录 前文列表 WTForms WTF 的基础使用 常用的字段类型 fieldsDateField fieldsIntegerField fieldsFloatField fieldsStrin ...

  2. Python模块学习之xlrd 读取Excel时传入formatting_info=True报错：NotImplementedError: formatting_info=True not yet implemented

    问题:xlrd读取Excel时传入 formatting_info=True 报错 之前我们使用读取xls文件的时候都是使用的xlrd库,但是这个库只能操作 .xls格式,对于后来的 .xlsx的版本 ...

  3. 18. HTTP协议一：概述、原理、版本、请求方法

    HTTP协议概述 HTTP协议就是我们常说的超文本协议(HyperText Transfer Protocol).HTTP协议是互联网上应用最为广泛的一种网络协议.所有的WWW文件都必须遵守这个标准. ...

  4. jupyter notebook的魔法命令 % %%

    Magic单元分为两种,一种是line magics,另外一种cell magics. Line magic是通过在前面加%,表示magic只在本行有效. Cell magic是通过在前面加%%,表示 ...

  5. jmeter beanshell postprocessor 使用

    String newtoken=bsh.args[0];print(newtoken);${__setProperty(newtoken,${token},)}; String newcompanyI ...

  6. java jpa 实体关联

    关联关系: 1. One to One 2. One to Many 3. Many to One 4 Many to Many 映射: 延迟加载 @Basic(fetch = FetchType.L ...

  7. 牛客练习赛53 C 富豪凯匹配串

    思路: bitset的简单题,不幸的是当时的我并不知道bitset, C++的 bitset 在 bitset 头文件中,它是一种类似数组的结构,它的每一个元素只能是0或1,每个元素仅用1bit空间, ...

  8. rem 布局代码

    根据设计稿的高度,除以相对应的数字 <script type="text/javascript"> // 把尺寸放大N倍(N是window.devicePixelRat ...

  9. ubuntu安装goland

    安装goland 首先下载goland https://www.jetbrains.com/zh/go/specials/go/go.html?utm_source=baidu&utm_med ...

  10. linux执行wget url时提示“无法建立 SSL 连接”

    linux执行wget url时提示“无法建立 SSL 连接” 原因: wget在使用HTTPS协议时,默认会去验证网站的证书,而这个证书验证经常会失败 解决方案: 1.加上参数“--no-check ...