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>… ...
随机推荐
- SpringMVC 数据交互
为什么使用JSON进行数据交互? JSON数据格式比较简单.解析比较方便,在接口调用及HTML页面Ajax调用时较常用. JSON交互方式 请求是Key/Value,响应是JSON(推荐使用) 请求是 ...
- jTopo HTML5 Canvas 画图组件
jTopo是什么? jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系.拓扑图形化界面开发工具包. jTopo关注于数据的图形展示,它是面 ...
- Supermap/Cesium 开发心得----飞天动线的实现
在实际开发中,我遇到这样的问题,只给了两地点的坐标,要求会出从A地到B地的在天上飞的那种动态线 本质上动线的效果就是构造实体Entity中的polyline来实现,设置好材质,颜色和运动频率 具体实现 ...
- 【STM32-V5】STM32F407开发板开源, 丰富软件资源, 强劲硬件配置, 配套500实例, 10套手册带视频教程2019-12-12
淘宝购买地址:购买地址链接 从2013年5月份发布至今,开发板硬件更新过6个版本,软件资料更新过85次.当前标准库最新版本V8.8,HAL库最新版本V1.1 安富莱微信公共平台,欢迎大家关注(打造高质 ...
- 关于Redis 二进制内容的 可视化尝试
二进制内容的 能否可视化? 网上的资料比较少啊! -------------------------------------------------------------------------- ...
- NLP入门（十一）从文本中提取时间
在我们的日常生活和工作中,从文本中提取时间是一项非常基础却重要的工作,因此,本文将介绍如何从文本中有效地提取时间. 举个简单的例子,我们需要从下面的文本中提取时间: 6月28日,杭州市统计局权 ...
- 关于c# winform 键盘响应右边键盘消息响应事件的上下左右方向键没有反应
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11835642.html 记录一下这个小坑,c# winform 键盘响应右边键盘的上下左右方向 ...
- R的获取和安装
一.下载 R可以在CRAN(Comprehensive r archive network)http://cran.r-project.org上免费下载,可供选择的有Linux.Mac OS X和wi ...
- IDEA去除掉虚线，波浪线，和下划线实线的方法
初次安装使用IDEA,总是能看到导入代码后,出现很多的波浪线,下划线和虚线,这是IDEA给我们的一些提示和警告,但是有时候我们并不需要,反而会让人看着很不爽,这里简单记录一下自己的调整方法,供其他的小 ...
- linux用户身份与文件权限
用户 useradd [ 参数 ] 用户名 添加用户 sudo useradd -d /home/test -u 1001 -s /bin/bash name usermod [选项] 用户名 更改用 ...