表格的基本用法

1、<!DOCTYPE html><html><head lang="en">

<meta charset="UTF-8">

<title>表格的使用</title></head><body><!--

border:表格的边框

cellspacing：单元格之间的距离

cellpadding：单元格与内容之间的距离

width:代表表格在整个浏览器中的宽度显示

bgcolor:表格的背景色

align:表格中内容的对齐方式-->

<table  border="1" cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffc0cb">

<tr  align="center">

<td>第1行第1列</td>

<td>第1行第2列</td>

<td>第1行第3列</td>

<td>第1行第4列</td>

</tr>

<tr align="center">

<td>第2行第1列</td>

<td>第2行第2列</td>

<td>第2行第3列</td>

<td>第2行第4列</td>

</tr>

</table>

</body></html>

2、<!DOCTYPE html><html><head lang="en">

<meta charset="UTF-8">

<title>高级表格的使用</title></head><body>

<table width="80%" cellspacing="0" cellpadding="0" border="1">

<!--标题-->

<caption>年终数据报表</caption>

<!--页眉-->

<thead bgcolor="yellow">

<!--表头-->

<tr>

<th>月份</th>

<th>收入</th>

</tr>

</thead>

<!--主体-->

<tbody bgcolor="pink">

<tr>

<td>1</td>

<td>1000</td>

</tr>

<tr>

<td>2</td>

<td>2000</td>

</tr>

<tr>

<td>3</td>

<td>3000</td>

</tr>

<tr>

<td>4</td>

<td>4000</td>

</tr>

</tbody>

<!--页脚-->

<tfoot bgcolor="green">

<tr>

<td>平均月收入</td>

<td>4000</td>

</tr>

<tr>

<td>总计</td>

<td>40000</td>

</tr>

</tfoot>

</table></body></html>

3、跨行和跨列

<!DOCTYPE html><html><head lang="en">

<meta charset="UTF-8">

<title>表格的跨行跨列</title></head><body><!-- 跨行和跨列 只能在 列中td使用-->

<table width="80%" cellspacing="0" cellpadding="0" border="1">

<tr>

<!--学生成绩跨了3列-->

<td colspan="3">学生成绩</td>

</tr>

<tr>

<!--张三跨了2行-->

<td rowspan="2">张三</td>

<td>语文</td>

<td>85</td>

</tr>

<tr>

<td>数学</td>

<td>85</td>

</tr>

<tr>

<td rowspan="2">李四</td>

<td>语文</td>

<td>85</td>

</tr>

<tr>

<td>数学</td>

<td>85</td>

</tr>

</table></body></html>

4、iframe内联框架

<!DOCTYPE html><html><head lang="en">

<meta charset="UTF-8">

<title>内联框架</title></head><body><!--

src:需要引入的文件路径

frameborder:是否显示边框   0  不显示   1 显示

scrolling：是否显示下拉框 auto   no  yes

align:根据周围的元素 这是位置

srcdoc：在内联框架中显示html内容

seamless:默认不显示边框和下拉框

name:内联框架的名称-->

<iframe src="http://www.baidu.com"   srcdoc="<h1>哈哈</h1>"  align="top">

</iframe>

<iframe src="http://www.baidu.com" seamless="seamless"></iframe>

</body></html>

二、HTML5中的一些基本属性

<!DOCTYPE html><html><head lang="en">

<meta charset="UTF-8"></head><body><form action="#" method="post">

<input type="number" min="1" max="5">

<input type="date" min="1990-01-01">

<input type="date" max="2016-12-09">

<input type="time" value="14:43">

<input type="email">

<button type="submit">提交</button></form>

</body></html>

html表格的基本用法的更多相关文章

  1. HTML——表格table标签，tr或者td

    表格定义和用法 <tr> 标签定义 HTML 表格中的行. tr 元素包含一个或多个 th 或 td 元素. HTML 与 XHTML 之间的差异 在 HTML 4.01 中,tr 元素的 ...

  2. 第六十三节，html表格元素

    html表格元素 学习要点:     1.表格元素总汇     2.构建表格解析     本章主要探讨HTML5中表格元素的用法.表格的主要用途是以网格的形式显示二维数据. 一．表格元素总汇     ...

  3. 巧妙使用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  4. 问题：table 可否实现对角线；结果：用div+css模拟表格对角线

    首先声明: 这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见 ...

  5. HTML的列表表格表单知识点

    无序列表格式                                                                                              ...

  6. 用表格制作商品购买页面--(table)

    实现效果如图: 首先来看布局,头部图片,内容从左到右分为四个部分   勾选+商品图片+商品名/买家+价格, 所以需要将头部用<td>包括起来,并且设置<td colspan=&quo ...

  7. BootStrap Table超好用的表格组件基础入门

    右侧导航条有目录哟,看着更方便 快速入门 表格构建 API简单介绍 主要研究功能介绍 快速入门 最好的资源官方文档 官方文档地址****https://bootstrap-table.com/docs ...

  8. iOS-UICollectionView

    1--------------------------------------------------------------------------------------------------- ...

  9. HTML 学习笔记(块 和 类)

    HTML <div> 和 <span> 可以通过<div>和<span>将HTML元素组合起来. HTML块元素 大多数HTML元素被定义为块级元素或者 ...

随机推荐

  1. 【React】入门实例

    React 可以灵活的应用在各种各样的项目中.你可以用它来创建新的应用程序,你也可以逐步引用而不改变现有的代码库. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaS ...

  2. WIN10平板系统 如何自定义分辨率，修改分辨率

    从以下网址下载Intel网卡驱动,注意只要下载zip版本的(如果是exe版本的,双击将提示win10无法为此计算机验证正在安装的驱动程序,也包括你用驱动精灵这种软件,也会安装的时候由于这个问题装不上) ...

  3. LEAPMOTION开发UI专题（1）

    非常 抱歉的是,之前说的LEAP/UI框架设计可能仅仅有两篇 由于个人时间实在是不同意 这个问题假设展开去写的话 那么说写本书都是不为过的 且由于内容改动非常是杂乱 所以我第一篇文章用来介绍LEAP预 ...

  4. mysql和redis的区别

    一..redis和mysql的区别总结 (1)类型上         从类型上来说,mysql是关系型数据库,redis是缓存数据库 (2)作用上        mysql用于持久化的存储数据到硬盘, ...

  5. fiddler模拟发送get/post请求（也可做简单接口测试）

    1.模拟发送请求 (1)fiddler设置post接口信息及参数,点击execute发送请求 (2)fiddler设置get接口信息及参数,点击execute发送请求            2.发送请 ...

  6. Certificate Formats | Converting Certificates between different Formats

    Different Platforms & Devices requires SSL certificates in different formatseg:- A Windows Serve ...

  7. UAC 实现原理及绕过方法-打洞专用

    首页 新随笔 订阅 管理 随笔 - 7  文章 - 0  评论 - 0 UAC 实现原理及绕过方法   目录 0x01 UAC 实现方法(用户登陆过程)0x02 UAC 架构0x03 触发UAC0x0 ...

  8. shell变量的截取总结

    #shell变量的截取 Shell中的${}.##和%% 假设定义了一个变量为: 代码如下: file=/dir1/dir2/dir3/my.file.txt //变量的删除 可以用${ }分别替换得 ...

  9. （原）Ring loss Convex Feature Normalization for Face Recognition

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/8858998.html 论文: Ring loss: Convex Feature Normalizat ...

  10. C#调用存储过程详解(带返回值、参数输入输出等)

    CREATE PROCEDURE [dbo].[GetNameById] @studentid varchar(8), @studentname nvarchar(50) OUTPUT AS BEGI ...