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>… ...
随机推荐
- Javassist中文技术文档
本文译自Getting Started with Javassist,如果谬误之处,还请指出. bytecode读写 ClassPool Class loader 自有和定制 Bytecode操控接口 ...
- 【数据库】SQLite3常用命令
版权声明:本文为博主原创文章,转载请注明出处. https://www.cnblogs.com/YaoYing/ 打开SQLite3文件 sqlite3 student.db //打开student. ...
- 【zabbix部署】基于linux安装zabbix监控服务和被监控服务
环境配置 zabbix_server:10.0.0.1 zabbix_agentd:10.0.0.1,10.0.0.2(暂定) 操作系统:centos7.6 安装环境配置 1. LNMP环境 zabb ...
- Hive 性能测试工具 hive-testbench
下载: yum -y install gcc gcc-c++ maven 下载地址Github:https://github.com/hortonworks/hive-testbench/git cl ...
- IDEA 如何自动导入（import）
如果大家正在使用一个未曾导入(import)过的类,或者它的静态方法或者静态字段,IDEA 会给出对应的建议,只要按下 ⌥(option)和回车就可以接受建议. 但我觉得这样做仍然很麻烦,不够智能化. ...
- springboot~mybatis枚举映射
在mybatis和mybatis plus里,如果你的实体字段是一个枚举类型,而在数据表里是整型,这时在存储时需要进行处理,默认情况下,会把枚举的元素名称拼接到SQL语句里,而由于数据表是int类型, ...
- js数组对象过滤——filter,find,some,every
1.filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素. 原数组不变 不会对空数组进行检测 let arr1 = [1,2,3,4] let ...
- [Go] 轻量服务器框架基础TCP连接的抽象和封装
对tcp连接部分以及与连接绑定的业务部分进行抽象和封装 主要是对连接的开启关闭和读写进行封装,抽象出接口,使用回调进行具体业务的绑定 zinterface/iconnection.go package ...
- leetcode——链表
206. 反转链表(易) 反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->N ...
- 关于tomcat对编码不正确的url参数报错的解决
按照规范,url参数必须使用限定字符,其它字符需要进行编码,用像js的encodeurlcomponent函数. 在IE和360浏览器的兼容模式,不会自动对url的参数进行编码,会导致tomcat报错 ...