定义和用法

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

	


随机推荐
	

    
									
  1. Collection View Programming Guide for iOS---(七)---Custom Layouts: A Worked Example
			
    Custom Layouts: A Worked Example Creating a custom collection view layout is simple with straightfor ...
    
			
    2. 
						
  2. CMDB资产采集笔记
			
    一.资产采集四种方式 1. Agent方式 API:Django接收数据并入库 程序:放置在每台服务器 应用场景:针对服务器较多的公司 步骤一: #执行本地命令的库 import subprocess ...
    
			
    3. 
						
  3. ccflow汇总帖
			
    视频教程学习 公司电脑路径; E:\开源工作流\ccflow佳怡物流版\ccflow\doc cclfow的码云地址: https://gitee.com/opencc/ccflow 在线demo演示 ...
    
			
    4. 
						
  4. git status -s 的表达式的读法
			
     1  2  读法  解决方案  ??    未被追踪  git add -A 或git add 文件路径  A    新添加文件 注:??被add后的状态  OK,等待commit.  M    已 ...
    
			
    5. 
						
  5. 51nod1127【尺取】
			
    思路: 尺取,写挫了,debug了半天. #include <bits/stdc++.h> using namespace std; typedef long long LL; const ...
    
			
    6. 
						
  6. PTA 朋友圈【并查集的合并问题】
			
    一开始,考虑的是每次就是把第一个作为祖先,这样很明显是错误的,比如 7 4 3 1 2 3 2 4 2 3 5 6 7 1 6 所以这正是更好地体现对于集合的代表.只有把所有的元素合并一下,然后选一个 ...
    
			
    7. 
						
  7. bzoj 3676: [Apio2014]回文串【回文自动机】
			
    回文自动机板子 或者是SAM+manacher+倍增,就是manacher求本质不同回文串(让f++的串),然后在SAM倍增查询对应点出现次数 #include<iostream> #in ...
    
			
    8. 
						
  8. JAVA实训总结：继承-——子类创建对象原理
			
    继承关键字:extends Java只允许单继承存在 不可以被继承的东西: 1.private成员 体现了java的封装特点,外部类只允许set()get()方法调用,若无set()方法,则类创建的对 ...
    
			
    9. 
						
  9. iOS 自建企业级应用（In-House）分发平台
			
    注意事项 自建分发平台,首先需要有一个可以提供下载功能的服务器,而且服务器需要支持HTTPS协议! 其实,使用七牛云就可以完成这些操作. 推荐方案 七牛云实践方案简述(感兴趣的朋友可以和我交流具体的实 ...
    
			
    10. 
						
  10. linux虚拟机时间不准的问题
			
    如果时区不准, 使用tzselect命令(timezone选择),选择北京时间.然后把输出的命令写入/etc/profile.d/time.sh里. 然后用crontab写定时任务,每天执行一次. 3 ...
    
			
    11.