表格的基本用法

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. UE.getEditor('editor')

    <script type="text/javascript"> $().ready(function(){ var editor = document.getEleme ...

  2. 启动vmware虚拟机报错：“无法获得VMCI驱动程序的版本：句柄无效”

    启动vmware虚拟机的时候报错: 找到对应虚拟机的文件夹路径: 用记事本打开CentOS 64位.vmx,找到这么一行: vmci0.present = "TRUE" 把TRUE ...

  3. SQL2012 之 创建备份计划

    打开数据库,选择 管理 → 右键维护计划→选择新建维护计划,填写计划名称,如下图: 修改维护计划参数,如下图: 工具箱->备份数据库任务,拖到计划里,如下图: 编辑“备份数据库”任务,如下图: ...

  4. 微软BI 之SSIS 系列 - 在 SSIS 中将指定目录下的所有文件分类输出到不同文件夹

    开篇介绍 比如有这样的一个需求,旧的一个业务系统通常将产出的文件输出到同一个指定的目录下的不同子目录,输出的文件类型有 XML,EXCEL, TXT 这些不同后缀的文件.现在需要在 SSIS 中将它们 ...

  5. hive 字段名称显示

    首先查看一个sql 1.首先存在一个数据表tmp CREATE TABLE tmp( platform string, channel string, chan_value string, uid s ...

  6. python实现模拟登录

    本文主要用python实现了对网站的模拟登录.通过自己构造post数据来用Python实现登录过程.   当你要模拟登录一个网站时,首先要搞清楚网站的登录处理细节(发了什么样的数据,给谁发等...). ...

  7. 译：9.使用Redis进行消息传递

    本指南引导您完成使用Spring Data Redis发布和订阅通过Redis发送的消息的过程.Messaging with Redis 1. 我们将构建什么? 您将构建一个使用StringRedis ...

  8. 0x01 Spring Cloud 概述

    Spring Cloud Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁定,领导选举,分 ...

  9. Atitit  技术经理职责与流程表总结

    Atitit  技术经理职责与流程表总结 1. (最重要) 理念 价值观建设  ***团队文化建设2 1.1. 加强跨项目组员沟通 ,防止重复劳动2 1.2. 活动聚餐2 2. (重要)方向建设 技术 ...

  10. ArcGIS Runtime SDK for iOS之符号和渲染

    符号定义了图形外观的非地理方面.它包括了图形的颜色.线宽.透明度等等.ArcGIS Runtime SDK for iOS包含了许多符号类,其中的每个类可以让你以独特的方式指定符号.每个符号的类型也是 ...