【HTML】HTML基础6.1(表格以及常见属性)

news2024/12/21 11:14:07

目录

表格介绍

表格标签

 表格标签的常见属性

案例

 知识点总结


表格介绍

在浏览器中,我们经常见到形如

这样的表格形式,一般来说,表格是为了让数据看起来更加清晰,增强数据的可读性

有的程序员也会用表格进行排版

表格标签

<table>
<!--表格标签-->

<tr> <td></td> </tr>
<!-- tr指的是行,td指的是每行的单元格 -->
 
</table>

 表格标签的常见属性

属性属性值描述
alignleft、center、right表格在浏览页面的位置
border1 或者 无默认为无,表示边框
cellpadding像素值(就是具体数字)单元格边缘与内容间的空白,默认为1
cellspacing像素值(就是具体数字)单元格边缘与内容间的空白,默认为2
width宽度值表格宽度

案例

一个略显粗糙的统计表

实现代码

<table align="center" border="5" cellpadding="5" with="500">
			<tr><th>获奖名称</th> <th>获奖方</th> <th>备注</th></tr>
			<tr><td><a href="https://www.baidu.com/s?wd=%E7%AC%AC30%E5%B1%8A%E7%BE%8E%E5%9B%BD%E6%BC%94%E5%91%98%E5%B7%A5%E4%BC%9A%E5%A5%96&tn=15007414_10_pg">第30届美国演员工会奖</a></td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td>2024年人民选择奖</td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td>第77届英国电影学院奖</td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td><a href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&tn=15007414_10_pg&wd=%E7%AC%AC51%E5%B1%8A%E7%BE%8E%E5%9B%BD%E5%8A%A8%E7%94%BB%E5%AE%89%E5%A6%AE%E5%A5%96&oq=%25E7%25AC%25AC51%25E5%25B1%258A%25E7%25BE%258E%25E5%259B%25BD%25E5%25AE%2589%25E5%25A6%25AE&rsv_pq=c05666680131a1c3&rsv_t=a9dao5Nvg%2FiM7UBeP2Sye1vRaRamaMWba3n54mpl27t1OdHWzr1Ws92ZPZ1n6dTb0P44LhA&rqlang=cn&rsv_dl=ts_0&rsv_enter=1&rsv_sug1=18&rsv_sug7=100&rsv_sug3=23&rsv_sug2=1&rsv_btype=t&prefixsug=%25E7%25AC%25AC51%25E5%25B1%258A%25E7%25BE%258E%25E5%259B%25BD%25E5%258A%25A8%25E7%2594%25BB%25E5%25AE%2589%25E5%25A6%25AE&rsp=0&inputT=35571&rsv_sug4=36356">第51届美国动画安妮奖</a></td> <td>银河护卫队</td> <td>提名</td></tr>
			<tr><td>第19届中美电影节、中美电视节</td> <td>银河护卫队 <td>获奖</td></td></tr>
		</table>

 知识点总结

该表格用到的知识点有

①标签属性:align(center使得它居中)

②单元格中可以插入多种类型的数据,比如链接

③边框属性border可以通过调节数字实现粗细大小的设置

④开头的一排加粗居中是因为运用到了th标签

<th></th>

把小标题放进去即可

今天的分享到这里就结束啦~~希望能帮到您! 

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

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

相关文章

(UE4升级UE5)Selected Level Actor节点升级到UE5

本问所用工具为&#xff1a; UE5 UE4 插件AssetDeveTool包含&#xff1a;快速选择功能自动化批量LOD功能自动化批量展UV功能自动化批量减面功能自动化批量修改查找替换材质功能批量重命名工具碰撞器修改工具资源整理工具支持4.26 - 5.3版本https://mbd.pub/o/bread/mbd-ZZubkp…

ControlNet作者新作LayerDiffusion,让SD直接生成生成透明图像,堪比商用抠图软件

ControlNet作者又出新工作&#xff0c;这次的工作LayerDiffusion它使得大规模预训练的Stable Diffusion能够生成透明图像。该方法允许生成单个透明图像或多个透明图层&#xff0c;效果堪比商业产品Adobe Stock。而且LayerDiffusion和ControlNet一样支持基于SD微调的模型。 &quo…

Flutter的线程模型

在Flutter框架中&#xff0c;Embedder层负责把Flutter嵌入到各个平台上去&#xff0c;其所做的主要工作包括线程设置、渲染Surface设置&#xff0c;以及插件等。因此&#xff0c; Embedder负责线程的创建和管理&#xff0c;并且提供Task Runner给Engine使用。Engine则是负责提供…

钉钉h5应用 环境报错Error: Do not support the current environment:notInDingTalk

钉钉h5应用 环境报错 Error: Do not support the current environment&#xff1a;notInDingTalk problem Error: Do not support the current environment&#xff1a;notInDingTalk reason 前端页面运行在普通浏览器 solution 需要将h5页面在后台发布后&#xff0c;在钉…

Java中的日期时间类详解(建议收藏)!!!

Java中的日期时间类详解 1. LocalDate、LocalTime和LocalDateTime2. DateTimeFormatter3. 日期时间计算和比较4. **时区和日历**&#xff1a; 总结 本文详细解释了Java提供了 java.time 包来处理日期和时间的方式。 1. LocalDate、LocalTime和LocalDateTime LocalDate &#…

【HarmonyOS】鸿蒙开发之Stage模型-UIAbility的启动模式——第4.4章

UIAbi lity的启动模式简介 一共有四种:singleton,standard,specified,multion。在项目目录的:src/main/module.json5。默认开启模式为singleton(单例模式)。如下图 singleton&#xff08;单实例模式&#xff09;启动模式 每个UIAbility只存在唯一实例。任务列表中只会存在一…

【EI会议征稿通知】第四届控制与智能机器人国际学术会议(ICCIR 2024)

第四届控制与智能机器人国际学术会议&#xff08;ICCIR 2024&#xff09; 2024 4th International Conference on Control and Intelligent Robotics 第四届控制与智能机器人国际学术会议&#xff08;ICCIR 2024&#xff09;由华南理工大学自动化科学与工程学院主办&#xff…

【Android移动开发】helloworld项目文件剖析

本文讨论了一个Android应用的Gradle项目的各个方面。涵盖了Gradle的启动脚本&#xff0c;项目的配置文件&#xff08;如build.gradle和gradle.properties&#xff09;&#xff0c;以及应用的源代码和资源文件。具体内容包括了项目结构、Gradle插件的配置、AndroidManifest.xml文…

SSM框架,SpringMVC框架的学习(上)

SpringMVC介绍 Spring Web MVC是基于Servlet API构建的原始Web框架&#xff0c;从一开始就包含在Spring Framework中。正式名称“Spring Web MVC”来自其源模块的名称&#xff08; spring-webmvc &#xff09;&#xff0c;但它通常被称为“Spring MVC”。 SpringMVC涉及组件 …

复合式统计图绘制方法(3)

复合式统计图绘制方法&#xff08;3&#xff09; 常用的统计图有条形图、柱形图、折线图、曲线图、饼图、环形图、扇形图。 前几类图比较容易绘制&#xff0c;饼图环形图绘制较难。 在统计图的应用方面&#xff0c;有时候有两个关联的统计学的样本值要用统计图来表达&#xff0…

Python电能质量扰动信号分类(六)基于扰动信号特征提取的超强机器学习识别模型

目录 往期精彩内容&#xff1a; 前言 1 数据集和特征提取 1.1 数据集导入 1.2 扰动信号特征提取 2超强模型XGBoost——原理介绍 2.1 原理介绍 2.2 特征数据集制作 3 模型评估和对比 3.1 随机森林分类模型 3.2 支持向量机SVM分类模型 3.3 XGBoost分类模型 代码、数据…

windows7怎么改ip地址?win7设置ip地址的步骤

随着网络的普及和技术的不断发展&#xff0c;IP地址对于计算机用户来说&#xff0c;已经不再是一个陌生的概念。在Windows 7操作系统中&#xff0c;根据网络环境和个人需求&#xff0c;有时我们需要手动修改IP地址。本文旨在向读者介绍如何在Windows 7系统中修改IP地址&#xf…

Redis常用指令,jedis与持久化

1.redis常用指令 第一个是key的常用指令&#xff0c;第二个是数据库的常用指令 前面的那些指令都是针对某一个数据类型操作的&#xff0c;现在的都是对所有的操作的 1.key常用指令 key应该设计哪些操作 key是一个字符串&#xff0c;通过key获取redis中保存的数据 对于key…

keil 中使用了cks32F103C8T6的芯片如何安装pack

首先是本来想使用stm32的芯片&#xff0c;结果商家给发过来的无法写入&#xff0c;一查是因为商家把cks的芯片给磨皮了&#xff0c;冒充stm来卖 那就花点时间来研究一下这个cks怎么在keil中写入 好不容易找到一个下载包 Keil.CS32F1xx_DFP.pack 【免费】中科芯CKSF103的PACK…

网络安全: Kali Linux 使用 hping3 阻塞目标主机

目录 一、实验 1.环境 2. 物理机测试远程连接 Windows server 3.Kali Linux 使⽤ hping3 ⼯具 二、问题 1. 常见的 DoS ⽅式有哪些 2.hping3 测试⼯具的命令格式和选项参数 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统版本IP备注Kali Linux2024.…

Python实现向量自回归移动平均模型(VARMA算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 向量自回归移动平均模型&#xff08;Vector Autoregressive Moving Average, VARMA&#xff09;是一种…

在 Rust 中实现 TCP : 2.解析原始字节

解析原始字节 现在已经设置了虚拟网络接口并且它接收了数据位&#xff0c;实现 TCP 之旅的下一步是从接收到的数据字节中解析出数据包。默认情况下&#xff0c;除了从虚拟网络接口发送和接收的数据包之外&#xff0c;还会在数据包前面附加 4 个字节的数据。 Tun/TAP documenta…

Flutter混合栈管理方案对比

1.Google官方&#xff08;多引擎方案&#xff09; Google官方建议的方式是多引擎方案&#xff0c;即每次使用一个新的FlutterEngine来渲染Widget树&#xff0c;存在的主要问题是每个引擎都要有比较大的内存等资源消耗&#xff0c;虽然Flutter 2.0之后的FlutterEngineGroup通过在…

AI学习集合-前瞻

AI学习前瞻 工作岗位 算法工程师机器学习工程师图像算法工程师ai工程师NLP高级算法工程师 学习路线 应用场景 计算机视觉技术应用场景 自然语言应用 AI流程 AI拟人流程 机器人历史数据经验模型规律依据模型预测未来依据规律做出判断 AI基本流程 术语所用到的技术手段数据数…

收藏4款免费又好用的甘特图软件

zz-plan zz-plan&#xff08;https://zz-plan.com/&#xff09; 是一款基于甘特图的项目管理协作软件。无论项目大小、简单复杂都能轻松管理。任务、进度、工时、资源、周期、依赖关系都能一目了然。支持私有化部署&#xff0c;可完全控制、灵活定制、确保数据安全&#xff0c…