HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01
工具1：HBuilder X 1.9.9.20190522
工具2：火狐浏览器 67.0.4 (64 位)
在开始之前，你需要了解一些基本的知识，不要求你能掌握，但是了解一下还是有益的：
例 1：一个简单的 HTML 表格，包含三行三列：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表格（table）</title>
6 </head>
7 <body>
8 <table border="1" width="480" align="center">
9 <tr>
10 <th width=25%>编号</th>
11 <th width=25%>调试工具</th>
12 <th width=50%>版本</th>
13 </tr>
14 <tr>
15 <td>1</td>
16 <td>HBuilder X</td>
17 <td>1.9.9.20190522</td>
18 </tr>
19 <tr>
20 <td>2</td>
21 <td>火狐浏览器</td>
22 <td>67.0.4 (64 位)</td>
23 </tr>
24 </table>
25 </body>
26 </html>
在火狐浏览器中打开该 HTML 文档：
定义一个 HTML 表格，并设置表格的边框宽度、宽度，以及其相对于周围元素的对齐方式。
8 <table border="1" width="480" align="center">
24 </table>
关于 HTML <table> 标签：
定义和用法：
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头单元格，td 元素定义标准单元格。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
关于 HTML <table> 标签的 border 属性：
定义和用法：
border 属性规定围绕表格的边框的宽度。
border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
提示：设置 border="0"，可以显示没有边框的表格。
从实用角度出发，最好不要规定边框，而是使用 CSS 来添加边框样式和颜色。
语法：<table border="value">
属性值：
pixels 规定表格边框宽度。
定义和用法：
width 属性规定表格的宽度。
如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。
从实用角度出发，最好不要规定宽度，而是使用 CSS 来应用宽度。
语法：<table width="value">
属性值：
pixels 设置以像素计的宽度（例子：width="50"）。
% 设置以包含元素的百分比计的宽度（例子：width="50%"）。
定义和用法：
align 属性规定表格相对于周围元素的对齐方式。
通常来说，HTML 表格的前后都会出现折行。通过运用 align 属性，可实现其他 HTML 元素围绕表格的效果。
语法：<table align="value">
属性值：
left 左对齐表格。
right 右对齐表格。
center 居中对齐表格。
定义 HTML 表格中的行。
9 <tr>
13 </tr>
关于 HTML <tr> 标签：
定义和用法：
<tr> 标签定义 HTML 表格中的行。
定义表格内的表头单元格。
10 <th width=25%>编号</th>
关于 HTML <td> 标签：
定义和用法：
定义表格内的表头单元格。
HTML 表单中有两种类型的单元格：
- 表头单元格 - 包含表头信息（由 th 元素创建）
- 标准单元格 - 包含数据（由 td 元素创建）
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
定义和用法：
width 属性规定表格的表头单元格的宽度。
通常，单元格占用的空间就是它显示内容需要的空间。width 属性用于为单元格设置预定义的宽度。
语法：<th width="value">
属性值：
pixels 以像素计的宽度值（比如 "100px"）。
percent 以包含元素百分比计的宽度值（比如 "20%"）。
定义 HTML 表格中的标准单元格。
15 <td>1</td>
关于 HTML <td> 标签：
定义和用法：
<td> 标签定义 HTML 表格中的标准单元格。
HTML 表格有两类单元格：
- 表头单元 - 包含头部信息（由 th 元素创建）
- 标准单元 - 包含数据（由 td 元素创建）
td 元素中的文本一般显示为正常字体且左对齐。
例 2：接下来，我们对例 1 做一些修改，为表格加入表头 <thead>、表主体 <tbody>。
注释：<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。引用：HTML <thead> 标签
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>表格（table）</title>
6 </head>
7 <body>
8 <table border="1" width="480" align="center">
9 <thead>
10 <tr>
11 <th width=25%>编号</th>
12 <th width=25%>调试工具</th>
13 <th width=50%>版本</th>
14 </tr>
15 </thead>
16 <tbody align="center">
17 <tr>
18 <td>1</td>
19 <td>HBuilder X</td>
20 <td>1.9.9.20190522</td>
21 </tr>
22 <tr>
23 <td>2</td>
24 <td>火狐浏览器</td>
25 <td>67.0.4 (64 位)</td>
26 </tr>
27 </tbody>
28 </table>
29 </body>
30 </html>
在火狐浏览器中打开该 HTML 文档，可以看到表格中的第二、第三行中的文字是居中对齐的，这是取决 <tbody> 的 align 属性。
定义表格的表头。
9 <thead>
15 </thead>
关于 HTML <thead> 标签：
定义和用法：
<thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。
tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。（显然，在上面的例 2 中，我们并没有按照这种要求执行，只是使用了 <thead>、<tbody>，并没有使用 <tfoot>。）
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
详细描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
定义表格主体（正文），并设置内容的对齐方式。
16 <tbody align="center">
27 </tbody>
关于 HTML <tbody> 标签：
定义和用法：
<tbody> 标签定义表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。
thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注释：如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
提示：在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观。
详细描述：thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
定义和用法：
align 属性规定 tbody 元素中的内容的水平对齐方式。
下一节：HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01的更多相关文章
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我想使用表格,做一个这样的颜色表,如下图所示: 例 3:我们参照上图,基于上一个例子, ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 04
工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 目前,我们已经将一些行和列插入到表格中,并设置单元格的背景颜色,显示 RGB 值等. 例 7 ...
- JavaScript写一个表格排序类
依稀记得那是上个星期六的下午,我参加了网易暑期实习生招聘笔试.考得相当糟糕,编程题3个题通过了2个,简答题没做对,选择题貌似是20个题猜了6-7个,99%是挂了,唉唉唉!生活不只眼前的苟且,学习的脚步 ...
- 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)[只要是需要使用到this获取到的元素集合这个变量的时候, ...
- 分享一个CSS+JavaScript框架materializecss
一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:
- 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（三）
原文 http://blog.csdn.net/zhangxin09/article/details/6793593 这是<运用 JavaScript构建你的第一个Metro式应用程序>系 ...
- 运用JavaScript构建你的第一个Metro式应用程序（onWindows 8）（二）
原文 http://blog.csdn.net/zhangxin09/article/details/6793330 先前的学习中,我们已经了解了 Metro式的 JavaScript 应用程序大致如 ...
随机推荐
- Python画图库Turtle库详解篇
Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它爬行 ...
- 前端修仙之路---一、如何用gulp搭建一套web前端开发框架
引言 相信从事web前端开发的朋友都知道,现在流行的Vue.AngularJS等框架中,它们都有独立的脚手架来创建项目,比如Vue有vue-cli,Angular有angula-cli.脚手架可以一键 ...
- 【HttpRunner v3.x】笔记—7. 测试用例-teststeps-RunTestCase
以前我在写接口自动化用例的时候,为了保证用例的独立性,需要在setUp里调用各种满足用例的一些前置条件,其中就不乏调用了其他测试用例中的方法. 而httprunner也是支持了这一项很重要的特性,通过 ...
- Java中构建长字符串的四种模式
回字有四种写法,构建字符串也有四种方式. 用+号最快,第二第三种可读性好,第四种是log4j自有的.下面请见代码: package logbackCfg; import java.text.Messa ...
- 20190925-03Redis端口号的由来及单线程加多路IO复用 000 024
- python日志模块配置
import logging logging.basicConfig(filename= 'out.log',filemode= 'w+', level= logging.DEBUG, format= ...
- 如何制作一个手机上的Github图床捷径(workflow)
准备工作 github账号与绑定邮箱 建立一个仓库用于存放图片 生成github token 注意生成之后要备份以免后面要用到(页面刷新之后会看不见) 了解github上传文件的 GitHub API ...
- pytest测试框架 -- 简介
一.pytest测试框架简介: (1)pytest是python的第三方测试框架,是基于unittest的扩展框架,比unittest更简洁,更高效. (2)pytest框架可以兼容unittest用 ...
- 预科班D2
2020.09.08星期二 预科班D2 学习内容: 一.复习 1.平台: 平台=操作系统+计算机硬件 2.跨平台性 3.文件 文件是指操作系统提供给上层使用者操作硬盘的一种功能.
- Linux实战（5）：Centos8安装python
Centos8正式版已经发布了,已经尝鲜的小伙伴们会发现与其他Linux发行版不同,CentOS 8默认不安装Python.接下来的操作指导大家如何安装python3. 转自链接 安装python3 ...