HTML表格属性及简单实例
这里主要总结记录下表格的一些属性和简单的样式，方便以后不时之需。
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> 元素具有相同的局部属性，两者有如下区别：
- <th>是表示头标记，通常位于首行或者首列。而且<th>中的文字默认会被加粗，而<td>是不会的
- <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表格属性及简单实例的更多相关文章
- Android属性动画-简单实例
1.ValueAnimator //在2000毫秒内,将值从0过渡到1的动画 ValueAnimator anim = ValueAnimator.ofFloat(0f, 1f); anim.setD ...
- 实例级别和类级别的static、构造函数、字段属性的简单介绍
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 实例级别 ...
- Spring.Net 简单实例-02(属性注入)
说明:接续Spring.Net 简单实例-01(IOC) 话不多说看操作 1:为UserInfo添加属性 2: 修改App.config中代码 <?xml version="1.0&q ...
- 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 ...
- TERSUS无代码开发(笔记05)-简单实例电脑端页面设计
案例笔记电脑端页面设计 1.新建项目(请假管理qjgl) 2.开发软件界面介绍(常用的功能按键) 3.目录中显示元件对象 4.对元件对象的操作主要方式是双击(双击哪个元件, ...
- Hibernate(二)__简单实例入门
首先我们进一步理解什么是对象关系映射模型? 它将对数据库中数据的处理转化为对对象的处理.如下图所示: 入门简单实例: hiberante 可以用在 j2se 项目,也可以用在 j2ee (web项目中 ...
- Centos7的安装、Docker1.12.3的安装，以及Docker Swarm集群的简单实例
目录 [TOC] 1.环境准备 本文中的案例会有四台机器,他们的Host和IP地址如下 c1 -> 10.0.0.31 c2 -> 10.0.0.32 c3 -> 10.0.0. ...
- Flume概述和简单实例
Flume概述 Flume是一个分布式.可靠.和高可用的海量日志采集.聚合和传输的系统.支持在日志系统中定制各类数据发送方,用于收集数据;同时,Flume提供对数据进行简单处理,并写到各种数据接受方( ...
- jQuery简单实例
jQuery 选择器 $(this).hide() 演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素. $("p").hide() 演示 jQuery 的 h ...
随机推荐
- 复活hexo静态博客的方法
我的个人博客http://webhmy.com/是通过hexo搭建的,它支持图片显示,支持md,无需主机空间,可以满足我的大部分需求.但是在2年的使用的过程中遇到一些问题,这里记录下来.便于下次快速复 ...
- Python-网络编程(三)
今天是网络编程的最后一天,明天会开始并发编程 socketserver模块实现并发 为什么要讲socketserver?我们之前写的tcp协议的socket是不是一次只能和一个客户端通信,如果用soc ...
- 116.001 - 爱折腾之用 Kindle 读学术论文是什么体验？
@(116 - Kindle 使用指南) 结论先行 - 强烈安利k2pdfopt,把双栏论文转成kindle友好的pdf 整理转载自知乎@ wei huang 双栏学术论文在6寸屏上看就是个坑 新买的 ...
- 利用NVM在系统中维护多个版本的nodejs
0. 背景 开发时可能同时进行多个项目,而这些项目所依赖的node版本又不是一样的.比如我现在的angular项目采用的node是8.9.3版本,而vue项目的vue-cli则依赖更高.由于ang ...
- Netty相关面试题
1.BIO.NIO和AIO的区别? BIO:一个连接一个线程,客户端有连接请求时服务器端就需要启动一个线程进行处理.线程开销大. 伪异步IO:将请求连接放入线程池,一对多,但线程还是很宝贵的资源. N ...
- C# 程序启动最小化至任务栏及闪烁
主要功能: C#让窗体最小化至任务栏,同时在系统托盘区的图标点击左键能显示窗体,并使窗体闪烁. 首先: 创建窗体应用程序,并添加控件NotifyIcon及ContextMenuStrip控件 Noti ...
- SQL Server ->> Enable Instant File Initialization(开启文件及时初始化)
我们在安装SQL Server的时候会在指定SQL Server各个服务的运行启动账户的账户的时候看到底下有一个选项写着“Grant Perform Volume Maintenance Task p ...
- Microsoft.Exchange 发邮件
//Microsoft.Exchange.WebServices.dll ExchangeService service = new ExchangeService(); // 获取身份验证, 能够尝 ...
- 【Python机器学习及实践】笔记
- laravel where筛选会判断类型吗？
laravel where筛选会判断类型吗? laravel where筛选会判断类型吗? laravel where筛选会判断类型吗? 这个说会判断不对,说不会判断也不对. 当字符串'1'和数值1是 ...