表格的基本用法

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. mongodb 字符串查找匹配中$regex的用法

    官网地址:https://docs.mongodb.com/manual/reference/operator/query/regex/#regex-case-insensitive 举个例子来说:现 ...

  2. 用户人品预测大赛--TNT_000队--竞赛分享

     用户人品预测大赛--TNT_000队--竞赛分享  DataCastle运营 发表于 2016-3-24 14:29:57      887  0  0 答辩PPT 0 回复     用户反馈 隐私 ...

  3. grid - 网格项目跨行或跨列

    默认情况下网格项目跨度只有一个列和行,但可以跨越多个行和列. 1.可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越. <view cl ...

  4. 微软BI 之SSRS 系列 - 如何让报表在一页显示，两种常用的技巧

    通常情况下,SSRS 报表在页面内容过多的时候会自动分页.但有的时候当页面内容不是很多,大概最多2页的情况下,或者客户要求所有内容必须在一页显示时,应该如何设置. 实际上,要考虑两种情况:第一种情况是 ...

  5. 从网上找的Android实用代码，记录备用

    1.获取应用程序下所有Activity public static ArrayList<String> getActivities(Context ctx) { ArrayList< ...

  6. linux远程开启不挂起的服务

    解决Linux关闭终端(关闭SSH等)后运行的程序自动停止 λ nohup --help Usage: nohup COMMAND [ARG]... or: nohup OPTION Run COMM ...

  7. 〖Linux〗Kubuntu 14.04的Eclipse 崩溃解决方法总结

    1. 普通崩溃问题: eclipse/configuration/config.ini在后边添加 org.eclipse.swt.browser.DefaultType=mozilla 2. Kubu ...

  8. 创建py模板

    创建模板之后,每次新建py文件,已初始定义的代码段将会自动出现在py文件中.

  9. 浅谈常用的几种web攻击方式

    一.Dos攻击(Denial of Service attack) 是一种针对服务器的能够让服务器呈现静止状态的攻击方式.有时候也加服务停止攻击或拒绝服务攻击.其原理就是发送大量的合法请求到服务器,服 ...

  10. VirtualBox安装64位系统

    2010-04-29    到引导区报错: This kernel requires an X86-64  CPU,but only detected an i686 CPU. 以我小学水平的英语理解 ...