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>… ...
随机推荐
- python内置模块-datetime
摘录 廖雪峰网站 datetime是python内置的处理日期和时间的标准库 获取当前日期和时间 >>> from datetime import datetime >> ...
- Android 数据库 SQLiteOpenHelper
public class DbOpenHelper extends SQLiteOpenHelper { private static String name = "test.db" ...
- Linux电源管理(7)_Wakeup events framework
1. 前言 本文继续"Linux电源管理(6)_Generic PM之Suspend功能"中有关suspend同步以及PM wakeup的话题.这个话题,是近几年Linux ker ...
- web 自动化遇到 shadowDOM 节点你会操作吗？
本文转载自: http://www.lemfix.com/topics/971 近期有同学在做web自动化的时候,发现页面上有些元素,在selenium中无法通过xpath来定位,各种原因找了半天,都 ...
- Netty面试题和解答(一)
基础 TCP和UDP的区别? TCP是面向连接的(在客户端和服务器之间传输数据之前要先建立连接),UDP是无连接的(发送数据之前不需要先建立连接) TCP提供可靠的服务(通过TCP传输的数据.无差错, ...
- AndroidStudio使用的kotlin简介
Kotlin是一种在Java虚拟机上执行的静态型别程式语言,它也可以被编译成为JavaScript原始码.它主要是由俄罗斯圣彼得堡的JetBrains开发团队所发展出来的程式语言,其名称来自于圣 ...
- ElasticSearch 安装, 带视频
疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 疯狂创客圈 高并 ...
- 剑指offer笔记面试题6----从未到头打印链表
题目:输入一个链表的头结点,从尾到头反过来打印出每个结点的值.链表节点定义如下: struct ListNode{ int m_nKey; ListNode* m_pNext; } 测试用例: 功能测 ...
- MySQL的表定义语法
表定义 只有成功创建数据库后,才能创建数据表,数据表是字段的集合,在表中数据按行和列的格式存储 创建表 MySQL 使用 CREATE TABLE 创建表.其中有多个选择,主要由表创建定义(creat ...
- sharepoint2010 部署到Windows server 2012 R2服务器遇到的问题
最近由于客户服务器升级到windows server2012 R2 版本,生产环境需要相应升级. 查看很多资料,服务器升级到windows server2012 R2 版本,sharepoint要升级 ...