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

随机推荐

高效使用ppt素材
一.素材大致分为: 立体素材:以TG素材为代表的那种高光立体素材平面素材:以咨询公司麦肯锡.罗兰贝格公司为代表的平面设计的素材二.使用原则: 原则一:平面左边,立体右边这个原则告诉你几件事: 如 ...
安装Tomcat（windows系统和linux系统）
Tomcat不管是windows还是Linux版本,都是解压后就再配置一下就可以使用.安装Tomcat前必须先安装JDK,一般我们可以在eclipse中加入Tomcat来开发. 什么是Tomcat? ...
locate的基本用法
一.工作原理 1. locate是通过读取一个或多个由updatedb命令生成的数据库来查找文件的,而updatedb由计划任务程序cron每天运行来更新缺省的数据库(/var/lib/mlocate ...
IDEA打开父类的接口方法快捷键
有两个类,分别为A类是接口.B类为A的实现类. 如果想在B类里的某个方法,打开A类可以鼠标右键点击这个方法名,按下键盘:Ctrl+U,就可以跳转到A类接口的该方法上面.
黑客攻防技术宝典web实战篇：攻击应用程序逻辑习题
猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 何为强制浏览?可以通过它确定哪些漏洞? 强制浏览包括避开浏览器导航对应用程序功能访问顺序实 ...
NowCoder数列
题目:https://www.nowcoder.com/questionTerminal/0984adf1f55a4ba18dade28f1ab15003 #include <iostream& ...
hdu1232 畅通工程基础并查集
#include <cstdio> #include <cstring> #include <algorithm> #include <cstdlib> ...
h5-24-百度地图-地址解析
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Netbeans自定义折叠代码
只需要在模块开始注释以//<editor-fold>开始, 在模块结束行以 //</editor-fold>结束即可 Can I Create Custom Code Fold ...
Backbone学习记录（4）
事件绑定 on()方法调用格式:object.on(event, callback, [context])"change" — 当attributes变化时"chan ...