前端table表格的用法

article/2025/4/25 2:18:58

文章目录

  • 一、table的基础用法
  • 二、table属性
  • 三、合并单元格
  • 拓展
  • 总结


一、table的基础用法

代码如下:

<table><tr>//第一行<td>第一行第1列</td><td>第一行第2列</td></tr><tr>//第二行<td>第二行第1列</td><td>第二行第2列</td></tr>
</table>

html效果:

第一行第1列第一行第2列
第二行第1列第二行第2列

二、table属性

border="表格的边框值"
bordercolor="边框的颜色"width="宽度"
height="高度"cellspacing="单元格与单元格之间的距离"
cellpadding="单元格与内容之间的距离" 水平对齐 align="left/center/right"(左对齐/居中/右对齐) 
垂直对齐 valign="top/middle/bottom"(上对齐/居中/下对齐)

三、合并单元格

合并单元格属性

合并行:rowspan="所要合并的单元格的行数"
合并列:colspan="所要合并的单元格的列数"注:跨行合并的都是合并行,不跨行合并的都是合并列; 要点:(合并行-从上往下推,合并列从左往右推,最后注释掉多余的部分)

代码如下:

<body><h4>合并列</h4><table border="1" width="500" height="100" cellspacing="0"><tr><td></td><td></td></tr><tr><td colspan="2"></td><!--<td></td>--></tr></table><h4>合并行</h4><table border="1" width="500" height="100" cellspacing="0"><tr><td rowspan="2"></td><td></td></tr><tr><td></td><!--<td></td>--></tr></table>
</body>

html效果:

合并列

合并行

此处部分效果并未完全显示 编辑器里面代码最终效果如下

在这里插入图片描述

拓展

拓展1:table制作课程表案例
拓展2:table制作项目增补表案例

总结

以上是对table表格的小总结,后期将继续更新html基础知识点
文章为原创内容,要是遇到有不合适的地方欢迎赐教🙌


http://chatgpt.dhexx.cn/article/RNclrtUp.shtml

相关文章

HTML table表格详解

一、表格属性 表格属性 用法 border 代表表格边框厚度 width height 表格宽高 align table tr td 设置水平方向对齐方式 默认值left center right cellspacing 单元格到单元格距离 cellpadding 单元格文字到单元格边框距离 bgcolor 表格背景颜色 table tr td 都可以…

element-ui实现table表格的嵌套(table表格嵌套)功能实现

最近在做电商类型的官网&#xff0c;希望实现的布局如下&#xff1a;有表头和表身&#xff0c;所以我首先想到的就是table表格组件。 表格组件中常见的就是&#xff1a;标题和内容一一对应&#xff1a; 像效果图中的效果&#xff0c;只用基础的表格布局是不行的&#xff0c;因…

table表格

在HTML中&#xff0c;创建表格需要使用table标签 学习table之前&#xff0c;先了解下table标签的常用属性 属性值说明align left center right 规定标的的对齐方式&#xff0c;left左对齐&#xff0c;center居中&#xff0c;right右对齐&#xff1b;bgcolor rgb(x,x,x) #xxx…

table(表格)的简单介绍

table&#xff08;表格&#xff09;的创建 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><table border"1" width"500" height"300" bgcolor…

table表格详细介绍

表格标签 table 我们在浏览网页时经常能发现段落、列表、图片等等元素出现比较多&#xff0c;但偶尔呢&#xff0c;也会看到一些表格元素&#xff0c;那么表格在代码中如何实现呢&#xff1f; 一个完整的表格应该是由table、thead、tbody、tfoot、tr、th、td组成。那么这么多…

table表格基础知识及简单运用

1.什么是table表格 在HTML中我们用< table >标签来定义表格&#xff0c;它和Excel表格类似&#xff0c;都包括行、列、单元格、表头等&#xff0c;但是在功能方面HTML的表格远不如Excel强大。 2.table的常用属性 margin&#xff1a;主要设置表格的外边框padding&#…

HTML中Table表格的使用与漂亮的表格模板

1、表格标记 表格是网页中十分重要的组成元素。表格用来存储数据&#xff0c;包含标题、表头、行和单元格。在HTML语言中&#xff0c;表格标记使用符号<table>表示。定义表格光使用<table>是不够的&#xff0c;还需要定义表格中的行、列、标题等内容。 标记说明表…

西方世界的劫难Ⅳ:真神的国度--十大支线攻略

西方世界的劫难&#xff0c;是在大一即将放暑假的前几天&#xff0c;两位大佬带我打的(犹记当时一个三射箭抢了全部的兵&#xff0c;偷笑)&#xff0c;几经挫折&#xff0c;加上一些前辈的经验&#xff0c;自己也算是真正意义上稍微理解了这个地图&#xff0c;于是记录一下西方…

如何评价伊隆·马斯克创办的脑机接口公司 Neuralink ?

作者&#xff1a;李明骏 链接&#xff1a;https://www.zhihu.com/question/57713553/answer/154395266 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 以此为引&#xff0c;从定义和原理出发谈谈脑机接口的商业发展…

第一视角:深度学习框架这几年

‍‍‍‍‍‍‍‍ 作者 | Peter潘欣 转自 | 夕小瑶的卖萌屋 和深度学习框架打交道已有多年时间。从Google的TensorFlow, 到百度的PaddlePaddle&#xff0c;再到现在腾讯的无量。很庆幸在AI技术爆发的这些年横跨中美几家公司&#xff0c;站在一个比较好的视角看着世界发生巨大的…

挠场的科学丨五、二十一世纪的挠力文明

摘自李嗣涔教授《挠场的科学》 十九世纪末&#xff0c;特斯拉发明多相交流马达&#xff0c; 促成了二十世纪电力文明的开展&#xff0c; 他也提出几项当时认为科幻的创新概念。 这些基于挠场作用的概念&#xff0c; 及挠场侦测器的发明&#xff0c; 将会在二十一世纪促成挠…

带你快速看完9.8分神作《Effective Java》—— 序列化篇(所有RPC框架的基石)

&#x1f525; Java学习&#xff1a;Java从入门到精通总结 &#x1f525; Spring系列推荐&#xff1a;Spring源码解析 &#x1f4c6; 最近更新&#xff1a;2022年1月20日 &#x1f34a; 个人简介&#xff1a;通信工程本硕&#x1f4aa;、阿里新晋猿同学&#x1f315;。我的故…

青岛黄海学院《燃情世界杯》

《燃情世界杯》发行海报 “真的被抢了。虽然来之前就做过很多思想准备&#xff0c;但没想到那么快。刚才在亚历山大贫民区&#xff0c;一伙人突然拔出两把枪,青岛黄海学院&#xff0c;顶着我们录音师的肚子和大腿&#xff0c;一瞬间就抢了他手机&#xff0c;然后飞速逃跑。”北…

“香港女车神”李慧诗场地自行车世界杯香港站连夺两金纪录

1月27日&#xff0c;场地单车世界杯香港站赛事举行。中国香港队主将李慧诗(中)在女子凯琳赛中夺金。图为颁奖礼现场。中新社记者 麦尚旻 摄 中新社香港1月27日电 (香企容)场地自行车世界杯香港站27日在香港举行。“港队王牌女将”李慧诗在凯琳赛上再夺一金&#xff0c;累计26日…

纯CSS写个绿荫足球场,为世界杯喝彩

​ 那要写出这样一个界面,首先了解一下球场结构,如图,具体比例就不坐详细说明了自行百度. ​ 颜色上白线绿地没啥问题,发球弧和角球线通过父级的覆盖可以做到部分弧线效果. 先看一下整体效果: 具体地: 1 )场地外围我们使用混合色: background: radial-gradient(sandybrown,…

历届世界杯冠军

1930年7月13日&#xff0c;第一届世界足球锦标赛&#xff08;后称世界杯赛&#xff09;&#xff0c;在乌拉圭首都蒙得维的亚的“百周年纪念”体育场&#xff08;1930年正值乌拉圭独立一百周年&#xff0c;由此得名&#xff09;隆重开幕。玻利维亚、巴西、智利、墨西哥、巴拉圭、…

世界杯看不明白?没事咱们还会画足球吗。

2022卡塔尔世界杯如期而至&#xff0c;看到朋友圈&#xff0c;群聊里大家对“战况”分析的头头是道&#xff0c;我只能在一旁干瞪眼&#xff0c;插不上嘴。我的世界杯记忆源自于2014巴西世界杯&#xff0c;球员记忆也只有梅西&#xff0c;可以说是个“球盲”了。眼看自己没啥参…

CSS 绘制世界杯足球场

写在之前的话 花有重开日&#xff0c;人无再少年。 疯狂无大小&#xff0c;热爱即疯狂&#xff01; 足球⚽️&#xff0c;是我大学时期的一门选修课&#xff0c;足球需要场地&#xff0c;场地绘制现在就开始&#xff01;&#xff01;&#xff01; 四年一次的世界杯再卡塔尔进行…

c语言结构体世界杯,世界杯冷知识 | 12座球场的结构巡礼

原标题&#xff1a;世界杯冷知识 | 12座球场的结构巡礼 2018世界杯开赛一周&#xff0c;32只球队都已亮相完毕(有些球队在买回家机票了&#xff1f;)&#xff0c;同时12座赛场也都和大家见过面了&#xff0c;也许专(he)心(jiu)看(lu)球(chuan er)的你并没有注意到它们&#xff…

linux Vi搜索和替换字符串

一. 搜索字符串 1. 打开文件 vi sources.list 2. 进入命令模式 用ESC键进入命令模式。 3. 输入搜索的字符串"/http",点击enter键开始搜索&#xff0c;光标指向第一个被搜到的字符串 /http 4. 点击键盘n搜索下一个 二. 搜索并退出字符串 1. 打开文件 sudo vi …