表格的基本用法

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. 【NLP】Python实例：基于文本相似度对申报项目进行查重设计

    Python实例:申报项目查重系统设计与实现 作者:白宁超 2017年5月18日17:51:37 摘要:关于查重系统很多人并不陌生,无论本科还是硕博毕业都不可避免涉及论文查重问题,这也对学术不正之风起 ...

  2. pycharm怎么设置代码自动补齐

    代码补全功能在PyCharm上是一流的.默认情况下PyCharm会在你输入的时候给出建议: 由于此功能可有点耗电,你可以通过选择File→Power Save Mode来禁用它.您仍然可以通过Cont ...

  3. Swift udp实现根据端口号监听广播数据（利用GCDAsyncUdpSocket实现）

    有个小需求,app需要监听pc广播的数据: 代码实现思路: 使用三方库:CocoaAsyncSocket 1.开启udp监听: udpSocket.beginReceiving() 2.读取udp的数 ...

  4. 下载网易云音乐的MV

    网易云音乐有很多经典视频, 但是苦于没有下载按钮...今天就记录下如何保存MV到本地, 又get一项新技能!!! 一. 安装360极速浏览器(非安利) 二. 打开网易云音乐客户端, 点击"等 ...

  5. jquery ajax IE

    在ie上会出现,get/post 只调用一次的现象 解决方法: cache:false http://stackoverflow.com/questions/8841425/how-to-set-ca ...

  6. C#面试题（转载）

    原文地址:100道C#面试题(.net开发人员必备)  https://blog.csdn.net/u013519551/article/details/51220841 1. .NET和C#有什么区 ...

  7. 11g新特性-SQL Plan Management

    在11g之前版本,提供了stored outlines(sql概要)特性来保存sql的执行计划. 在11g中,引入了一个新的特性sql计划管理(sql plan management)特性来保存sql ...

  8. C#-MVC开发微信应用(8)--菜单管理的实现

    之前讲解了微信后台管理页面的操作来管理菜单,下面我们在简单的来看一下,代码是如何实现的. 我们要实现获取微信的菜单.创建菜单.删除菜单等操作. 01.首先定义菜单操作的接口: /// <summ ...

  9. GC调优在Spark应用中的实践[转]

    作者:仲浩   出处:<程序员>电子刊5月B   摘要:Spark立足内存计算,常常需要在内存中存放大量数据,因此也更依赖JVM的垃圾回收机制.与此同时,它也兼容批处理和流式处理,对于程序 ...

  10. Android 浮动窗口进阶——画中画，浮动视频（附Demo）

    今天继续上一篇Android顶层窗口.浮动窗口的进阶应用.上一篇主要讲解了WindowManager服务和如何使用WindowManager编写一个顶层窗口.今天主要是讲讲如何在顶层窗口里面播放视频, ...