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>… ...
随机推荐
- wpf键盘
一.键盘类和键盘事件 WPF提供了基础的键盘类(System.Input.Keyboard类),该类提供与键盘相关的事件.方法和属性,这些事件.方法和属性提供有关键盘状态的信息.Keyboard的事件 ...
- git项目创建及在idea工具中使用
1.安装git管理工具 2.在自己github账号上创建一个项目仓库,比如我创建的是renrenView 网页翻译如下: 参数解析如下: 3.本地项目同步到远程仓库步骤 在本地初始化git项目 git ...
- js获取当前时间的年月日时分秒以及时间的格式化
1.获取当前时间 var myDate = new Date(); 2.获取时间中的年月日时分秒 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear( ...
- Cesium专栏-百度地图加载（附源码下载）
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- day06数组、数组声明和赋值、数组复制、数组排序
复习 1.do-while 1)语法 do{ //循环体 }while(<条件>); 2.while和do-while 1)while 先判断,后执行 初始条件不满足,一次都不执行 2)d ...
- canvas的介绍
1.我们前端的绘图技术有哪些: 统计图表:echarts 实时走势图:canvas: 在线画板:魔猴: HTML5游戏:three.js 2.我这里主要讲的是canvas绘图: <canvas& ...
- Spring Boot 的静态资源处理
做web开发的时候,我们往往会有很多静态资源,如html.图片.css等.那如何向前端返回静态资源呢?以前做过web开发的同学应该知道,我们以前创建的web工程下面会有一个webapp的目录,我们只要 ...
- 47.QT-QChart之曲线图,饼状图,条形图使用
1.使用准备 在pro中, 添加QT+= charts 然后在界面头文件中添加头文件并声明命名空间,添加: #include <QtCharts> QT_CHARTS_USE_NAMES ...
- react学习之js-xlsx导入和导出excel表格
前记:最近真的挺忙的,一件事接着一件,都忘了我的React项目,尽管这是一个没写概率没写离散的夜晚,我决定还是先做做我的React 好了,进入正题 项目需求,需要导入和导出表单,发现前端已经强大到无所 ...
- source insight 3 常用设置
总结了一些source insight的一些常用设置,这些设置需求因人而异,自己用的顺手的才是最好的. 1.括号配对高亮“在前括号左侧,后括号左侧”双击鼠标左键,可以选定匹配括号和其中内容(<& ...