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 ...
随机推荐
- 如何为 Automatic Undo Management 调整 UNDO Tablespace 的大小 (Doc ID 262066.1)
How To Size UNDO Tablespace For Automatic Undo Management (Doc ID 262066.1) APPLIES TO: Oracle Datab ...
- Ubuntu下doxygen+graphviz使用概录
关键词:doxygen.Doxyfile.doxywizard.dot.graphviz等等. 使用doxygen从源码注释生成帮助文档或者SDK,输出格式有多种比如htmp.Latex等等. 如果想 ...
- Paper慢慢读 - AB实验人群定向 Recursive Partitioning for Heterogeneous Casual Effects
这篇是treatment effect估计相关的论文系列第一篇所以会啰嗦一点多给出点背景. 论文 Athey, S., and Imbens, G. 2016. Recursive partition ...
- linux 库文件配置
linux 库文件配置 /etc/ld.so.conf 或 /etc/ld.so.conf.d/*.conf
- [学习笔记] Manacher与PAM
\(1\) Manacher 挺短,背是挺好背的 Manacher用于求回文串长度.思想大概就是: 1.加入字符集之外的识别字符(比如#)分隔开原来相邻的字母,这样所有的回文串都变成了以某个字符为中心 ...
- 【C#】C#中的HtmlEncode与HtmlDecode：HttpUtility.HtmlEncode,HttpUtility.HtmlDecode,Server.HtmlEncode,Server.HtmlDecode,WebUtility.HtmlEncode,WebUtility.HtmlDecode
HtmlEncode(String) 将字符串转换为 HTML 编码字符串. HtmlDecode(String) 将已经为 HTTP 传输进行过 HTML 编码的字符串转换为已解码的字符串. 在we ...
- MySQL数字类型学习笔记
数字类型 最近在看<MySQL技术内幕:SQL编程>并做了笔记,所以本博客是一篇笔记类型博客,分享出来方便自己复习,也可以帮助他人 整型 类型 占用空间 最小值(SIGNED) 最大值(S ...
- 关于 ASP.NET Core 中的 RazorPages
Contact.cshtml @page @model ContactModel @{ ViewData["Title"] = "Contact"; } < ...
- route 相关设置
Debian系统 查看路由表: root@debian:~# ip route default via 192.168.6.1 dev enp4s0 10.0.0.0/24 dev br0 proto ...
- HTTP Error 500.0 - ANCM In-Process Handler Load Failure 排错历程
先上报错图 环境 Window Server 2008 r2 netcore 2.2 排错历程 看到这个错 我第一个想到netcore 安装问题 先检查了下环境 发现没问题 我排查了下应用池 确定是无 ...