温故知新----表格
构建行星数据
本项目复习表格的使用，项目参考于：MDN
点击此处查看效果
gitHub
任务介绍
- 为你的表格添加我们提供的标题。
- 在表格的 header 中添加一行，用来包括所有列的标题。
- 在表格的 body 部分创建所有内容行，记住要让所有是行标题的单元格语义化。
- 确保所有内容都插入了正确的单元格，在原始数据中，每行行星数据都显示在其相关行星的旁边。
- 添加一些属性，让行标题和列标题更加明确地与和它们有关的单元格进行关联
- 为包含所有行星标题的行标题的那一列数据，添加一个黑色边框
知识点
- table 创建表格
- caption 为你的表格增加一个标题
- thead 放置在头部的位置，因为它通常代表第一行
- tbody 存放表数据
- tfoot 一般放在最后一行，往往是对前面所有行的总结
- tr 表格行
- th 数据标题
- scope 可添加在th标签，用来指明是行标题还是列标题
- td 表格数据
- colspan,rowspan 属性接受一个没有单位的数字值，数字决定了它们的宽度或高度是几个单元格
- 为表格中的列提供共同的样式
- colgroup 一个colgroup标签含有多个col标签
- col 用于定义列的样式
- span 需要一个无单位的数字值，用来制定你想要让这个样式应用到表格中多少列
demo:
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>太阳系中行星的一些数据</title><link href="minimal-table.css" rel="stylesheet" type="text/css"> </head><body><h1>太阳系中行星的一些数据</h1><table><colgroup><col><col><col id="col-name"></colgroup><caption>太阳系中行星的一些数据。<a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">（资料及图片取自 NASA 行星数据（公制单位））</a></caption><thead><tr><th colspan="2" scope="col"> </th><th scope="col">名字</th><th scope="col">质量 (10<sup>24</sup>kg)</th><th scope="col">直径 (km)</th><th scope="col">密度 (kg/m<sup>3</sup>)</th><th scope="col">重力 (m/s<sup>2</sup>)</th><th scope="col">天长 (hours)</th><th scope="col">与太阳距离 (10<sup>6</sup>km)</th><th scope="col">平均温度 (°C)</th><th scope="col">卫星数量</th><th scope="col">备注</th></tr></thead><tbody><tr><th colspan="2" rowspan="4" scope="row">类地行星</th><td>水星</td><td>0.330</td><td>4,879</td><td>5427</td><td>3.7</td><td>4222.6</td><td>57.9</td><td>167</td><td>0</td><td>与太阳最近</td></tr><tr><td>金星</td><td>4.87</td><td>12,104</td><td>5243</td><td>8.9</td><td>2802.0</td><td>108.2</td><td>464</td><td>0</td><td> </td></tr><tr><td style="background-color: skyblue">地球</td><td style="background-color: skyblue">5.97</td><td style="background-color: skyblue">12,756</td><td style="background-color: skyblue">5514</td><td style="background-color: skyblue">9.8</td><td style="background-color: skyblue">24.0</td><td style="background-color: skyblue">149.6</td><td style="background-color: skyblue">15</td><td style="background-color: skyblue">1</td><td style="background-color: skyblue">我们的世界</td></tr><tr><td>火星</td><td>0.642</td><td>6,792</td><td>3933</td><td>3.7</td><td>24.7</td><td>227.9</td><td>-65</td><td>2</td><td>红色星球</td></tr><tr><th scope="rowgroup" colspan="1" rowspan="4">类木行星</th><th scope="row" rowspan="2">气巨星</th><td>木星</td><td>1898</td><td>142,984</td><td>1326</td><td>23.1</td><td>9.9</td><td>778.6</td><td>-110</td><td>67</td><td>太阳系最大</td></tr><tr><td>土星</td><td>568</td><td>120,536</td><td>687</td><td>9.0</td><td>10.7</td><td>1433.5</td><td>-140</td><td>62</td><td> </td></tr><tr><th scope="row" rowspan="2">冰巨星</th><td>天王星</td><td>86.8</td><td>51,118</td><td>1271</td><td>8.7</td><td>17.2</td><td>2872.5</td><td>-195</td><td>27</td><td> </td></tr><tr><td>海王星</td><td>102</td><td>49,528</td><td>1638</td><td>11.0</td><td>16.1</td><td>4495.1</td><td>-200</td><td>14</td><td> </td></tr><tr><th scope="row" colspan="2">矮行星</th><td>冥王星</td><td>0.0146</td><td>2,370</td><td>2095</td><td>0.7</td><td>153.3</td><td>5906.4</td><td>-225</td><td>5</td><td>2006年降格，但是 <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">尚存争议</a>.</td></tr></tbody></table></body>
</html>温故知新----表格相关推荐
- jvm虚拟机规范 紧接上文的
dneg dneg指令是类型安全的,if在传入的操作数堆栈中有一个类型匹配的双倍数.dneg指令不改变类型状态. instructionIsTypeSafe(dneg, Environment, _O ...
- 【温故知新】HTML学习笔记（表格）
表格Table 用来处理和显示数据. 学习要求:能手写表格结构,能合并单元格. <!DOCTYPE html> <html lang="en"> <h ...
- TensorRT 数据和表格示例
TensorRT 数据和表格示例 TensorRT 7.1在绑定索引方面比其前身更加严格.以前,允许错误配置文件的绑定索引.考虑一个网络,该网络具有四个输入,一个输出,以及在其中的三个优化配置文件 I ...
- HarmonyOS UI开发 TableLayout(表格布局) 的使用
TableLayout 是什么 TableLayout 是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...
- python 读取excel 表格的数据
自己随便写了一个表格如下 使用工具xlrd 如果没有下载 可以使用pip install xlrd 下载一个 大致需要一下几个步骤 1 打开excel table = xlrd.open_workbo ...
- Python xlrd 读取excel表格 常用用法整理
xlrd 的使用 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys.setdefaul ...
- TableLayout 表格布局,FrameLaout 帧布局 ，AbsoluteLayout绝对布局的分析
这三个布局就放在一起来写了他们用的比较少,不过为了写这遍 博客我换特意去复习了下, 第一个表格布局TableLayout 表格布局顾名思义 就是与表格类似,以行,列形式来管理其中的组件的, 它是< ...
- 0x02 mysql 表格相关操作
1.创建table 语法: create table 表格名称(列名 类型); NOT NULL:该列数据不能为空 AUTO_INCREMENT:定义该字段是否自增 primary key(xxx) ...
- html表格联动,html前端基础：table和select操作
html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
- 表格下划线怎么加粗_这招高！Excel签名栏的下划线随列宽变化，是不是感觉牛哄哄的？...
职场牛人的世界总有各种高招,随手蹦出,令人赞叹不已! 今天早上去填一个表格,在输入签名时,突然发现签名处的下划线是随着列宽的变化而自动变化,这绝对是动态的,这是怎么做到的呢? 我特意看了一下这个单元格 ...
最新文章
- mysql 热切换_热备服务器中，切换master中切换SQL
- Hive hiveserver2 配置运行
- 事物与持久化_跟面试官侃半小时MySQL事务，说完原子性、一致性、持久性的实现...
- 这个为生信学习打造的开源Bash教程真香！！（目录更新）！
- java http 下载_Java 通过 HTTP 下载文件
- POJ 3422 Kaka's Matrix Travels
- java8 stringbuilder_有了Java8的“+”真的可以不要StringBuilder了吗
- 零散知识点总结(1) Gradle 使用配置总结
- freopen()函数
- 基于ZStack构建深度学习云平台
- flutter usb串口_Flutter 踩坑记录
- js+java实现登录滑动图片验证功能
- 【cuda】——npp/cuda图像预处理resize+norm对比
- 树莓派怎么切换输入法_为树莓派安装Fcitx和谷歌拼音中文输入法
- 创宇滤镜|API防刷|短信邮件接口防刷|验证码防刷|搜索防刷 - 知道创宇云安全
- springbooot学习记录
- 搜狗 2018校招 商业基础工程—测试开发练习题
- Linux驱动程序安装步骤
- 计算机u盘序列号,win10-u盘序列号cmd怎么查
- java编写奇数偶数,java基础奇数偶数判断