HTML表格概念、语法、操作、案例

创建两行三列表格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table border="1">

        <tr>

            <td>2018年</td>

            <td>2019年</td>

            <td>2020年</td>

        </tr>

        <tr>

            <td>8000</td>

            <td>10000</td>

            <td>120000</td>

        </tr>

    </table>

</body>

</html>

表格
th 表头，内容居中，加粗显示
<caption></caption> 表格标题，居中显示

表格作为整体被解析，完全解析完才会被显示出来
表格结构标签可以优化显示，加载一部分显示一部分
thead 表格的头（表头）
tbody 表格的主体（数据）
tfoot 表格的脚（脚注）

表格属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="rows">

        <caption>前端工程师平均工资</caption>

        <thead>

            <tr>

                <th>城市</th>

                <th>2018年</th>

                <th>2018年</th>

                <th>2019年</th>

                <th>2020年</th>

            </tr>

            <tr>

                <th>城市</th>

                <th>上半年</th>

                <th>下半年</th>

                <th>2019年</th>

                <th>2020年</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>北京</td>

                <td>8000</td>

                <td>9000</td>

                <td>10000</td>

                <td>120000</td>

            </tr>

            <tr>

                <td>上海</td>

                <td>6000</td>

                <td>7000</td>

                <td>8000</td>

                <td>100000</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>合计</td>

                <td>7000</td>

                <td>8000</td>

                <td>9000</td>

                <td>110000</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

tr标签属性

td和th标签属性

thead / tbody / tfoot 标签属性

跨列属性 colspan
跨行属性 rowspan

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">

        <caption>前端工程师平均工资</caption>

        <thead>

            <tr bgcolor="#d8e4bc">

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

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

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

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

            </tr>

            <tr bgcolor="#d8e4bc">

                <th>上半年</th>

                <th>下半年</th>

            </tr>

        </thead>

        <tbody align="center" valign="middle">

            <tr>

                <td bgcolor="#b8cce4">北京</td>

                <td>8000</td>

                <td>9000</td>

                <td>10000</td>

                <td>12000</td>

            </tr>

            <tr>

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

                <td>6000</td>

                <td>7000</td>

                <td>8000</td>

                <td>10000</td>

            </tr>

        </tbody>

        <tfoot>

            <tr align="center">

                <td bgcolor="#b8cce4">合计</td>

                <td>7000</td>

                <td>8000</td>

                <td>9000</td>

                <td>11000</td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

表格嵌套：
嵌入的必须是完整的表格结构
放到td标签中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <table border="1" width="500px" bgcolor="#f2f2f2" cellspacing="0" cellpadding="5px" align="center" frame="box" rules="all">

        <caption>前端工程师平均工资</caption>

        <thead>

            <tr bgcolor="#d8e4bc">

                <th>城市</th>

                <th>2018年</th>

                <th>2019年</th>

                <th>2020年</th>

            </tr>

        </thead>

        <tbody align="center" valign="middle">

            <tr>

                <td bgcolor="#b8cce4">北京</td>

                <td>

                    <table border="1" cellspacing="0" frame="void">

                        <tr>

                            <td>上半年</td>

                            <td>下半年</td>

                        </tr>

                        <tr>

                            <td>8000</td>

                            <td>9000</td>

                        </tr>

                    </table>

                </td>

                <td>10000</td>

                <td>12000</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

HTML表格概念、语法、操作、案例的更多相关文章

linux磁盘分区物理卷卷组逻辑卷文件系统加载点操作案例
转自:truemylife.linux磁盘分区物理卷卷组逻辑卷文件系统加载点操作案例基本概念: 磁盘.分区.物理卷[物理部分] 卷组[中间部分] 逻辑卷.文件系统[虚拟化后可控制部分] 磁 ...
采用DOM进行表格的修改操作
2015-08-31 <html> <head> <title>采用DOM进行表格的修改操作</title> <script language=& ...
clearcase 中一些概念和操作
clearcase 中一些概念和操作视图常用命令 ClearCase 安装和使用的一些FAQ 参考 ClearCase具体的说是做配置管理的工具,只是SCM管理工具其中的一种.是RATIONAL公 ...
基本数据结构——堆(Heap)的基本概念及其操作
基本数据结构――堆的基本概念及其操作小广告:福建安溪一中在线评测系统 Online Judge 在我刚听到堆这个名词的时候,我认为它是一堆东西的集合．．．但其实吧它是利用完全二叉树的结构来维护一组 ...
TensorFlow简易学习[1]:基本概念和操作示例
简介 TensorFlow是一个实现机器学习算法的接口,也是执行机器学习算法的框架.使用数据流式图规划计算流程,可以将计算映射到不同的硬件和操作系统平台. 主要概念 TensorFlow的计算可以表示 ...
Linux 基本概念和操作2
接着上一篇 "Linux 基本概念和操作" 1.删除文件有时候我们想要删除的文件是只读文件,直接使用rm 文件名,会报错.这时使用" -f " 参数强制删除. ...
AngularJS基于MVC的复杂操作案例
AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...
Linux基本概念及操作
基本概念及操作一.实验介绍 1.1 实验内容: 实验楼环境介绍常用 Shell 命令及快捷键 Linux 使用小技巧 1.2 实验知识点 Linux 基本命令通配符的使用基本软件安装查看帮助 ...
Java基础概念语法
Java基础概念语法注释单行注释 //行注释说明多行注释 /* 多行注释说明 */ 文档注释 /** *@author 程序的作者 *@version 源文件的版本 *@param 方法的参数说 ...
js的继承操作案例
js的继承操作案例一.总结 1.要案例要求,内心中想出操作要点二.js的继承操作案例案例练习1:具有默认值的构造函数实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值案例思路: ...

随机推荐

mvc jQuery 点击按钮实现导出Excel功能参数长短不限
var exportSubmit=function(url, obj){ var form = $("<form>"); //定义一个form表单 form.attr( ...
惠普电脑win10关闭自动调节亮度
自动调节亮度真的太烦人了,突然从亮的画面变暗,又从暗的亮度变量,眼睛受不了.但是试了很多种方法都不行. 方法第一种: 有一些电脑是有在设置--->显示界面--->有一个关闭自动调节按 ...
Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子子传父非父子传值引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
第一篇：Vue基础
Vue基础渐进式JavaScript框架通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目走进Vue 什么是Vue 渐进式JavaScrip ...
吴sir 讲Python之——Pycharm的安装教程（一）
欢迎您进入老吴的博客,如有联系请加QQ群:1055524279 首先在Pycharm的官网下载Pycharm Pycharm官网链接:https://www.jetbrains.com/pycharm ...
Asp.Net Core Identity 骚断腿的究极魔改实体类
前言默认的 Identity 实体类型在大多数时候已经基本够用,很多时候也只是稍微在 IdentityUser 类中增加一些自定义数据字段,比如头像.这次,我要向园友隆重介绍我魔改之后的 Ident ...
大牛给的ACM进阶建议
转:https://blog.csdn.net/mmy1996/article/details/56011084 来自知乎在他后面的回答中发现不用IDE ,修炼内功挺好的,不过他和我的以前的那种 ...
Codeforces_807
A. 严格按照题目给的两个条件来. #include<bits/stdc++.h> using namespace std; ],b[]; int main() { ios::sync_w ...
Python学习框架（持续更新）
1.数据类型整型:整数,1.2.3...这种浮点型:简单理解就是小数,1.23.3.141572653等等字符型:“这是字符”,简单说就是我们说的话,都可以作为字符布尔值:只有2种,true. ...
Flutter开发之Widget布局和页面导航
一.水平布局Row Row控件可以分为非灵活排列和灵活排列两种,灵活的可以在外边加入Expanded使用两者混用: import 'package:flutter/material.dart'; v ...

HTML表格概念、语法、操作、案例

HTML表格概念、语法、操作、案例的更多相关文章

随机推荐

热门专题