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 ...

随机推荐

codeforces 724D
注意到要字典序最小,从而变为水题. 从a选到z,每次必然是先看选部分当前字符x是否能满足覆盖,若不能则选上所有的字母x,不然break,输出答案. 进行26次dp即可. #include <cs ...
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 ...
036--MySQL扩展
一.视图视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. SELECT * FROM ( S ...
任务13：在Core Mvc中使用Options
13 新建Controllers文件夹,在里面添加HomeController控制器新建Views文件夹,再新建Home文件夹.再新建Index.cshtml的视图页面注释上节课的代码,否则我们的 ...
hdu1829&&poj2492 A Bug's Life 基础种类并查集
把性别相同的虫子放在同一个集合,然后每读入一对虫子号,判断它们在不在同一集合,在则同性别,不在则继续 #include <cstdio> #include <cstring> ...
JAVA学习笔记（一）配置环境
java语言的两种机制: Java 的虚拟机机制(JVM):虚拟机机制保证Java程序的跨平台特性. Java 的垃圾回收机制:垃圾回收机制保证Java程序更安全.更高效. 环境搭配:安装JDK和JR ...
喵哈哈村的魔法考试 Round #3 (Div.2) ABCDE
官方题解:http://www.cnblogs.com/qscqesze/p/6480284.html 哗啦啦村的刁难(1) 描述哗啦啦村作为喵哈哈村的对头,于是他们准备给喵哈哈村一个好看. 哗啦啦 ...
转 Oracle最新PSU大搜罗
Quick Reference to Patch Numbers for Database/GI PSU, SPU(CPU), Bundle Patches and Patchsets (文档 ID ...
ML——决策树模型
决策树模型优点:高效简单.易于理解,可以处理不相关特征. 缺点:容易过拟合,训练集在特征上是完备的决策树过程:特征选择.划分数据集.构建决策树.决策树剪枝决策树选择最优的划分特征,将数据集按照最 ...
PHP pack和unpack函数详解
pack 压缩资料到位字符串之中. 语法: string pack(string format, mixed [args]...); 返回值: 字符串函数种类: 资料处理内容说明本函数用来将资料 ...