HTML-07.表格标签

news2025/1/23 17:42:00

一、要制作的表格如下 

二、代码如下 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签</title>
    <style>
/* 表格标签:
            场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表
            标签:
            标签                描述                                属性/备注
            <table>     定义表格整体,可以包含多个<tr>        border:规定表格边框的宽度
                                                            width:规定表格的宽度
                                                            border-collapse:表格边框是分开独立的还是合并的,collapse表示合并,separate表示分开 
            <tr>        表格的行,可以包裹多个<td>
            <td>        表格单元格(普通),可以包裹内容       如果是表头单元格,可以替换为<th>
            <th>        表示表头单元格,具有加粗居中效果    
            */
        table {
            border: 1px solid black;    /* 设置表格的外边框为1个像素值,solid为实线,black为黑色 */
            width: 600px;               /* 规定表格的宽度 */
            border-collapse:collapse;     /* 表格内相邻边框是分开独立的还是合并的,collapse表示合并 */
            text-align: center;         /* 元素中的文本的水平对齐方式为居中 */
            vertical-align: middle;         /* 元素中的文本的垂直对齐方式为居中 */
        }
        /* tr {
            border: 1px solid black;   针对每一行的边框
        } */   
        td,th {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>序号 </th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr>
            <td>1 </td>
            <td><img src="img/huawei.jpg" width="100px"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr>
            <td>2 </td>
            <td><img src="img/alibaba.jpg" width="100px"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>
</body>
</html>

 三、表格标签

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

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

相关文章

探索数据结构:二叉搜索树的递归与非递归实现

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;数据结构与算法 贝蒂的主页&#xff1a;Betty’s blog 1. 二叉搜索树的介绍 二插入搜索树&#xff08;Binary Search Tree&…

第16课 Scratch入门篇:师生问候-广播版

师生问候-广播版 故事背景&#xff1a; 上节课我们完成了师生问候功能&#xff0c;指令罗列的蛮多&#xff0c;写起来很麻烦&#xff0c;而且阅读起来不容易理解&#xff0c;这节课我们把上节课内容进行优化&#xff0c;引入一个新的指令-广播&#xff0c;广播相当于一个事件的…

DFS之迭代加深+双向DFS+IDA*

迭代加深&#xff1a; 搜索范围一层一层扩大&#xff0c;可以快速某些分支比较深&#xff0c;但是答案比较浅的问题。 https://www.acwing.com/problem/content/172/ 通过观察可以发现&#xff1a; 1.搜索时最坏情况可能搜到100层&#xff0c;比较深&#xff0c;但是答案应…

【Javax.Validation】✈️整合 SpringBoot 实现运行时的参数校验

目录 &#x1f44b;前言 &#x1f440;一、Validation 依赖 &#x1f4eb;二、常见注解 2.1 不需要指定注解参数 2.2 需要声明注解参数 &#x1f49e;️三、项目测试注解使用 3.1 依赖引入 3.2 实体类创建 3.3 创建对外接口 3.4 模拟请求 &#x1f331;四、章末 &#x1f…

RSS 2024 清华大学交叉院高阳提出高效的机器人操作技能学习方法

机器人掌握一项新技能需要几步&#xff1f; 一般来说&#xff0c;在传统机器学习方法中&#xff0c;通常使用演示学习的方式教会机器人掌握新技能&#xff0c;然而&#xff0c;收集高质量的演示数据成本高且耗时&#xff0c;一定程度上影响了机器人技能学习进度。尽管视频作为…

⭕️【论文阅读】《Interactive Class-Agnostic Object Counting》

[2309.05277] Interactive Class-Agnostic Object Counting (arxiv.org) code&#xff1a; cvlab-stonybrook/ICACount: [ICCV23] Official Pytorch Implementation of Interactive Class-Agnostic Object Counting (github.com) 目录 Abstract Abstract 我们提出了一个新…

linux学习记录(一)--------目录及文件操作

文章目录 前言Linux目录及文件操作1.Linux目录结构2.常用的Linux命令3.vi编辑器的简单使用4.vi的两个模式 前言 小白学习linux记录有错误随时指出~ Linux目录及文件操作 Linux采用Shell命令->操作文件 1.Linux目录结构 根目录&#xff1a;/ 用户目录&#xff1a;~或者/ho…

float转uint8_t数组

float类型在x64中占4字节&#xff0c;需要占据uint8_t数组大小4字节 数据float类型3.14&#xff0c;在内存中4字节地址应该为0x4048f5c3 如果直接使用memcpy内存复制&#xff0c;0xc3会放在数组下标小的位置

〖任务1〗ROS2 jazzy Linux Mint 22 安装教程

前言&#xff1a; 本教程在Linux系统上使用。 目录 一、linux安装二、linux VPN安装三、linux anaconda安装&#xff08;可选&#xff09;四、linux ROS2 安装五、rosdep init/update 解决方法六、安装GUI 一、linux安装 移动硬盘安装linux&#xff1a;[LinuxToGo教程]把ubunt…

代码随想录算法训练营第43天|LeetCode 300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

1. LeetCode 300.最长递增子序列 题目链接&#xff1a;https://leetcode.cn/problems/longest-increasing-subsequence/description/ 文章链接&#xff1a;https://programmercarl.com/0300.最长上升子序列.html 视频链接&#xff1a;https://www.bilibili.com/video/BV1ng411J…

进阶SpringBoot之 Spring 官网或 IDEA 快速构建项目

SpringBoot 就是一个 JavaWeb 的开发框架&#xff0c;约定大于配置 程序 数据结构 算法 微服务架构是把每个功能元素独立出来&#xff0c;再动态组合&#xff0c;是对功能元素的复制 这样做可以节省调用资源&#xff0c;每个功能元素的服务都是一个可替代、可独立升级的软…

从地铁客流讲开来:超一线城市的客运量特征

这篇我们把视角聚焦在四大超一线城市&#xff0c;北上广深&#xff0c;我们来看看这些城市地铁客运量的异同&#xff0c;这里放一个背景2024年6月8日—6月10日是我国农历的端午节&#xff0c;我们看图说话&#xff0c;相同的特征&#xff1a;1.四大一线城市客流都在周五达到客运…

数学建模--蒙特卡罗随机模拟

目录 蒙特卡罗方法的基本原理 蒙特卡罗方法在优化中的应用 蒙特卡罗方法的优势与局限 优势 局限 典型应用案例 Python代码示例 ​编辑 结论 蒙特卡罗方法在数学建模中的具体应用案例有哪些&#xff1f; 如何改进蒙特卡罗方法以提高计算效率和精度&#xff1f; 蒙特…

如何使你的mermaid流程图里的某一段文字加粗、变斜、成为上下标……

目录 参考的链接开头1.加粗&#xff0c;*斜体*与下划线2.标记,~~删除线~~与^上^~下~标3.代码片与标题4.注释与蓝色链接5.其</q>他 东西 结尾 参考的链接 HTML标签列表(按字母排序)和HTML标签列表(按功能排序) 开头 大家好&#xff0c;我叫这是我58。今天&#xff0c;我们…

【架构】客户端优化

这篇文章总结一下服务器网关及之前部分的优化&#xff0c;如客户端的优化&#xff0c;CDN/DNS等。 这里我们先谈一谈客户端缓存优化的手段。一般我们后端在说到缓存&#xff0c;第一时间想到的往往是redis&#xff0c;其实缓存在架构层次还有很多其他可以实现的地方&#xff0…

从LLM到大模型推理的最新进展

大语言模型LLM的推理引擎经过一年时间发展&#xff0c;现在主流方案收敛到了开源的vLLM和半闭源的TensorRT-LLM。 TRT-LLM基于C开发&#xff0c;有NV算子开发黑魔法加持&#xff0c;在其重点支持的场景里&#xff0c;性能可以做到极致。vLLM基于python开发&#xff0c;代码简洁…

MySQL第2讲--关系型数据库以及SQL语句分类之DDL数据库和表的操作

文章目录 前言关系型数据库&#xff08;RDBMS&#xff09;关系型数据库的特点 MySQL数据模型SQL介绍基本语法规则SQL语句的分类DDL的介绍DDL的数据库操作DDL的表操作 前言 上一节MySQL第1讲–详细安装教程和启动方法中介绍了MySQL如何安装&#xff0c;以及如何启动和客户端连接…

使用 Elastic 和 Mistral 构建多语言 RAG

作者&#xff1a;来自 Elastic Gustavo Llermaly 使用 Elastic 和 Mixtral 8x22B 模型构建多语言 RAG 应用程序。 Mixtral 8x22B 是性能最高的开放式模型&#xff0c;其最强大的功能之一是能够流利使用多种语言&#xff1b;包括英语、西班牙语、法语、意大利语和德语。 想象一…

质量属性-系统架构师(四十)

质量属性 1性能&#xff1a; 指系统响应能力。如响应时间、吞吐量。 设计策略&#xff1a;优先级队列&#xff0c;增加计算机资源&#xff0c;减少计算机开销&#xff0c;引入并发机制&#xff0c;采用资源调度。 2可靠性&#xff1a; 在一定时间内正常运行的情况下&#x…

PTA—基础编程题目集(7-21)

7-21 求特殊方程的正整数解 目录 题目描述 输入格式&#xff1a; 输出格式&#xff1a; 输入样例1&#xff1a; 输出样例1&#xff1a; 输入样例2&#xff1a; 输出样例2&#xff1a; 参考代码 总结 题目描述 本题要求对任意给定的正整数N&#xff0c;求方程X2Y2N的…