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

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

把小标题放进去即可

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

http://www.lryc.cn/news/310617.html

相关文章:

  • 数字电路三宝:锁存器、寄存器和触发器
  • VLC相关资源及使用方法
  • 4_相机透镜畸变
  • 微信小程序(四十六)登入界面-进阶版
  • CSP-201712-2-游戏
  • 记录SSM项目集成Spring Security 4.X版本 之 加密验证和记住我功能
  • [AutoSar]BSW_Com09 CAN driver 模块FULL(BASIC)CAN、FIFO选择
  • WPF真入门教程30--顺风物流单据管理系统
  • Elasticsearch:向量相似度计算 - 可笑的速度
  • 两数相加的问题
  • 微信小程序的单位
  • 软考通过率真的低吗?
  • 国际视频编解码标准提案下载地址
  • 程序员是如何看待“祖传代码”的?
  • Python爬虫之爬取并下载哔哩哔哩视频
  • python 脚本设置输出颜色
  • 安卓websocket(客服端和服务端写在app端) 案例
  • C++面试宝典第34题:整数反序
  • 微信商城小程序设计
  • 如何合理布局子图--确定MATLAB的subplot子图位置参数
  • 【MySQL】基于Docker搭建MySQL一主二从集群
  • k8s 集群调度,标签,亲和性和反亲和性,污点和容忍,pod启动状态 排错详解
  • Idea 启动报错 failed to create jvm:jvm path url
  • 20款Visual Studio实用插件推荐
  • 基于SpringBoot的在线拍卖系统
  • “互动+消费”时代,借助华为云GaussDB重构新零售中消费逻辑
  • AI大全-通往AGI之路
  • CSS中如何解决 1px 问题?
  • IO 与 NIO
  • YOLOv应用开发与实现