HTML基础（四）表格

定义和用法

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

创建一个两行三列的表格

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

   <table>

       <tr>

           <td>2017</td>

           <td>2018</td>

           <td>2019</td>

       </tr>

       <tr>

           <td>6000</td>

           <td>8000</td>

           <td>10000</td>

       </tr>

   </table>

</body>

</html>

如果要给表格加上边框，就要在table标签里加上border属性

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

   <table border="1">

       <tr>

           <td>2017</td>

           <td>2018</td>

           <td>2019</td>

       </tr>

       <tr>

           <td>6000</td>

           <td>8000</td>

           <td>10000</td>

       </tr>

   </table>

</body>

</html>

这样就给表格加上了1像素的边框

带表头的表格

<th>…</th>    <!– 表格头，内容居中、加粗显示-->

带标题的表格，要放在table标签的下面，

一个表格只能定义一个标题

<table>

    <caption>…</caption>   <!– 表格标题，居中显示-->

</table>

带结构的表格

不影响布局，但是当表格比较多的时候，不用等到所有表格加载完才显示，会分块显示

表格划分三部分：表头、主体、脚注

• thead：表格的头 （放标题之类内容）

• tbody：表格的主体 （放数据本体）

• tfoot：表格的脚 （放表格的脚注）

<table>

    <caption>…</caption>

    <thead>

        <tr>

            <th>表头</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>主体</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>脚注</td>

        </tr>

    </tfoot>

</table>

表格属性

table的属性

table标签除了具有html元素中通用的属性外，还含有自己的属性，常用属性如下：

bgcolor：规定表格边框的宽度。

cellpadding：规定单元边沿与其内容之间的空白，一个单元格的大小

cellspacing：规定单元格之间的空白。

frame：规定外侧边框的哪个部分是可见的。

rules：规定内侧边框的哪个部分是可见的。

summary：规定表格的摘要。

width：规定表格的宽度。

frame属性

void    不显示外侧边框。

above   显示上部的外侧边框。

below   显示下部的外侧边框。

hsides  显示上部和下部的外侧边框。

vsides  显示左边和右边的外侧边框。

lhs     显示左边的外侧边框。

rhs     显示右边的外侧边框。

box     在所有四个边上显示外侧边框。

border  在所有四个边上显示外侧边框

rules属性

none     没有线条。

groups   位于行组和列组之间的线条。

rows     位于行之间的线条。

cols     位于列之间的线条。

all      位于行和列之间的线条。

tr标签属性

td和th标签属性

<thead>、<tbody>和<tfoot>标签属性

跨列属性colspan

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

   <table border="1">

        <tr>

            <td>111</td>

            <td>222</td>

            <td>333</td>

        </tr>

        <tr>

            <td>444</td>

            <td>555</td>

            <td>666</td>

        </tr>

    </table>

</body>

</html>

合并

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

   <table border="1">

        <tr>

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

            <td>333</td>

        </tr>

        <tr>

            <td>444</td>

            <td>555</td>

            <td>666</td>

        </tr>

    </table>

</body>

</html>

跨行属性rowspan

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

   <table border="1">

        <tr>

            <td rowspan="2">111</td>

            <td>222</td>

            <td>333</td>

        </tr>

        <tr>

            <td>555</td>

            <td>666</td>

        </tr>

    </table>

</body>

</html>

表格嵌套

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

   <table border="1">

        <tr>

            <td>111</td>

            <td>222</td>

            <td>333</td>

        </tr>

        <tr>

            <td>444</td>

            <td>

                <table border="1">

                    <tr>

                        <td>aaa</td>

                        <td>bbb</td>

                        <td>ccc</td>

                    </tr>

                    <tr>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>fff</td>

                    </tr>

                </table>

            </td>

            <td>666</td>

        </tr>

    </table>

</body>

</html>

小练习

完成以下表格样式

<!DOCTYPE html>

<html lang="en">

<head>

     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

</head>

<body>

    <table border="5" width="500px" align="center" cellspacing="0" cellpadding="10">

        <caption>互联网工资</caption>

        <thead align="center">

            <tr bgcolor="green">

                <th rowspan="2">城市</th>

                <th colspan="2">2017年</th>

                <th rowspan="2">2018年</th>

                <th rowspan="2">2019年</th>

            </tr>

        <tr bgcolor="green">

            <td>上半年</td>

            <td>下半年</td>

        </tr>

        </thead>

        <tbody align="center">

            <tr>

                <td bgcolor="#deb887">甘肃</td>

                <td>5500</td>

                <td>4550</td>

                <td>9900</td>

                <td>7200</td>

            </tr>

            <tr>

                <td bgcolor="#deb887">浙江</td>

                <td>9000</td>

                <td>6666</td>

                <td>1200</td>

                <td>3000</td>

            </tr>

        </tbody>

        <tfoot align="center">

                <tr >

                <td bgcolor="#deb887">上海</td>

                <td>1000</td>

                <td>5555</td>

                <td>4000</td>

                <td>8000</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

HTML基础（四）表格的更多相关文章

Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签描述 <table> 为表格添加基础样式. <thead> 表格 ...
Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理迭代器三元表达式列表解析与生成器表达式生成器匿名函数 lamb ...
Python 基础四面向对象杂谈
Python 基础四面向对象杂谈一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...
C#_02.13_基础四_.NET方法
C#_02.13_基础四_.NET方法一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头 AND 方法 ...
day 68 Django基础四之模板系统
Django基础四之模板系统本节目录一语法二变量三过滤器四标签Tags 五模板继承六组件七自定义标签和过滤器八静态文件相关一语法模板渲染的官方文档关 ...
day 54 Django基础四之模板系统
Django基础四之模板系统本节目录一语法二变量三过滤器四标签Tags 五模板继承六组件七自定义标签和过滤器八静态文件相关一语法模板渲染的官方文档关于模 ...
Django基础四之测试环境和ORM查询
Django基础四之测试环境和ORM查询目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...
django-rest-framework 基础四过滤、排序、分页、异常处理
django-rest-framework 基础四过滤.排序.分页.异常处理目录 django-rest-framework 基础四过滤.排序.分页.异常处理 1. 过滤 1.1 内置过滤类 1 ...
PHP全栈开发（四）: HTML 学习（1.基础标签+表格标签）
简单的学习一下HTML 学习HTML采用在www.runoob.com上学习的方法. 而且该网站还提供在线编辑器. 然后HTML编辑器使用Notepad++ 记得上Emmet的官网http://emm ...

随机推荐

asp.net MVC 单选按钮的使用
单选按钮的标准的html 语法 <form><input type="radio" name="sex" value="male&q ...
利用ASP .NET Core的静态文件原理实现远程访问Nlog日志内容及解决遇到的坑
最近项目上试运行发现,很多时候网站出了问题或者某个功能不正常,常常需要运维人员去服务器里面查看一下日志,看看日志里面会产生什么异常,这样导致每次都要去远程服务器很不方便,有时服务器是客户保管的不能让我 ...
AppBoxFuture(七): 分布式外键约束
关系数据库与NoSql其中的一个主要区别是具备完整的外键约束,虽说现在一些大厂在设计数据存储结构时禁止使用外键约束,靠业务逻辑来保证数据完整性,但考虑到是人就会犯错,为了保证关键业务数据的完整性, ...
on a null object reference 问题的解决办法
FATAL EXCEPTION: …… java.lang.RuntimeException: Unable to start activity ComponentInfo…… ava.lang.Nu ...
PAT 1035 插入与归并（25）
原题:https://pintia.cn/problem-sets/994805260223102976/problems/994805286714327040传送门: 根据维基百科的定义: 插入排序 ...
stylus基础教程,stylus实例教程,stylus语法总结
stylus特点富于表现力.具有健壮性.功能丰富.动态编码不需要写CSS的冒号.分号.大括号和LESS.SASS功能类似,会这些的入手很快stylus特点安装使用stylus语法(一)选择器(二)变量 ...
codeforces 615 D. Multipliers (数论 + 小费马定理 + 素数)
题目链接: codeforces 615 D. Multipliers 题目描述: 给出n个素数,这n个素数的乘积等于s,问p的所有因子相乘等于多少? 解题思路: 需要求出每一个素数的贡献值,设定在这 ...
JavaScript--数组常用方法总结
JavaScript--数组常用方法总结测试模板: var arr = ["a", "b", "c", "d", &q ...
scau 17967 大师姐唱K的固有结界分类暴力 + RMQ
由于能放两次,那么分类, 1.连续使用,(这个直接O(n^2)暴力) 2.分开使用. 分开使用的话,首先暴力枚举,用T时间,能从第1个位置,唱到第几首歌,然后剩下的就是从pos + 1, n这个位置, ...
MonoBehaviour生命周期
MonoBehaviour生命周期上图中重要的信息点很多,需要特别注意的是所有脚本的Awake方法都执行完才会执行Start,但是如果在Awake 中开启了一个协程这个协程中每一帧执行一些操作然后等 ...