正文

html+css第七篇-表格

三号小玩家  2022-02-16  411

关键词：

表格标签：
    table 表格
    thead 表格头
    tbody 表格主体
    tfoot 表格尾
    tr 表格行
    th 元素定义表头
    td 元素定义表格单元

表格样式重置
table{border-collapse:collapse;} 单元格间隙合并
th,td{padding:0;}重置单元格默认填充

colspan 属性规定单元格可横跨的列数。 <td colspan="2"></td>

form 表单 <input type="…… " name="" value="" />

text 文本框

password 密码

radio单选

checkbox 复选

submit 提交

reset 重置

button 按钮

image 图片

file 上传

hidden 隐藏

label 标签为 input 元素定义标注 <input type="checkbox" name="" id="a"/>

checked 在页面加载时默认选定的 input 元素。 <input type="checkbox" name="" checked/> disabled 属性规定应该禁用 input 元素。

select/option 下拉选框对高度的支持不兼容； textarea 文本域各个浏览器下的默认滚动条显示不兼容 css3新增 resize 调整尺寸属性；

outline 轮廓线； A标签轮廓线去除方法：

1、<a href="#" onfocus="this.blur();">……</a>

2、<a href="#" hidefocus>……</a> 表单元素兼容性问题 IE6下input背景滚动；

day01-表格

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
th,td{padding:0;}
table{border-collapse:collapse;}

/* table css reset */
th,td{border:1px solid black; height:50px; width:100px;}
table{width:500px;}

/* 

510
506
500

 */

/* 
注意事项：
1、不要给table,th,td以外的表格标签加样式；
2、单元格默认平分table 的宽度
3、th里面的内容默认加粗并且左右上下居中显示
4、td里面的内容默认上下居中左右居左显示
5、 table 决定了整个表格的宽度；
6、table里面的单元格宽度会被转换成百分比；
7、 表格里面的每一列必须有宽度；
8、表格同一竖列继承最大宽度；
9、表格同行继承最大高度；
 */

</style>
</head>
<body>

<!-- 
table 的标签基本特性是: display:table;
 -->
<table><!-- 表格 -->
    <tbody>
      <tr><!-- 行 -->
        <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
  </tbody>
</table>





</body>
</html>

效果：

day02-完整表格标签

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>


<table><!-- 表格 -->
    <thead><!-- 表格头部 -->
      <tr><!-- 行 -->
        <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
  </thead>
    <tbody><!-- 表格主体 -->
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
  </tbody>
  <tfoot><!-- 表格尾部 -->
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

day03-表格特性

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
th,td{padding:0;}
table{border-collapse:collapse;}

/* table css reset */
th,td{border:1px solid black; height:50px; width:100px;}
table{width:500px;}

/* 

510
506
500

 */

/* 
注意事项：
1、不要给table,th,td以外的表格标签加样式；
2、单元格默认平分table 的宽度
3、th里面的内容默认加粗并且左右上下居中显示
4、td里面的内容默认上下居中左右居左显示
5、 table 决定了整个表格的宽度；
6、table里面的单元格宽度会被转换成百分比；
7、 表格里面的每一列必须有宽度；
8、表格同一竖列继承最大宽度；
9、表格同行继承最大高度；
 */

</style>
</head>
<body>

<!-- 
table 的标签基本特性是: display:table;
 -->
<table><!-- 表格 -->
    <tbody>
      <tr><!-- 行 -->
        <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
  </tbody>
</table>
</body>
</html>

效果：

day04-单元格合并

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
th,td{padding:0;}
table{border-collapse:collapse;}

/* table css reset */
th,td{border:1px solid black; height:50px; width:100px;}
table{width:500px;}
/

/* 
colspan  属性规定单元格可横跨的列数。
rowspan  属性规定单元格可横跨的行数。
 */

</style>
</head>
<body>

<table><!-- 表格 -->
    <tbody>
      <tr><!-- 行 -->
        <th colspan="2">表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
      <th>表格标题</th>
    </tr>
      <tr>
        <td rowspan="2">单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
    <tr>
      <td>单元格</td>
      <td>单元格</td>
      <td colspan="2" rowspan="3">单元格</td>
    </tr>
    <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
      <tr>
        <td>单元格</td>
      <td>单元格</td>
      <td>单元格</td>
    </tr>
  </tbody>
</table>





</body>
</html>

day05-table实例

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
th,td{padding:0;}
table{border-collapse:collapse;}
/* table css reset */


.tab{ width:640px; margin:90px auto;}
.tab th,.tab td{border:1px solid #99b0da;}
.tab th{ height:30px; font-size:14px; background:#dbe3fa;}
.tab td{ height:28px; font-size:12px; text-align:center;}
img{vertical-align:top;}
.tab .none{border:none; height:4px; overflow:hidden;}


</style>
</head>
<body>

<table class="tab">
    <tbody>
      <tr>
        <th colspan="2" width="172">日期</th>
      <th colspan="2" width="179">天气现象</th>
      <th width="95">气温</th>
      <th width="94">风向</th>
      <th width="94">风力</th>
    </tr>
    <tr>
        <td rowspan="2" width="95">星期五</td>
      <td width="76">白天</td>
      <td width="63"><img src="sun.jpg" alt=""/></td>
      <td width="115">晴天</td>
      <td>气温</td>
      <td>风向</td>
      <td>风力</td>
    </tr>
    <tr>
      <td>夜间</td>
      <td><img src="sun.jpg" alt=""/></td>
      <td>晴天</td>
      <td>气温</td>
      <td>风向</td>
      <td>风力</td>
    </tr>
    <tr>
        <td colspan="7" class="none"></td>
    </tr>
    <tr>
        <td rowspan="2" width="95">星期六</td>
      <td width="76">白天</td>
      <td width="63"><img src="sun.jpg" alt=""/></td>
      <td width="115">晴天</td>
      <td>气温</td>
      <td>风向</td>
      <td>风力</td>
    </tr>
    <tr>
      <td>夜间</td>
      <td><img src="sun.jpg" alt=""/></td>
      <td>晴天</td>
      <td>气温</td>
      <td>风向</td>
      <td>风力</td>
    </tr>
  </tbody>
</table>

</body>
</html>

day06-表单

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}


form{border:1px solid red;}

</style>
</head>
<body>

<form action="http://www.miaov.com/" method="get" target="_blank">
提交按钮：<input type="submit" value="提交OK" name="" />
<br/><br/>
文本框：<input type="text" name="" />
<br/><br/>
密码框：<input type="password" name="" />
<br/><br/>

单选按钮：
<input type="radio" name="gender" id="a" /><label for="a">男</label>

<input type="radio" name="gender" id="b" /><label for="b">女</label>
<br/><br/>

<!-- 
checked  默认选中
disabled 禁用
 -->
复选框：
<input type="checkbox" name="" disabled />宅
<input type="checkbox" name="" disabled />腐
<input type="checkbox" name="" />逛街
<input type="checkbox" name="" />健身
<input type="checkbox" name="" />直排
<input type="checkbox" name="" checked/>旅游
<input type="checkbox" name="" />美食

<br/><br/>
<hr/>
上传：<input type="file" name="" />
<br/><br/>
图片：<input src="sun.jpg" type="image" name="" />
<br/><br/>
按钮：<input  type="button" name="" />
<br/><br/>
重置：<input  type="reset" name="" />
<br/><br/>
隐藏：<input  type="hidden" name="" />
<br/><br/>
<hr/>
下拉选框：
<select>
    <option>1999</option>
  <option>1998</option>
  <option selected>1997</option>
  <option>1996</option>
  <option>1995</option>
</select>
<br/><br/>
文本域：<textarea></textarea>


</form>
<form>form2</form>

</body>
</html>

用仿actionscript的语法来编写html5——第七篇，自定义按钮

第七篇，自定义按钮这次弄个简单点的，自定义按钮。其实，有了前面所定义的LSprite,LBitmap等类，定义按钮就很方便了。下面是添加按钮的代码，functiongameInit(event){backLayer=newLSprite();addChild(backLayer);btn01=newLButton(newLBitmap(newLBitmapDat... 查看详情

web前端第七篇js的dom对象一

一、什么是HTML DOM HTML DocumentObjectModel（文档对象模型） HTMLDOM定义了访问和操作HTML文档的标准方法 HTMLDOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树)二、DOM树画dom树是为了... 查看详情

第七篇：面向对象高级

第七篇：面向对象高级 PYTHON-绑定方法反射内置函数PYTHON-组合封装多态property装饰器查看详情

第七篇图像分类的评价指标

文章目录摘要混淆矩阵准确率(Accuracy)精确率（Precision）召回率（Recall）F1-score代码样例查看详情

第七篇图像分类的评价指标

文章目录摘要1、混淆矩阵2、准确率(Accuracy)3、精确率（Precision）4、召回率（Recall）5、F1-score6、代码样例查看详情

第七篇-列表式app：listactivity及listview

一、新建一个emptyactivity的项目。二、修改MainActivity.java:extendsAppCompactActivity改为extendsListActivity。注释掉setContentView(R.layout.activity_main);packagecom.example.aimee.listapp;importandroid.app.ListActivity;im 查看详情

android基础第七篇

转载请标明出处：http://blog.csdn.net/gj782128729/article/details/52424876；本文出自:【高境的博客】1.清单文件AndroidManifest.xml1.1.清单文件的作用每个Android应用都需要一个名为AndroidManifest.xml的程序清单文件，这个清单文件名是固定的并且... 查看详情

第七篇7.1章

1.继承起源　　继承：根据‘已有的一个类’进行扩展，‘继承该类的属性和行为’来创建一个‘新的类’，已有的类称为‘父类’（超类，基类），新类称为‘子类’（派生类）　　什么时候使用继承：使用继承不仅可以... 查看详情

第七篇--如何改变vs2017版的背景

改变背景 C:\Users\zsunny\AppData\Local\Microsoft\VisualStudio\15.0_9709afbe\Extensions\o0g0c52k.3od\Images 查看详情

第七篇pythonio操作

文章目录10文件操作10.1打开与关闭10.1.1打开文件10.1.2关闭文件10.2文件的读写10.2.1写数据(write)10.2.2读数据(read)10.2.3读数据（readlines）10.2.4读数据（readline）10.3文件的常用操作10.3.1获取当前读写的位置10.3.2定位到某个位置10.3.3文件... 查看详情

第七篇pythonio操作

构建之法——第七篇

本周我对于软件的设计与实现和用户体验进行了一个深度的学习。我们写软件就是要解决用户的需求，我们需要表达和传递一些信息：在“需求分析”阶段，我们要搞清楚，在问题领域的现实世界里，都有哪些实体，如何抽象出... 查看详情

springcloud第七篇|声明式服务调用feign

本文是SpringCloud专栏的第七篇文章，了解前六篇文章内容有助于更好的理解本文：SpringCloud第一篇|SpringCloud前言及其常用组件介绍概览SpringCloud第二篇|使用并认识Eureka注册中心SpringCloud第三篇|搭建高可用Eureka注册中心SpringCloud第四... 查看详情

第七篇函数二

一、冒泡排序li=[15,14,13,12,11]"""这里是外面套循环轮数，内部循环拿到一个最大值记住，range的循环不带最后一个里面循环是拿到一个最大值，然后外面是循环多少轮那就把最大值拿出来了"""‘‘‘forninrange(1,len(li)):forminrange(len(li)... 查看详情

flask第七篇flask中的wtforms使用

一、简单介绍flask中的wtformsWTForms是一个支持多个web框架的form组件，主要用于对用户请求数据进行验证。安装：pip3installwtforms二、简单使用wtforms组件1、用户登录具体代码：fromflaskimportFlask,render_template,request,redirectfromwtforms.fieldsimp... 查看详情

第七篇：经典案例：数据去重

需求去除掉海量文件中的存在着的重复数据，并将结果输出到单个文件中。比如有文件1中有以下数据： hello my name 查看详情

love2d从青铜到王者第七篇:love2d之对象(代码片段)

系列文章目录文章目录系列文章目录前言🍇一、Tables表格1️⃣.Tables表格🍈二、再来一次(Onemoretime)🍉三、函数(Functions)🍑四、总结🍋总结前言🍇一、Tables表格1️⃣.Tables表格在上一篇文章中，我们使... 查看详情

第七篇使用uiview的animatewithduration方法制作简易动画

importUIKitclassLolitaCircleButton:UIButton{privatevarcolor:UIColorprivatevarimageURL:Stringinit(color:UIColor,imageURL:String){self.color=colorself.imageURL=imageURLsuper.init(frame:CGRectZero) 查看详情