这里主要总结记录下表格的一些属性和简单的样式，方便以后不时之需。

1、<table>

　　用来定义HTML的表格，具有本地属性 border 表示边框，border属性的值必须为1或空字符串("")。该属性不会控制边框的样式，而是由CSS来控制

　　table元素可以有tr，th，td，thead，tbody，tfoot，colgroup元素

2、<tr>

　　用来定义表格的一行。由于HTML表格是面向行的，所以必须分别表示每一行

　　tr元素可以在table，thead，tbody和tfoot元素内使用

　　tr元素内可以包含一个或者多个td或th元素

　　它的align,bgcolor等属性已过时，如果要设置属性，请使用CSS设置

3、<td>

　　用来定义表格单元格，可以同colspan，rowspan，headers局部属性使用

　　(1)colspan： 列跨度，该属性规定了单元格可横跨的列数，该属性的值必须是整数

　　(2)rowspan：行跨度，该属性规定了单元格可横跨的行数，该属性的值必须是整数

　　(3)headers：该属性的值是一个或多个单元的ID属性值，将单元格与列标题相关联，可用于使用屏幕阅读器

⚠️：每个表格必须包含以上三个元素

一个简单的实例

<!DOCTYPE html>

<html>

    <body>

        <table>

            <tr>

                <td>A</td>

                <td>B</td>

                <td>C</td>

            </tr>

            <tr>

                <td>D</td>

                <td>E</td>

                <td>F</td>

            </tr>

        </table>

    </body>

</html>

效果如下：

4、<th>

　　用来定义标题单元格，使我们有效区分数据及其描述

　　它同 <td> 元素具有相同的局部属性，两者有如下区别：

  1. <th>是表示头标记，通常位于首行或者首列。而且<th>中的文字默认会被加粗，而<td>是不会的
  2. <td>是数据标记，表示单元格的具体的数据

 5、<thead>

　　用来定义表格的页眉，表头的包装器。可以定义一行或多行，这些行是 table 元素的列标签

　　没有thead元素，所有的tr被假定为属于表的主体

6、<tbody>

　　用来定义表格的主体

7、<tfoot>

　　用来定义标记表格的页脚

⚠️：

  • <thead>、<tfoot>标签内部必须拥有 <tr> 标签
  • <thead>和<tfoot>标签不管放在 <table> 标签内的哪个位置，都会被分别定为到表格的头部和底部。<tfoot>可以出现在<tbody>或<tr>之前或之后。在html5之前，<tfoot>元素必须出现在<tbody>元素之前，在html5中，可以将<tfoot>元素放在<tbody>或最后一个<tr>元素后面

8、<colgroup>

　　用来定义表列组，可以使用其来将样式应用于某个列，当然也可以使用下面要说的col元素

　　具有局部属性 span 的 <colgroup> 表示列组应该横跨的列数。默认是一列，即对表格的一列设置样式

　　<colgroup>可以包含一个或多个 <col> 元素

9、<col>

　　用来表示表单个列，建议使用<colgroup>包裹<col>元素而不是<colgroup>直接设置span属性定义组

　　<col>也具有局部属性span

　　<col>放在<colgroup>的元素内部，<col>的咩哥实例表示组中的一列。使用该标签可以将样式应用于列的组和该组的单个列

10、<caption>

　　用来定义表格的标题，每个表中只能包含一个<caption>元素

一个简单的例子：

<!DOCTYPE html>

<html>

    <head>

        <style>

            thead th,tfoot th {

                text-align: left;

                background: grey;

                color: white

            }

            tbody th {

                text-align: right;

                background: lightgrey;

                color: grey

            }

            /* tbody td {

                background: greenyellow;

            } */

            #colgroup1 {

                background-color: blueviolet

            }

            #col3 {

                background-color: yellow;

                font-size: small

            }

        </style>

    </head>

    <body>

        <table>

            <colgroup id="colgroup1">

                <col id="collAnd2" span="2"/>

                <col id="col3"/>

            </colgroup>

            <colgroup id="colgroup2" span="2"></colgroup>

            <thead>

                <tr>

                    <th>Rank</th>

                    <th>Name</th>

                    <th>Color</th>

                    <th colspan="2">Size & Votes</th>

                </tr>

            </thead>

            <tfoot>

                <tr>

                    <th>Rank Footer</th>

                    <th>Name Footer</th>

                    <th>Color Footer</th>

                    <th colspan="2">Size And Votes Footer</th>

                </tr>

            </tfoot>

            <tbody>

                <tr>

                    <th>Favorite:</th>

                    <td>XML</td>

                    <td>CSS</td>

                    <td>Java</td>

                    <td>IOS</td>

                </tr>

                <tr>

                    <th>2nd Favorite:</th>

                    <td>Web</td>

                    <td>HTML5</td>

                    <td>CS</td>

                    <td>460</td>

                </tr>

            </tbody>

        </table>

    </body>

</html>

效果如下：

HTML表格属性及简单实例的更多相关文章

  1. Android属性动画-简单实例

    1.ValueAnimator //在2000毫秒内,将值从0过渡到1的动画 ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setD ...

  2. 实例级别和类级别的static、构造函数、字段属性的简单介绍

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 实例级别 ...

  3. Spring.Net 简单实例-02(属性注入)

    说明:接续Spring.Net 简单实例-01(IOC) 话不多说看操作 1:为UserInfo添加属性 2: 修改App.config中代码 <?xml version="1.0&q ...

  4. SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  5. TERSUS无代码开发(笔记05)-简单实例电脑端页面设计

    案例笔记电脑端页面设计   1.新建项目(请假管理qjgl)   2.开发软件界面介绍(常用的功能按键)      3.目录中显示元件对象      4.对元件对象的操作主要方式是双击(双击哪个元件, ...

  6. Hibernate(二)__简单实例入门

    首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...

  7. Centos7的安装、Docker1.12.3的安装，以及Docker Swarm集群的简单实例

    目录 [TOC] 1.环境准备 ​ 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...

  8. Flume概述和简单实例

    Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...

  9. jQuery简单实例

    jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...

随机推荐

  1. 关于div设置display: inline-block之后盒子之间间距的处理

    当两个盒子都设置display: inline-block之后并且css也清除了默认样式 这时候会发现div盒子之间仍然存在间隙 将font-size清0间距就会取消

  2. cf449D. Jzzhu and Numbers(容斥原理 高维前缀和)

    题意 题目链接 给出\(n\)个数,问任意选几个数,它们\(\&\)起来等于\(0\)的方案数 Sol 正解居然是容斥原理Orz,然而本蒟蒻完全想不到.. 考虑每一种方案 答案=任意一种方案 ...

  3. mui.ajax()和asp.net sql服务器数据交互【1】

    简单的ajax和asp.net的交互,例如遍历数据,前端显示复杂内容没有添加代码,可自行研究!非常适合懂那么一点点的我们! 实现步骤: 1.APP前端HTML: <div class=" ...

  4. Android中的this、Activity、Context等

    Android中的this.Activity.Context.Application等虽然有相似之处,但是不能乱用,每一个都有自己的特点.用的时候不能太随意了. 避免context相关的内存泄露,注意 ...

  5. 如何阅读 Redis 源码？ZZ

    原文链接 在这篇文章中, 我将向大家介绍一种我认为比较合理的 Redis 源码阅读顺序, 希望可以给对 Redis 有兴趣并打算阅读 Redis 源码的朋友带来一点帮助. 第 1 步:阅读数据结构实现 ...

  6. SVNKit学习——Setting Up A Subversion Repository 创建仓库（三）

    所谓Setting Up A Subversion Repository,就是在Subversion所在的服务器上创建一个仓库,说白了就是在磁盘上建一个特殊的目录,这里我以windows举例. 1.使 ...

  7. 从传输流收到意外的 EOF 或 0 个字节

    /// <summary> /// 发送POST请求 /// </summary> /// <param name="json"></pa ...

  8. 第二周 day2 python学习笔记

    1. python中的三元运算: result=value1 if 条件 else value2 如果条件成立,result=value1 如果条件不成立,result=value2 2. pytho ...

  9. vscode：配置git

    1.下载git,并找到安装git的文件位置,并找到git文件夹下面的Bin文件夹    2.配置环境变量 位置:右击‘计算机’->属性->高级系统设置->环境变量 最后点击确定即可 ...

  10. define常量

    看手册说define定义的常量只允许: 仅允许标量和 null.标量的类型是 integer, float,string 或者 boolean. 也能够定义常量值的类型为 resource ,但并不推 ...