Html学习之十七（表格与表单学习--排行版制作）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格与表单01</title>
<style>
table{
width: 300px;
height: 40px;
margin: 100px auto;
border-collapse: collapse;
}
.th2{
float: left;
padding-top: 5px;
padding-bottom: 5px;
}
.th1{
background: darkblue;
color: sandybrown;
padding: 5px 20px;
}
.th4{
background: darkblue;
color: #5F9EA0;
padding: 5px 20px;
}
.th3{
background: #4682B4;
color: #5F9EA0;
padding: 5px 20px;
}
.box1{
width: 15px;
height: 15px;
background: orange;
padding: 1px 2px;
float: left;
color: #FFFFFF;
}
.box2{
width: 15px;
height: 15px;
background: #A9A9A9;
padding: 1px 2px;
float: left;
color: #FFFFFF;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2" class="th1"><span class="th2">排名队名</span></th>
<td class="th1">胜/负</td>
<td class="th1">胜差</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box1">1</div> y-猛虎</span></th>
<td class="th3">23/9</td>
<td class="th3">0.0</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box1">2</div> y-雄鹿</span></th>
<td class="th4">20/9</td>
<td class="th4">1.5</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box1">3</div> 步行者</span></th>
<td class="th3">20/11</td>
<td class="th3">2.5</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box2">4</div> 76人</span></th>
<td class="th4">20/12</td>
<td class="th4">3.0</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box2">5</div> 凯尔特人</span></th>
<td class="th3">18/11</td>
<td class="th3">3.5</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box2">6</div> 活塞</span></th>
<td class="th4">14/14</td>
<td class="th4">7.0</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box2">7</div> y-黄蜂</span></th>
<td class="th3">14/15</td>
<td class="th3">7.5</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box2">8</div> 魔术</span></th>
<td class="th4">14/15</td>
<td class="th4">7.5</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box2">9</div> 热火</span></th>
<td class="th3">13/16</td>
<td class="th3">8.5</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box2">10</div> 篮网</span></th>
<td class="th4">14/18</td>
<td class="th4">9.0</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box2">11</div> 奇才</span></th>
<td class="th3">12/19</td>
<td class="th3">10.5</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box2">12</div> 尼克斯</span></th>
<td class="th4">9/23</td>
<td class="th4">14.0</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box2">13</div> 骑士</span></th>
<td class="th3">8/23</td>
<td class="th3">14.5</td>
</tr>
<tr>
<th colspan="2" class="th4"><span class="th2"><div class="box2">14</div> 老鹰</span></th>
<td class="th4">7/23</td>
<td class="th4">15.0</td>
</tr>
<tr>
<th colspan="2" class="th3"><span class="th2"><div class="box2">15</div> 公牛</span></th>
<td class="th3">7/24</td>
<td class="th3">15.5</td>
</tr>
</table>
</body>
</html>
结果：
Html学习之十七（表格与表单学习--排行版制作）的更多相关文章
- Html学习之十八（表格与表单学习--统计表制作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- html学习记录之表格、表单基础
①编码:charset="utf-8": ②描述及关键词:name="description":name="keywords": ③a标签 ...
- html+css学习笔记 5[表格、表单]
表格 -- 默认样式重置 表格标签: table 表格 thead 表格头 tbody 表格主体 tfoot 表格尾 tr 表格行 th 元素定义表头 ...
- Html学习之十九（表格与表单学习--邮箱注册页面设计）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Html学习之十六（表格与表单学习--课程表制作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- DOM之表格与表单基础分享
我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...
- WEB入门二 表格和表单
学习内容 Ø 表格的作用和制作 Ø 表单的制作 能力目标 Ø 掌握表格的创建 Ø 掌握设置表格的常用属性: Ø 理解表单的作用 Ø ...
- HTML&CSS精选笔记_表格与表单
表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table> <tr> <td>单元格内的文字</td> ...
- 框架，表格，表单元素，css基础以及基本标签的结合
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
随机推荐
- 关于华为模拟器（eNSP）添加路由器启动后一直打印#号的原因
操作系统为win10 专业版 1903:1.首先打开控制面板,找到windows defender防火墙,在“允许应用通过防火墙”中把和espn相关的两个的专网和公网都勾选上,最后确定:然后重启华为模 ...
- JS运动---运动基础（匀速运动）
[一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- verilog问题二三
assign语句叫连续赋值语句?为什么要叫连续,是由于等式右边是顺序执行的还是因为在执行赋值的过程中,赋值的先后顺序(实际上或者概念上)是有顺序的? 同步(复位)与异步(复位)的具体内涵:异步信号定义 ...
- CSharpGL(55)我是这样理解PBR的
CSharpGL(55)我是这样理解PBR的 简介 PBR(Physically Based Rendering),基于物理的渲染,据说是目前最先进的实时渲染方法.它比Blinn-Phong方法的真实 ...
- ubuntu18.04 中个性化配置vim方法
1:新建配置文件 在终端里输入:vi ~/.vimrc (vimrc是vim的配置文件,每次打开vim时会自动加载这个文件里的配置) 2:配置的代码如下:直接就可以复制到里面然后保存就行 set ai ...
- 《细说PHP》第四版 样章 第23章 自定义PHP接口规范 11
23.6 使用第三方接口服务实例 接供服务的第三方接口平台有很多,现在的项目中也经常用到一些第三方接口,如支付宝.微信.短信.邮件接口等,我们需要借助第三方的能力来实现产品的某些功能.如果自己已经掌 ...
- 关于unittest单元测试框架中常用的几种用例加载方法
unittest模块是Python自带的一个单元测试模块,我们可以用来做单元测试.unittest模块包含了如下几个子模块: 测试用例:TestCase 测试集:TestSuite 加载用例:Test ...
- 数据防泄漏 | 禁止PrintScreen键
在数据防泄漏软件,通常会禁止 PrintScreen 键,防止通过截屏来将数据保存为图片而导致泄密. 这类软件如果想要实现是比较简单的,但是想要将功能做的强大些,还是需要下功夫的.以前使用过一款数据防 ...
- ElasticStack的入门学习
Beats,Logstash负责数据收集与处理.相当于ETL(Extract Transform Load).Elasticsearch负责数据存储.查询.分析.Kibana负责数据探索与可视化分析. ...
- 用友的SPS定义
基于标准产品的支持服务(Standard Product Support,SPS).主要包括:更新升级(软件补丁更新与产品升级).问题解决(产品问题在线或热线解析).知识转移(用友到客户的知识传递). ...