定义和用法

<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基础(四)表格的更多相关文章

  1. Bootstrap <基础五>表格

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...

  2. Bootstrap<基础四> 代码

    Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...

  3. Python全栈开发【基础四】

    Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...

  4. Python 基础 四 面向对象杂谈

    Python 基础  四  面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...

  5. C#_02.13_基础四_.NET方法

    C#_02.13_基础四_.NET方法 一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头  AND  方法 ...

  6. day 68 Django基础四之模板系统

      Django基础四之模板系统   本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法   模板渲染的官方文档 关 ...

  7. day 54 Django基础四之模板系统

    Django基础四之模板系统   本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法   模板渲染的官方文档 关于模 ...

  8. Django基础四之测试环境和ORM查询

    Django基础四之测试环境和ORM查询 目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...

  9. django-rest-framework 基础四 过滤、排序、分页、异常处理

    django-rest-framework 基础四 过滤.排序.分页.异常处理 目录 django-rest-framework 基础四 过滤.排序.分页.异常处理 1. 过滤 1.1 内置过滤类 1 ...

  10. PHP全栈开发(四): HTML 学习(1.基础标签+表格标签)

    简单的学习一下HTML 学习HTML采用在www.runoob.com上学习的方法. 而且该网站还提供在线编辑器. 然后HTML编辑器使用Notepad++ 记得上Emmet的官网http://emm ...

随机推荐

  1. codeforces 724D

    注意到要字典序最小,从而变为水题. 从a选到z,每次必然是先看选部分当前字符x是否能满足覆盖,若不能则选上所有的字母x,不然break,输出答案. 进行26次dp即可. #include <cs ...

  2. ubuntu scp命令或者用root连接ssh提示:Permission denied, please try again.错误

    1.su - #!!! 2.vi /etc/ssh/sshd_config 3.PermitRootLogin yes # 找到此字段,改为此行所示 4./etc/init.d/ssh restart ...

  3. 036--MySQL扩展

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...

  4. 任务13:在Core Mvc中使用Options

    13 新建Controllers文件夹,在里面添加HomeController控制器 新建Views文件夹,再新建Home文件夹.再新建Index.cshtml的视图页面 注释上节课的代码,否则我们的 ...

  5. hdu1829&&poj2492 A Bug's Life 基础种类并查集

    把性别相同的虫子放在同一个集合,然后每读入一对虫子号,判断它们在不在同一集合,在则同性别,不在则继续 #include <cstdio> #include <cstring> ...

  6. JAVA学习笔记(一)配置环境

    java语言的两种机制: Java 的虚拟机机制(JVM):虚拟机机制保证Java程序的跨平台特性. Java 的垃圾回收机制:垃圾回收机制保证Java程序更安全.更高效. 环境搭配:安装JDK和JR ...

  7. 喵哈哈村的魔法考试 Round #3 (Div.2) ABCDE

    官方题解:http://www.cnblogs.com/qscqesze/p/6480284.html 哗啦啦村的刁难(1) 描述 哗啦啦村作为喵哈哈村的对头,于是他们准备给喵哈哈村一个好看. 哗啦啦 ...

  8. 转 Oracle最新PSU大搜罗

    Quick Reference to Patch Numbers for Database/GI PSU, SPU(CPU), Bundle Patches and Patchsets (文档 ID ...

  9. ML——决策树模型

    决策树模型 优点:高效简单.易于理解,可以处理不相关特征. 缺点:容易过拟合,训练集在特征上是完备的 决策树过程:特征选择.划分数据集.构建决策树.决策树剪枝 决策树选择最优的划分特征,将数据集按照最 ...

  10. PHP pack和unpack函数详解

    pack 压缩资料到位字符串之中. 语法: string pack(string format, mixed [args]...); 返回值: 字符串 函数种类: 资料处理 内容说明 本函数用来将资料 ...