表格的基本用法

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. ISO镜像安装Ubuntu 13.04 64位，启动菜单制作

    1.将光盘镜像中的vmlinuz.efi.initrd.lz,和镜像本身(ubuntu....iso) 三个文件复制到U盘根目录下.如果下面的方法没成功启动,你可能要把U盘格式化为USB-HDD FA ...

  2. 什么是同源策略,什么是跨域,如何跨域,Jsonp/CORS跨域

    同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响. 可以说Web是构建在同源策略基础之上 ...

  3. CentOS7中systemctl的使用与CentOS6中service的区别

    https://blog.csdn.net/u012834750/article/details/80501440 从CentOS 7.x开始,CentOS开始使用systemd服务来代替daemon ...

  4. android用TextView实现跑马灯效果

    今天搞啦很久,其实很简单,就加几个属性就可以啦! 图如下 : 有的说要重写TextView方法,有的说要设置固定长度,但是我没重写也没有设置固定长度也弄出来啦!跑在2.3.3的手机上面.就是不知道其他 ...

  5. [docker]docker4种网络最佳实战

    参考: http://hicu.be/docker-container-network-types docker默认3中网络类型 参考: https://docs.docker.com/engine/ ...

  6. KVM上如何让虚拟机支持虚拟化(kvm虚拟化的嵌套)

    http://blog.csdn.net/swimming_in_it_/article/details/53320141http://blog.csdn.net/wickedglory/articl ...

  7. Python爬取金山词霸每日一句，存储到MySQL中

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2018/7/3 20:25 # @Author : baoshan # @Site : ...

  8. stm32+rx8025

    // 设备读写地址 #define        RX8025_ADDR_READ                0x65 #define        RX8025_ADDR_WRITE       ...

  9. 块级格式化上下文（ Block formatting contexts）

    那么如何触发BFC呢? float 除了none以外的值 overflow 除了visible 以外的值(hidden,auto,scroll ) display (table-cell,table- ...

  10. vue条件与循环

    通过vue控制切换一个元素的显示也相当简单: <div id="app-3"> <p v-if="seen">Now you see m ...