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 ...
随机推荐
- React 语法基础（一）之表达式和jsx
react负责逻辑控制 reactdom负责渲染 本节知识点 有 1)变量的使用,简单使用. 1==>jsx中的注释 {/* */} 2===> 简单的渲染 app.js ps==> ...
- acwing 835. Trie字符串统计
地址 https://www.acwing.com/problem/content/description/837/ 维护一个字符串集合,支持两种操作: “I x”向集合中插入一个字符串x: “Q ...
- 【JS】JS校验密码复杂度（必须包含字母、数字、特殊符号）
#场景一:密码中必须包含大小写 字母.数字.特称字符,至少8个字符,最多30个字符: var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a- ...
- python-13-集合增删查
前言 集合:可变的数据类型,但元素必须是不可变的数据类型,无序不重复,既可哈希.所以python的集合是不能进行修改的,只有增删查.可哈希.不可变数据类型有:元组.bool.int.str 一.增 1 ...
- IT兄弟连 HTML5教程 HTML语言的语法 1
HTML是文本类型的语言,和其他任何一门语言相比,语法都是最简单的.但在编写HTML文件时,必须遵循HTML的语法规则.一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这 ...
- IT兄弟连 HTML5教程 HTML5的靠山 RFC、WHATWG是什么WEB的新标准
RFC是什么 RFC文档也称请求注解文档(Requests for Comments,RFC),这是用于发布Internet标准和Internet其他正式出版物的一种网络文件或工作报告,内容和Inte ...
- json数据格式与字典数据类型之间的相互转换
import json class HandleJson: ''' 定义一个json格式数据处理类 ''' @staticmethod def loads_data(data): ''' 将json数 ...
- RPA中房产证的 OCR 识别
客户需求,识别一些证件内容,包括身份证.户口本.营业执照.银行卡以及房产证,前四个比较容易实现,不管是艺赛旗的 RPA 还是百度的 OCR 都有接口,直接调用即可,但是都没有房产证的 OCR 识别,只 ...
- JavaScript判断对象和数组
在调用后端接口时,由于后端接口的不规范统一,接口最外层在没有数据时返回的是空数组(其实更想要的是空json对象,接口返回的data数据应该统一返回json对象,便于扩展),而在有数据时返回的是json ...
- CLRCore(CLR核心机制）
JIT--第一次--标记已--存根--调用--查找存根--执行机器码 C#和CIL的关系: C#和N#都是CIL实现,但是彼此不能互通: C#和N#公开不分满足规范,我们才能互通 CLS就是描述多语言 ...