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 ...
随机推荐
- docker 限制容器能够使用的资源
docker 限制容器能够使用的内存,CPU,I/O 资源概述,内存是非可压缩资源,cpu是可压缩资源. 内存用超了,就发送Out Of Memory Exception,容器会被kill掉.所以内存 ...
- Codeforces Round #578 (Div. 2)
Codeforces Round #578 (Div. 2) 传送门 A. Hotelier 暴力即可. Code #include <bits/stdc++.h> using names ...
- dfs的几个基础示例 acwin 91~94
从 ~n 这 n 个整数中随机选取任意多个,输出所有可能的选择方案. 输入格式 输入一个整数n. 输出格式 每行输出一种方案. 同一行内的数必须升序排列,相邻两个数用恰好1个空格隔开. 对于没有选任何 ...
- 2019-2020-1 20199305《Linux内核原理与分析》第二周作业
C程序的反汇编 (一)实验截图 复制所需要的C程序到"剪切板" 在虚拟机环境下粘贴过来 接下来进行反汇编,通过输入gcc -S -o main.s main.c -m32得到32位 ...
- WPf 带滚动条WrapPanel 自动换行 和控件右键菜单
原文:WPf 带滚动条WrapPanel 自动换行 和控件右键菜单 技能点包括 WPf 样式的引用 数据的验证和绑定 比较适合初学者 前台: <Window.Resources> < ...
- WPF 精修篇 属性触发器
原文:WPF 精修篇 属性触发器 属性触发器是通过 某个条件触发改变属性 通过无代码实现功能 <Style TargetType="{x:Type Label}"> ...
- Educational Codeforces Round 37 (Rated for Div. 2) E. Connected Components? 图论
E. Connected Components? You are given an undirected graph consisting of n vertices and edges. Inste ...
- C#中char[]与string之间的转换；byte[]与string之间的转化
目录 1.char[]与string之间的转换 2.byte[]与string之间的转化 1.char[]与string之间的转换 //string 转换成 Char[] string str=&qu ...
- 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 10
18.8 设计完美分页类 数据记录列表几乎出现在Web项目的每个模块中,假设一张表中有十几万条记录,我们不可能一次全都显示出来,当然也不能仅显示几十条.为了解决这样的矛盾,通常在读取时设置以分页的形 ...
- C# 通过反射调用 Func 委托
C# 通过反射调用 Func 委托 Intro 最近我的 NPOI 扩展库增加了,自定义输出的功能,可以自定义一个 Func 委托来设置要导出的内容,详细介绍请查看 https://www.cnblo ...