HTML基础——表格的应用
一、表格标签
1、基本格式：
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
例如：
<html>
<head>
<title>表格标签</title>
<meta charset="utf-8"/>
</head> <body>
<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
表格标题：<caption>标签：
表格表头：<th>标签
例如：
<html>
<head>
<title>表格标签</title>
<meta charset="utf-8"/>
</head> <body>
<table border="1">
<caption>一个表格</caption>
<tr><th>1-1</th><td>1-2</td><td>1-3</td></tr>
<tr><th>2-1</th><td>2-2</td><td>2-3</td></tr>
<tr><th>3-1</th><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
2、属性：
width:表格宽度
height:表格高度
border:边框
cellspacing:是表格里单元格之间的距离
cellpadding:表格里单元格内的空白部分
align:表格水平位置
summary:规定表格的摘要
bgcolor:规定表格的背景颜色(不赞成使用)
align:
规定表格现象对周围元素的对齐方式。
值：left center righnt(); <td>的属性：
*colspan="列数"
*rowspan="行数"
例1(表格边框)：
<html>
<head>
<title>设置表格边框</title>
<meta charset="utf-8"/>
</head> <body>
<h4>表格边框属性：设置无边框</h4>
<table>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table> <h4>表格边框属性：设置为border="1"</h4>
<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table> <h4>表格边框属性：设置为border="8"</h4>
<table border="8">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
例2(跨行跨列表格)：
<html>
<head>
<title>表格标签</title>
<meta charset="utf-8"/>
</head> <body>
<table border="1">
<caption>一个表格</caption>
<!--rowspan实现跨行-->
<tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-2</td><td>2-3</td></tr>
<!--colspan实现跨列-->
<tr><td colspan="2">3-1</td><td>3-3</td></tr>
</table>
</body>
</html>
例3(设置单元格间距):
<html>
<head>
<title>设置单元格间距</title>
<meta charset="utf-8"/>
</head> <body>
<h4>单元格无间距</h4>
<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table> <h4>单元格间距为8</h4>
<table border="1" cellspacing="8"/>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
例4(单元格的边距):
<html>
<head>
<title>设置单元格边距</title>
<meta charset="utf-8"/>
</head> <body>
<h4>默认单元格边距</h4>
<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table> <h4>单元格边距为设置8</h4>
<table border="1" cellpadding="8"/>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
例4(为单元格添加背景颜色或者背景图像):
<html>
<head>
<title>添加单元格背景</title>
<meta charset="utf-8"/>
</head> <body>
<h4>背景设置为红色</h4>
<table border="1" bgcolor="red">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table> <h4>背景设置为蓝色</h4>
<table border="1" bgcolor="blue"/>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table> <h4>为表格单元添加背景颜色</h4>
<table border="1" bgcolor="blue"/>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
例5(对齐方式):
<html>
<head>
<title>表格的对齐方式</title>
<meta charset="utf-8"/>
</head> <body>
<table width="400" border="1">
<tr>
<th align="left">商品</th>
<th align="right">原价</th>
<th align="right">现价</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">$241.10</td>
<td align="right">$50.20</td>
</tr>
<tr>
<td align="left">围巾</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
</tr>
<tr>
<td align="left">裤子</td>
<td align="right">$730.40</td>
<td align="right">$650.00</td>
</tr>
<tr>
<th align="left">总和</th>
<th align="right">$1001.50</th>
<th align="right">$744.65</th>
</tr>
</table>
</body>
</html>
例6(表格frame属性——配置边框是否可见)：
<html>
<head>
<title>表格frame属性</title>
<meta charset="utf-8"/>
</head> <body>
<!--有边框-->
<p style="color:blue"><strong>frame="box":</strong></p>
<table frame="box">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<!--只有上边框-->
<p style="color:blue"><strong>frame="above":</strong></p>
<table frame="above">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<!--只有下边框-->
<p style="color:blue"><strong>frame="below":</strong></p>
<table frame="below">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<!--只有上下边框-->
<p style="color:blue"><strong>frame="hsides":</strong></p>
<table frame="hsides">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<!--只有左右边框-->
<p style="color:blue"><strong>frame="vsides":</strong></p>
<table frame="vsides">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
</body>
</html>
3.thead、tbody、tfoot
表格一般分为三部分：
- thead：表格的头，用来存放标题之类的内容。
- tbody：表格的身体，用来存放数据本体内容。
- tfoot：表格的脚，用来存放表格的脚注之类的内容。
在写html代码时候，thead、tbody和tfoot的内容（不论在html代码中三者的先后顺序如何），最终呈现出来的都是thead、tbody和tfoot的顺序。
一般表格需要页面需要表格加载完全后才会显示出来。而加上thead、thead和tfoot后，会优先加载tbody的内容。
HTML基础——表格的应用的更多相关文章
- 【共享单车】—— React后台管理系统开发手记：AntD Table基础表格
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- HTML学习笔记 基础表格案例 第二节 （原创） 参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html基础-表格-列表（4）
今天准备为大家准备了表格和列表. 一.文章有各种数据的表格这个网页也不例外. (1).标签意思 <table>----------------------表格开始 <caption& ...
- html基础——表格练习
最终样式 步骤分析: 标题和报名时间为一块 表格为一块 由图可知,可创建一个七行八列的列表存储数据 首先设置边框的样式,边框 大小,这里是黑色不好看可以设置为天空蓝 可选矿使用<input ty ...
- HTML+css基础 表格标签table Table标签属性 td标签属性
表格标签table: 他是由行与列构成,最小单位是单元格. 行标签 <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...
- HTML-表格-基础表格
主要内容: HTML表格 基本语法和结构: 案例: border用在table标签里面,表示边框的. th标签是加粗,width是宽度,表格宽度用在table里面.: caption用在table ...
- 2020年12月-第01阶段-前端基础-表格 table
表格 table(会使用) 为了让我们页面显示的更加整齐,我们需要学习三个表(表格.表单.列表) 理解: 能说出表格用来做什么的 表格的基本结构组成 表格作用: 存在即是合理的. 表格的现在还是较为常 ...
- html基础 表格的相关属性使用
1.1表格的基本标签 语法结构:<table> /*整体包裹部分,包裹多个tr */ <tr> /* 表格的每一个行,包裹td */ <td></td> ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
随机推荐
- C#中使用Path、Directory、Split、Substring实现对文件路径和文件名的常用操作实例
场景 现在有一个文件路径 E:\\BTSData\\2019-11\\admin_20180918_1_1_2 需要获取最后的文件名admin_20180918_1_1_2 需要获取文件的上层目录20 ...
- tyvj 1387 迷你火车头
dp百题进度条[1/100] 一列火车有一个火车头拖着一长串的车厢,每个车厢有若干个乘客. 一旦火车头出了故障,所有的车厢就只能停在铁轨上了,因此铁路局给每列火车配备了三个迷你火车头,每个迷你火车头可 ...
- 4.Android-adt安卓打包过程、adb指令学习
本章学习adt安卓打包过程.adb指令学习.并通过adb将打包的APK发给设备 1.打包 在eclipse中已经帮我们实现打包了. 具体打包流程如下: 最终一个APK包含了如下: classes.de ...
- 蒟蒻的PKUWC2019划水记（更新ing）
前言 (结束再补) \(Dec\ 20th\) 正式出发 今天,是正式出发的日子. 虽说是星期五,可并没有去学校晨跑.难得睡到了\(7\)点,起来匆匆吃完了早饭(一个手抓饼),就出发去火车站了. 到了 ...
- linux服务器JDK1.8环境变量配置
1. 场景描述 软件老王年龄大了,新机器(Linxu)下,配置JDK环境变量老记不住,记录下,有需要的朋友参考下. 2. 解决方案 2.1 上传tar包 ftp上传tar包: jdk-8u181-li ...
- Jmeter 查看结果树之界面功能介绍 [8]
查看结果树显示所有请求响应的树,通过它可以查看任何请求的响应.除了显示响应之外,还可以查看获取响应所花费的时间以及一些响应代码.需要通过"查看结果树"来查看服务器处理请求之后的返回 ...
- mysql 排它锁之行锁、间隙锁、后码锁
MySQL InnoDB支持三种行锁定 行锁(Record Lock):锁直接加在索引记录上面,锁住的是key. 间隙锁(Gap Lock):锁定索引记录间隙,确保索引记录的间隙不变.间隙锁是针对事务 ...
- PlayJava Day027
进程状态 1.创建状态:在程序中用构造方法创建了一个线程对象后,新的线程对象便处于新建状态 此时,它已经有了相应的内存空间和其他资源,但还处于不可运行状态 新建一个线程对象可采用Thread类的构造方 ...
- QGIS 3.4 3.6 另存栅格图层到GeoPackage出现覆盖问题 解决方案
转载请声明:博客园 @秋意正寒 升级你的QGIS到3.8或以上 这在3.4.x和3.6.x都存在同样的问题.在老版本QGIS重,如果新建一个GeoPackage,先存入栅格数据就没有这个问题,但是如果 ...
- iOS利用剪切板在app中传递信息
利用iOS剪切板在app中传递信息 App1 中添加URLSchemes app1 App2 中国添加URLSchemes app2 App1中进入app2: UIApplication.sh ...