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

目录

表格介绍

表格标签

 表格标签的常见属性

案例

 知识点总结


表格介绍

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

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

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

表格标签

<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>

把小标题放进去即可

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 刷题 [C++] 第121题.买卖股票的最佳时机

题目描述 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票&#xff0c;并选择在 未来的某一个不同的日子 卖出该股票。设计一个算法来计算你所能获取的最大利润。 返回你可以从这笔交易中获取的…

SpringBoot+Maven多环境配置模式

我这里有两个配置文件 然后在最外层的父级POM文件里面把这个两个配置文件写上 <profiles><profile><id>druid</id><properties><spring.profiles.active>druid</spring.profiles.active></properties><activation><…

Linux多线程控制:深入理解与应用(万字详解!)

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;どうして (feat. 野田愛実) 0:44━━━━━━️&#x1f49f;──────── 3:01 &#x1f504; ◀️ ⏸ ▶️ …

Facebook的数字治理挑战:社交平台的未来模式

在当今数字化时代&#xff0c;社交媒体平台已经成为人们日常生活的重要组成部分&#xff0c;而Facebook作为其中最具代表性的平台之一&#xff0c;其承载的社交功能和影响力已经不可小觑。然而&#xff0c;随着社交媒体的普及和发展&#xff0c;一系列数字治理挑战也随之而来&a…

LeetCode每日一题之 移动0

前言&#xff1a; 我的每日一题专栏正式开始更新&#xff0c;我会分享关于我在LeetCode上刷题时的经验&#xff0c;将经典题型拿出来详细讲解&#xff0c;来提升自己及大家的算法能力&#xff0c;希望这篇博客对大家有帮助。 题目介绍&#xff1a; 题目链接&#xff1a;. - …

23端口登录的Telnet命令+传输协议FTP命令

一、23端口登录的Telnet命令 Telnet是传输控制协议/互联网协议&#xff08;TCP/IP&#xff09;网络&#xff08;如Internet&#xff09;的登录和仿真程序&#xff0c;主要用于Internet会话。基本功能是允许用户登录进入远程主机程序。 常用的Telnet命令 Telnet命令的格式为&…

图文详解:在虚拟机上安装Win7,超详细!!!

一.准备 1.虚拟机&#xff1a; https://pan.xunlei.com/s/VNpZ_9c2AdrnUW1YWNdhBLW-A1?pwdyp6b# 2.win7的iOS&#xff1a; https://pan.xunlei.com/s/VNpZd61K6a7cDG3YkI_3oVbUA1?pwdyrfp# 二.安装配置 三.配置Win7 1.记得输入原先下载的镜像文件 2.那我们选择自定义 3…

亚信安慧AntDB:打破数据孤岛,实现实时处理

AntDB数据库以其独特的创新能力在分布式数据库领域引领潮流。其中&#xff0c;融合统一与实时处理是其两大核心创新能力&#xff0c;为其赢得广泛关注与赞誉。融合统一意味着AntDB能够将多种不同类型的数据库融合为一体&#xff0c;实现数据的统一管理与处理&#xff0c;极大地…

3.3作业

1、图片拷贝 #include <stdio.h> #include <sys/types.h> #include <unistd.h> #include <stdlib.h> #include <pthread.h> #include <sys/stat.h> #include <fcntl.h>typedef struct xccpy {int num;off_t size;int fd_r;int fd_w…

CSS锥形渐变:conic-gradient()

画一个扇形图&#xff0c;使用常规方法可能很难画&#xff0c;但是用锥形渐变的话非常好画 <style>.pattern{width: 100px; height: 100px;border-radius: 50%;background: conic-gradient(yellow 30deg , black 30deg , black 90deg , yellow 90deg ,yellow 150d…

MongoDB 使用教程

座右铭&#xff1a;怎么简单怎么来&#xff0c;以实现功能为主。 欢迎大家关注公众号与我交流 使用方法&#xff1a; 1、MongoDB 帮助 ------- db.help() 2、Mongodb 统计信息 ------ db.stats() 刚安装上的MongoDB &#xff0c;默认默认的数据库为test&#xff0c;这个时候…

两天学会微服务网关Gateway-Gateway工作原理

锋哥原创的微服务网关Gateway视频教程&#xff1a; Gateway微服务网关视频教程&#xff08;无废话版&#xff09;_哔哩哔哩_bilibiliGateway微服务网关视频教程&#xff08;无废话版&#xff09;共计17条视频&#xff0c;包括&#xff1a;1_Gateway简介、2_Gateway工作原理、3…

uniapp 微信小程序使用高德地图Vue3不兼容Vue2问题

1. uniapp 微信小程序使用高德地图Vue3不兼容Vue2问题 1.1. 问题 uniapp Vue3项目引用高德地图报错 import amapPlugin from ‘…/…/…/js_sdk/js_amap/amap-wx.130’; "default" is not exported by "../../../MyProject/Base/Szy/js_sdk/js_amap/amap-wx.1…

3.2日-线性模型,基础优化方法,线性回归从零开始实现

3.2日-线性模型&#xff0c;基础优化方法&#xff0c;线性回归从零开始实现 1线性模型衡量预估质量训练数据总结2基础优化方法3 线性回归从零开始实现 1线性模型 衡量预估质量 训练数据 总结 2基础优化方法 梯度下降是一种优化算法&#xff0c;常用于机器学习和深度学习中&…

#WEB前端(浮动与定位)

1.实验&#xff1a; 2.IDE&#xff1a;VSCODE 3.记录&#xff1a; float、position 没有应用浮动前 应用左浮动和右浮动后 应用定位 4.代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><me…

基于ZYNQ的PCIE高速数据采集卡的设计(一)

作为信息处理的第一步&#xff0c;数据采集的作用越来越重要。目前&#xff0c;数据采集已经在航 空、民用、军事、医疗等领域得到广泛应用。随着相关技术的不断发展&#xff0c;信号频率越 来高&#xff0c;带宽越来越大&#xff0c;使得数据采集技术逐渐向高速大数据的方向…

位运算---求n的二进制表示中第k位是1还是0 (lowbit)

操作&#xff1a; 先把第k位移到最后一位&#xff08;右边第一位&#xff09; 看个位是1还是0 lowbit(x)&#xff1a;返回x的最右边的1。 原理&#xff1a; 其中 &#xff0c;意思是 是 的补码。 就可以求出最右边的一位1。 应用&#xff1a; 当中 的个数。 int re…

【创作回顾】17个月峥嵘创作史

#里程碑专区#、#创作者纪念日# 还记得 2022 年 10 月 05 日&#xff0c;我在CSDN撰写了第 1 篇博客——《关于测试工程师瓶颈和突围的一个思考》&#xff0c;也是我在全网发布的第一篇技术文章。 回想当时&#xff0c;这一篇的诞生过程并不轻松&#xff0c;不像是一篇网络文章…

昇腾ACL应用开发之硬件编解码dvpp

1.前言 在我们进行实际的应用开发时&#xff0c;都会随着对一款产品或者AI芯片的了解加深&#xff0c;大家都会想到有什么可以加速预处理啊或者后处理的手段&#xff1f;常见的不同厂家对于应用开发的时候&#xff0c;都会提供一个硬件解码和硬件编码的能力&#xff0c;这也是抛…

JetBrains Gateway Github Copilot 客户端插件和主机插件

JetBrains Gateway可以通过插件支持Github Copilot&#xff08;需另行注册&#xff09;。 需要安装插件 客户端&#xff0c;而非插件 主机&#xff0c;如图所示&#xff1a; 大概是因为代码显示在客户端&#xff08;运行在本地的IDE&#xff09;&#xff1f;