当前位置: 首页 > news >正文

表格标记<table>

一.表格标记、

1table:表格标记

2.caption:表单标题标记

3.tr:表格行标记

4.td:表格中数据单元格标记

5.th:标题单元格

table标记是表格中最外层标记,tr表示表格中的行标记,一对<tr>表示表格中的一行,在<tr>中可以嵌套几对<th>标记或几对<td>标记

 属性:

        width:设置表格或者单元格的宽度

        height:设置表格或者单元格的高度

        align:设置表格或者单元格中,文字水平对齐方式

        valign:设置单元格垂直对齐方式,可取top bottom middle baseline

        border:设置边框的值,默认为0,表示不可见

        bgcolor:背景颜色

        background:背景图片

    <!-- 属性:width:设置表格或者单元格的宽度height:设置表格或者单元格的高度align:设置表格或者单元格中,文字水平对齐方式valign:设置单元格垂直对齐方式,可取top bottom middle baseline border:设置边框的值,默认为0,表示不可见bgcolor:背景颜色background:背景图片 --><table align="center" border="4" width="300px" height="400px" bgcolor="yellow" ><caption>表格</caption><tr valign="top"><th>标题1</th><th>标题1</th></tr><!-- valign:这个属性只能放在tr td th标记中 --><tr valign="middle"><td >单元格1</td><td>单元格2</td></tr><tr valign="bottom"><td>单元格3</td><td>单元格4</td></tr></table>

留下一个小作业,这个用表格怎么写呢?

 这里直接贴上代码了哦

    <hr><table border="3" align="center" width="500px" bgcolor="yellow"><caption>个人简历表</caption><tr bgcolor="blue"><th>姓名</th><th>年龄</th><th>籍贯</th></tr><tr bgcolor="green"><td>东方翱翔</td><td>不告诉你</td><td>我也不告诉你</td></tr></table>

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 属性:width:设置表格或者单元格的宽度height:设置表格或者单元格的高度align:设置表格或者单元格中,文字水平对齐方式valign:设置单元格垂直对齐方式,可取top bottom middle baseline border:设置边框的值,默认为0,表示不可见bgcolor:背景颜色background:背景图片 --><table align="center" border="4" width="300px" height="400px" bgcolor="yellow" ><caption>表格</caption><tr valign="top"><th>标题1</th><th>标题1</th></tr><!-- valign:这个属性只能放在tr td th标记中 --><tr valign="middle"><td >单元格1</td><td>单元格2</td></tr><tr valign="bottom"><td>单元格3</td><td>单元格4</td></tr></table><hr><table border="3" align="center" width="500px" bgcolor="yellow"><caption>个人简历表</caption><tr bgcolor="blue"><th>姓名</th><th>年龄</th><th>籍贯</th></tr><tr bgcolor="green"><td>东方翱翔</td><td>不告诉你</td><td>我也不告诉你</td></tr></table></body></html>

效果

相关文章:

表格标记<table>

一.表格标记、 1table&#xff1a;表格标记 2.caption:表单标题标记 3.tr:表格行标记 4.td:表格中数据单元格标记 5.th:标题单元格 table标记是表格中最外层标记&#xff0c;tr表示表格中的行标记&#xff0c;一对<tr>表示表格中的一行&#xff0c;在<tr>中可…...

Rust练手项目,写个有趣的小工具定时从一言网获取一段有趣的话并推送通知

Rust练手项目&#xff0c;写个有趣的小工具 代码 继续练习Rust, 写个小工具定时从一言网获取一段有趣的话并提示&#xff0c;如下 练习以下Rust点 并发编程 Mutex, Arc指针使用HTTP请求Windows Gui 代码 Cargo.toml [package] name "funny_word" edition "20…...

【隐私计算】Paillier半同态加密算法

一、何为同态加密&#xff08;HE&#xff09;&#xff1f; HE是一种特殊的加密方法&#xff0c;它允许直接对加密数据执行计算&#xff0c;如加法和乘法&#xff0c;而计算过程不会泄露原文的任何信息。计算的结果仍然是加密的&#xff0c;拥有密钥的用户对处理过的密文数据进…...

判断数字的奇偶[中秋快乐~]

题目描述 给定一个整数 n,编写程序判断数字 n 是奇数还是偶数&#xff0c;是奇数则输出 “odd”&#xff0c;偶数则输出 “even”。 输入格式 一行&#xff0c;一个整数 n。 输出格式 一行&#xff0c;如果 n 是奇数则输出 “odd”; 如果 nn 是偶数则输出 “even”。 样例…...

文件操作及重定向详解

1、linux下一切皆文件: 在linux中,一切皆文件是一个重要的概念,用于描述linux操作系统中所有资源和设备都以文件的形式进行访问和处理。 这个概念可以理解为,无论是硬盘上的文件、网卡、设备、进程等,都被抽象为文件的形式存在。在linux系统中,通…...

鸿蒙next json解析 ArkUI 带你玩转 arkts json解析

前言导读 相信很多同学再开发过程中都会遇到json解析的处理&#xff0c;不管是跟服务端交互 或者是读取本地的json 都会遇到json解析 那么正好今天有空正好讲一下鸿蒙next里面的json解析 JSON解析与生成 本模块提供了将JSON文本转换为JSON对应对象或值&#xff0c;以及将对象…...

东土科技加码芯片业务投资,携手神经元共建新型工业生态

为抢抓国产化芯片发展的重大机遇&#xff0c;东土科技决定进一步加大对神经元信息技术&#xff08;成都&#xff09;有限公司的投资。这一战略布局有利于东土科技鸿道Intewell工业操作系统与神经元公司芯片的深度协同&#xff0c;推动实现“信息技术、网络技术、控制技术、数字…...

指纹与指甲检测系统源码分享

指纹与指甲检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…...

C++3D迷宫

目录 开头程序程序的流程图程序游玩的效果下一篇博客要说的东西 开头 大家好&#xff0c;我叫这是我58。 程序 #include <iostream> using namespace std; void printmaze(char strmaze[5][5][5]) {cout << "-----" << endl;int i 0;int ia 0…...

跨界融合,GIS如何赋能游戏商业——以《黑神话:悟空》为例

在数字化时代&#xff0c;地理信息系统&#xff08;GIS&#xff09;技术正以其独特的空间分析和可视化能力&#xff0c;为游戏产业带来革命性的变革。《黑神话&#xff1a;悟空》作为中国首款3A级别的动作角色扮演游戏&#xff0c;不仅在游戏设计和技术上取得了突破&#xff0c…...

【计网】从零开始使用TCP进行socket编程 --- 客户端与服务端的通信实现

阵雨后放晴的天空中&#xff0c; 出现的彩虹很快便会消失。 而人心中的彩虹却永不会消失。 --- 太宰治 《斜阳》--- 从零开始使用TCP进行socket编程 1 TCP与UDP2 TCP服务器类2.1 TCP基础知识2.2 整体框架设计2.3 初始化接口2.4 循环接收接口与服务接口 3 服务端与客户端测试…...

Imagen:重塑图像生成领域的革命性突破

目录 引言 一、Imagen模型的技术原理 1. 模型概述 2. 工作流程 3. 技术创新 二、Imagen模型的应用实例 1. 创意设计 2. 虚拟角色制作 3. 概念可视化 三、Imagen模型的优势与挑战 1. 优势 2. 挑战 四、Imagen模型的未来发展方向 1. 图像生成质量的提升 2. 多模态…...

Golang | Leetcode Golang题解之第402题移掉K位数字

题目&#xff1a; 题解&#xff1a; func removeKdigits(num string, k int) string {stack : []byte{}for i : range num {digit : num[i]for k > 0 && len(stack) > 0 && digit < stack[len(stack)-1] {stack stack[:len(stack)-1]k--}stack app…...

c++ gtsam/inference/Symbol.h 详细介绍

gtsam/inference/Symbol.h 是 GTSAM 库中的一个头文件&#xff0c;定义了 Symbol 类。这个类用于在因子图优化中标识和管理变量。Symbol 提供了一种便捷的方式来创建和使用唯一标识符&#xff0c;从而避免手动管理复杂的整数键。 Symbol 类详细介绍 Symbol 类是 GTSAM 中用于…...

apache文件共享和访问控制

实现apache文件共享 文件共享路径 <Directory "/var/www/html"> #默认发布路径&#xff0c;功能限制 Options Indexes FollowSymLinks #indexes支持文件共享功能 AllowOverride None Require all granted </Directory> 进入到该路径下 cd…...

LeetCode 2398.预算内的最多机器人数目:滑动窗口+单调队列——思路清晰的一篇题解

【LetMeFly】2398.预算内的最多机器人数目&#xff1a;滑动窗口单调队列——思路清晰的一篇题解 力扣题目链接&#xff1a;https://leetcode.cn/problems/maximum-number-of-robots-within-budget/ 你有 n 个机器人&#xff0c;给你两个下标从 0 开始的整数数组 chargeTimes …...

vue 在线预览word和excel

yarn add vue-office/excel vue-office/docx <template><div><vue-office-docx:src"docx"style"height: 100%; margin: 0; padding: 0"rendered"rendered"/></div> </template><script> //引入VueOfficeDoc…...

物联网智能项目

物联网智能项目是一个涉及多个领域和技术的综合性项目&#xff0c;旨在通过互联网将各种物理设备连接起来&#xff0c;实现数据的采集、传输、处理和分析&#xff0c;进而实现智能化控制和管理。以下是对物联网智能项目的详细阐述&#xff0c;包括其定义、关键技术、应用领域、…...

828华为云征文|Flexus云服务器X:Python安装的极致便捷之旅

目录 前言 一、Flexus云服务器X介绍 1.1 Flexus云服务器X实例简介 1.2 Flexus云服务器X实例特点 1.3 Flexus云服务器X实例场景需求 二、Flexus云服务器X购买 2.1 Flexus X实例购买 2.2 重置密码 2.3 登录服务器 三、Flexus云服务器X安装Python 3.1 Python下载 3.2 Python安装 3…...

Midjourney中秋特典-12张图附魔咒

第一张 魔咒 A Mid-Autumn Festival poster, a round bright moon, a Chinese-style pavilion with a scene of a reunion from Dream of the Red Chamber, a new Chinese style --ar 3:4 --v 6.1第二张 魔咒 The bright full moon hung in the night sky,clear in outline a…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...