web表格(详解)

news2025/1/23 10:24:33

目录

1.概述

2.表格的基本结构

3.表格的属性

4.单元格合并


1.概述

表格的基本语法结构:

<table>
	<tr>
		<td>单元格内容</td>
		 ……
	</tr>
	<tr>
		<td>单元格内容</td>
		 ……
	</tr>
</table>

其中< table>用于声明一个表格对象, <tr>用于声明一行,<td>用于声明一个单元格。

注意:表格中所以的<tr></tr>标记都必须放到<table></table>标记之间。

例如:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格示例</title>
</head>
<body>
	<table width="300" border="2">
		<tr>
			<td>1</td>
			<td>2</td>	
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
	</table>
</body>
</html>

结果:

2.表格的基本结构

从结构上看,表格可以分成表头、主体和表尾三个部分,分别用<thead、<tbody>和<tfoot>标记表示。

注意:

1.表头和表尾在一张表格中只能有一个,而一张表格可以有多个主体。

2.对于大型表格来说,应该将<tfoot>出现在<tbody>的前面,这样浏览器显示数据时有利于加快表格的显示速度。

3.<thead>、<tbody>、<tfoot>标记内部都必须使用。
表格结构划分的好处:

1.可以先显示<tbody>的内容,而不必等整个表格下载完成后才能显示。

2.无论<thead>、<tbody>、 <tfoot>的顺序如何改变,<thead>的内容总是在表格的最前面,<tfoot>的内容总是在表格的最后面。

例如:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格基本结构</title>
</head>
<body>
	<table width="300" border="2">
		<thead>
			<tr>
				<th colspan="3" align="center">表头</th>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<td colspan="3" align="center">这是表尾</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
		</tbody>

	</table>
</body>
</html>

结果:

表格相关标记的说明
元素说明
tr单元行,由若干单元格横向排列而成
td单元格,包含表格数据
th单元格标题,与td作用相似,但一般作为表头行的单元格
 table表格的最外层标记,代表一个表格
thead表头分组
tfoot表尾分组
tbody表格主体分组
colgroup列分组
caption表格标题

3.表格的属性

使用<table>标记可以设置表格的高度、宽度、边框线的粗细、对齐方式、背景颜色、背景图片、单元格间距和边距等表格属性。

表格的属性及其说明
属性说明
align表格的对齐方式,通常是left (左对齐)、center (居中对齐)、right (右对齐
height表格高度
width表格宽度
bordercolor表格边框的颜色
bgcolor表格的背景颜色
border表格边框
background表格的背景图片
cellspacing单元格之间的间距
cellpadding单元格的内容与其边框的内边距

例如:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格的属性</title>
</head>
<body>
	<table border="2" width="400" bordercolor="red" height=60px cellspacing="2" align="center" bgcolor="pink">
		<caption>表格标题</caption>
		<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
		</tr>
		<tr>
			<td>123456</td>
			<td>张三</td>
			<td>软件工程</td>
		</tr>
	</table>
</body>
</html>

结果:

使用<table>标记可以从总体上设置表格属性,根据网页布局的需要,还可以单独对表格中的某行和某一个单元格进行属性设置。在HTML文档中,<tr>标记用来生成和设置表格中一行的标记,其属性的语法格式如下:

<tr height="行高" align="水平对齐方式" va1ign="垂直对齐方式" bgcolor="背景颜色">

其中valign属性(取值可以为top顶端对齐、middel居中对齐、bottom底端对齐)

:对上面表格进行改动:在表格的第二行<tr>标记中,通过align属性设定表格水平方向为居中对齐:通过height属性设定表格高度为50像素;通过valign设定该行的垂直方向为顶端对齐:通过bgcolor属性设定该行的背景颜色为蓝色。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>表格的行属性</title>
</head>
<body>
	
	<table border="2" width="400px">
		<caption>学生信息</caption>
		<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
		</tr>
		<tr align="center" valign="top" height=50px bgcolor="blue">
			<td>8888</td>
			<td>张三</td>
			<td>软件工程</td>
		</tr>
	</table>
</body>
</html>

结果:

4.单元格合并

默认情况下,表格中每行的单元格高度和宽度都是一样的。跨行和跨列功能可以分别通过单元格的rowspan和colspan属性实现,其基本语法如下:

<td rowspan= "所跨行数”colspan=" 所跨列数">

注意:rowspan和colpan的属性值是一一个 具体的数值

 例如:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>合并单元格</title>
</head>
<body>
	<table border="2" width="400px">
		<tr>
			<td>1</td>
			<td>1</td>
			<td rowspan="2">1</td>
			<td>1</td>
		</tr>
		<tr>
			<td>1</td>
			<td>1</td>
			<td>1</td>
		</tr>
		<tr>
			<td colspan="3">1</td>
			<td>1</td>
		</tr>
	</table>
</body>
</html>

结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/40372.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[附源码]SSM计算机毕业设计视屏网站论文JAVA

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

C++ Primer Plus第五版笔记(p51-100)

45 46 常量指针必须初始化 47 一条语句可以定义出不同类型的变量 int i10, *p&i,&r i; 48 应该是int p 而不是int p 49 **表示指向指针的指针 p52 50 指针是对象&#xff0c;所以存在对于指针的引用 int *p; int *&rp; 51 在默认状态下 &#xff0c;const对象只…

【教材】2022/11/27[指针] 指针与函数基础

程序&#xff1a;求10个数的最大数 1、定义指向函数的指针变量调用函数的方法 一般定义形式为&#xff1a;类型名 &#xff08;*指针变量名)()&#xff1b; #include<stdio.h> int main() {int i, m, a[10], max(int* p);int (*f)();for (i 0; i < 10; i)scanf_s(&q…

day7【代码随想录】移除链表元素

文章目录一、链表定义二、移除链表元素&#xff08;力扣203&#xff09;1、直接使用原来的链表来进行删除操作2、设置一个虚拟头结点在进行删除操作三、删除链表中的节点&#xff08;力扣237&#xff09;一、链表定义 public class ListNode {// 结点的值int val;// 下一个结点…

如何安装Jmeter监控服务器资源插件(JMeterPlugins + ServerAgent 方法二)?

一、服务器端插件 1、下载链接:https://pan.baidu.com/s/1Is1kuC656cB0mC4vOLHyhw?pwd12f1 提取码:12f1 &#xff08;或者这个下载服务器插件&#xff1a;ServerAgent 下载地址&#xff1a;https://github.com/undera/perfmon-agent&#xff09; 2、服务器端插件 将下载的Se…

Redis最全详解(一)——基础介绍

Redis介绍 redis是基于内存可持久化的日志型、Key-Value数据库。redis安装在磁盘&#xff0c;但是数据存储在内存。非关系型数据库NoSql。开源免费&#xff0c;遵守BSD协议&#xff0c;不用关注版权问题。 redis作者github&#xff1a;github.com/antirez redis是一种基于键…

【数字信号去噪】小波阙值数字信号去噪和求信噪比【含Matlab源码 2191期】

⛄一、小波阈值法去噪概述 电能质量扰动信号的噪声大多以高斯白噪声的形式存在&#xff0c;利用小波变换对信号进行多分辨率分解&#xff0c;由于小波变换具有去除数据相关性的特点&#xff0c;故可以将有用信号与噪声的能量分离开来。信号中有效的信息主要集中在较大的小波系…

[阶段4 企业开发进阶] 2. Redis--实战篇

文章目录实战篇1 短信登录1.1 导入项目导入SQL有关当前模型导入后端项目导入前端工程运行前端项目1.2 基于Session实现登录流程1.3 实现发送短信验证码功能1.4 实现登录校验拦截器1.5 隐藏用户敏感信息1.6 session共享问题实战篇 1 短信登录 1.1 导入项目 导入SQL 有关当前模…

多监控系统产生的告警如何高效管理 - 运维事件中心

随着互联网服务深入千行百业&#xff0c;数字化成为企业和机构为用户提供服务的重要形式。在企业的IT基础架构趋于复杂化的过程中&#xff0c;运维管理工作的技术性也有了更高的要求。如果针对相关的故障&#xff0c;企业无法做到及时的发现和响应&#xff0c;将会延长上层业务…

ElasticSearch中基础API操作

1:首先我们需要连接ElasticSearch客户端&#xff0c;需要一个连接操作&#xff1a; RestHighLevelClient package com.atguigu.es.test;import org.apache.http.HttpHost; import org.elasticsearch.client.RestClient; import org.elasticsearch.client.RestHighLevelClient;…

分布式全局唯一ID生成方案(附源码)

1、概述 ID&#xff0c;全称Identifier&#xff0c;中文翻译为标识符&#xff0c;是用来唯一标识对象或记录的符号。比如我们每个人都有自己的身份证号&#xff0c;这个就是我们的标识符&#xff0c;有了这个唯一标识&#xff0c;就能快速识别出每一个人。 在计算机世界里&…

客快物流大数据项目(八十八):ClickHouse快速入门

文章目录 ClickHouse快速入门 一、​​​​​​​​​​​​​​安装ClickHouse&#xff08;单机&#xff09; 1、安装yum-utils工具包 2、添加ClickHouse的yum源 3、安装ClickHouse的服务端和客户端 4、关于安装的说明 5、查看ClickHouse的版本信息 二、在命令行中操作…

【深度思考】5年开发经验,不知道git rebase,是否应该被嘲笑?

最近逛脉脉&#xff0c;发现了一个热度挺高的帖子&#xff0c;一位同学发帖说&#xff1a;同事5年经验&#xff0c;竟然不知道git rebase&#xff0c;真牛批 ☆ 今天咱们不讨论git rebase是干什么用的&#xff0c;因为讨论半天可能三两句话就说出来了&#xff0c;实在没有意思&…

Linux的进程互调技术(多语言互调)

Linux的进程互调技术(多语言互调) 文章目录Linux的进程互调技术(多语言互调)1.函数与进程之间的相似性2.多语言程序互调技术1.函数与进程之间的相似性 如果你学过C语言&#xff0c;你应该有以下认识&#xff1a; 一个C程序由很多函数组成&#xff0c;一个函数可以调用另一个函数…

STC 51单片机42——汇编 定时器 舵机

ORG 0000H HighH EQU 30H; 定义变量&#xff0c;高电平高八位 TimerH EQU 31H; 定义变量&#xff0c;高电平高八位定时值 TimerL EQU 32H; 定义变量&#xff0c;高电平低八位定时值 Right BIT P2.0 ; 右转 Left BIT P2.1 ; 左转 N…

IDEA搭建SSM框架【配置类、新手向】

以下操作基于2020.3企业版 1.创建Java Enterprise项目 直接默认即可 输入项目相关信息 点击完成后&#xff0c;得到以下目录结构 2.搭建项目目录结构 java目录下 controller&#xff1a;实现控制转发&#xff0c;基本参数校验&#xff0c;不复杂的简单业务处理 config&#x…

SpringBoot实现多数据源(一)【普通版切换】

在实际开发中&#xff0c;经常可能遇到在一个应用中可能需要访问多个数据库的情况。以下是两种典型场景 业务复杂&#xff08;数据量大&#xff09; 数据分布在不同的数据库中&#xff0c;数据库拆了&#xff0c;应用没拆。一个公司多个子项目&#xff0c;各用各的数据库&#…

Springboot——拦截器

目录 一、拦截器概念 二、拦截器的使用 2.1 拦截器的创建&#xff08;preHandle实用性最强&#xff09; 2.2 将拦截器添加到容器当中 三、拦截器参数 3.1 获取请求头 request.getHeader 3.2 Object handler 是什么参数 3.3 ModelAndView modelAndView 3.4 Exception ex 3.…

多重定义的全局符号,链接器会如何链接的情况

多重定义的全局符号&#xff0c;链接器会如何链接的情况实例1&#xff1a;1.规则12.规则13.规则24.规则3实例2总结以下只针对于gcc编译器&#xff0c;而且不同环境&#xff0c;不同编译器的情况可能不同。 假如说有多重定义的全局符号&#xff0c;链接器会如何链接呐&#xff…

[论文评析]AdaptivePose: Human Parts as Adaptive Points,AAAI 2022

AdaptivePose: Human Parts as Adaptive Points文章信息背景AdaptivePose身体表示方法Body RepresentationAdaptivePosePart Perception ModuleEnhanced Center-aware BranchTwo-hop Regression BranchLoss function推理Inference总结References文章信息 论文题目&#xff1a;…