表格标签：

    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"/>

<label for="a">……</label>

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

<input type="checkbox" name="" disabled/>

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>

html+css第七篇-表格的更多相关文章

  1. 2天驾驭DIV+CSS （基础篇）（转）

    这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...

  2. 2天驾驭DIV+CSS （技巧篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  3. 2天驾驭DIV+CSS （实战篇）（转）

     这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...

  4. java并发编程工具类JUC第七篇:BlockingDeque双端阻塞队列

    在之前的文章中已经为大家介绍了java并发编程的工具:BlockingQueue接口.ArrayBlockingQueue.DelayQueue.LinkedBlockingQueue.Priorit ...

  5. HTML+CSS基础(HTML篇)

    引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完不成一些功能的,本篇开始学习HTML,文章的主要内容是总结了慕课网中,HTML+CSS ...

  6. 解剖SQLSERVER 第七篇 OrcaMDF 特性概述（译）

    解剖SQLSERVER 第七篇  OrcaMDF 特性概述(译) http://improve.dk/orcamdf-feature-recap/ 时间过得真快,这已经过了大概四个月了自从我最初介绍我 ...

  7. 第七篇 ：微信公众平台开发实战Java版之如何获取微信用户基本信息

    在关注者与公众号产生消息交互后,公众号可获得关注者的OpenID(加密后的微信号,每个用户对每个公众号的OpenID是唯一的.对于不同公众号,同一用户的openid不同). 公众号可通过本接口来根据O ...

  8. 第七篇 Replication：合并复制-订阅

    本篇文章是SQL Server Replication系列的第七篇,详细内容请参考原文. 订阅服务器就是复制发布项目的所有变更将传送到的服务器.每一个发布需要至少一个订阅,但是一个发布可以有多个订阅. ...

  9. 第七篇 Integration Services：中级工作流管理

    本篇文章是Integration Services系列的第七篇,详细内容请参考原文. 简介在上一篇文章,我们创建了一个新的SSIS包,学习了SSIS中的脚本任务和优先约束,并检查包的MaxConcur ...

随机推荐

  1. zabbix和prometheus的优缺点对比

    使用Prometheus(https://github.com/prometheus)原生的k8s服务发现驱动,采集容器化信息:通过微服务参数配置,暴露运行状态信息提供给prometheus,实现微服 ...

  2. linux中文件查找、whereis、which、输出命令

    1.文件查找(find):find是最常⻅和最强⼤的查找命令 格式:find / -name  文件名,比如:find / -name mysql.  (1).模糊查找:*是代表所有的,?是代表⼀个字 ...

  3. nmap常用命令汇总

    nmap常用命令 选项 解释 使用举例 举例说明 Nmap主机发现 -sP Ping扫描     -P0 无Ping扫描     -PS TCP SYN Ping扫描     -PA TCP ACK ...

  4. JVM：类加载与字节码技术-1

    JVM:类加载与字节码技术-1 说明:这是看了 bilibili 上 黑马程序员 的课程 JVM完整教程 后做的笔记 内容 类文件结构 字节码指令 下面的内容在后续笔记中: 编译期处理 类加载阶段 类 ...

  5. [对对子队]会议记录5.22(Scrum Meeting9)

    今天已完成的工作 梁河览 ​ 工作内容:修改第一到九关新手引导,修复关卡选择bug ​ 相关issue:优化初步导出版本 ​ 相关签入:fix:修改第一关到第九关的新手引导和地图场景的bug 马嘉 ​ ...

  6. mongodb的索引操作

    在mongodb中,当我们一个集合中的数据量非常大时,比如几百万条数据,如果不使用索引,对数据的查询就会进行全表扫描,这个时候查询的速度就会非常的慢,此时我们就需要为集合建立上索引,从而加快查询的速度 ...

  7. stm32电机控制之控制两路直流电机！看完你会了吗

    手头上有一个差分驱动的小车,使用两个直流电机驱动,要实现小车的在给定速度下运动,完成直线行驶,转向,加速,刹车等复杂运动. 使用的电机是12v供电的直流电机,带编码器反馈,这样就可以采用闭环速度控制, ...

  8. 深入理解xLua基于IL代码注入的热更新原理

    目前大部分手游都会采用热更新来解决应用商店审核周期长,无法满足快节奏迭代的问题.另外热更新能够有效降低版本升级所需的资源大小,节省玩家的时间和流量,这也使其成为移动游戏的主流更新方式之一. 热更新可以 ...

  9. 计算机网络之网络层路由选择协议（自治系统AS、RIP、OSPF、BGP）

    文章转自:https://blog.csdn.net/weixin_43914604/article/details/105313629 学习课程:<2019王道考研计算机网络> 学习目的 ...

  10. 【做题记录】CF1451E2 Bitwise Queries (Hard Version)

    CF1451E2 Bitwise Queries (Hard Version) 题意: 有 \(n\) 个数( \(n\le 2^{16}\) ,且为 \(2\) 的整数次幂,且每一个数都属于区间 \ ...