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 ...
随机推荐
- dd 工具使用; SSD 顺序写性能测试；
dd 工具使用: dd 也是我们经常使用到的磁盘测试工具,Linux服务器装好系统之后,想要知道硬盘的读写是否能满足服务的需要,如果不满足硬盘的IO就是服务的一个瓶颈.我们可以使用dd命令简单进行测试 ...
- JVM-10-JAVA 四种引用类型
JAVA 四中引用类型 1. 强引用 在 Java 中最常见的就是强引用,把一个对象赋给一个引用变量,这个引用变量就是一个强引用. 当一个对象被强引用变量引用时,它处于可达状态,不可能被垃圾回 ...
- @ConfigurationProperties(pref="")加载局部配置文件
刚开始@ConfigurationProperties(文件名)直接在参数里加文件名,其实是配置前缀pref="前缀".加载局部配置文件是@PropertySource(value ...
- python3解决url编码与解码
对于url编码的转换,主要用urllib.parse包中的quote和unquote方法. quote进行解码,unquote进行编码. 代码实例: import urllib.parse u = & ...
- 用nodejs快速实现websocket服务端（带SSL证书生成）
有不少公司将nodejs的socket.io作为websocket的解决方案,很遗憾的是socket.io是对websocket的封装,并不支持html5原始的websocket协议,微信小程序使用的 ...
- # Spring 练习ioc 、aop
Spring 练习 通过学习spring的基础知识,了解了Spring为了降低Java开发的复杂性,采取了以下4种关键策略: 基于POJO的轻量级和最小侵入性编程: 通过依赖注入和面向接口实现松耦合: ...
- 隐马尔可夫模型(HMM)及Viterbi算法
HMM简介 对于算法爱好者来说,隐马尔可夫模型的大名那是如雷贯耳.那么,这个模型到底长什么样?具体的原理又是什么呢?有什么具体的应用场景呢?本文将会解答这些疑惑. 本文将通过具体形象的例子来引入该模型 ...
- 雅礼集训2019 D7T2 Subsequence
雅礼集训2019 D7T2 Subsequence 直接贴题解: 平衡树代码: #include<bits/stdc++.h> #define ll long long #define N ...
- Vue之外的杂谈笔记
1.老项目的构建输出为什么臃肿? 引用:(引自http://www.cnblogs.com/linfangshuhellowored/p/5657285.html) 答:因为使用的是require的r ...
- 基于appium的模拟单点或多点触屏操作
一.单点触控 TouchAction类:将一系列的动作放在一个链条中,然后将该链条传递给服务器,服务器接受该链条后,解析各个动作,逐个执行,TouchAction类提供了以下几种方法: 短按:pres ...