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

article/2025/4/25 1:19:49

1.什么是table表格

在HTML中我们用< table >标签来定义表格,它和Excel表格类似,都包括行、列、单元格、表头等,但是在功能方面HTML的表格远不如Excel强大。

2.table的常用属性

  • margin:主要设置表格的外边框
  • padding:设置内边距
  • border:设置表格的边框
  • width:设置表格的宽度
  • height:设置表格的高度
  • bgcolor:设置背景颜色
  • background:背景图片
  • border-collapse:合并边框
  • tr:行
  • th/td:单元格

3.怎么制作一个table表格

(1)制作一个table表格,我们需要确定表格的行列数,比如,我们要制作一个三行四列的表格,那么就是三行,每行四个单元格,我们可以运用快捷写法(tr * 3>td * 4)直接回车键会自动生成一个三行四列的表格,如下代码:

<table><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr>
</table>

(2)tr的属性:

  • border:边框(粗细、颜色等直接在border后面加“-”加属性即可)
  • align:水平对齐
  • vlign:垂直对齐
  • bgcolor:背景色

(3)th/td的属性

  • width:单元格的宽度
  • height:单元格的高度
  • border:单元格的边框
  • align:水平对齐
  • vlign:垂直对齐
  • bgcolor:背景色
  • background:背景图片
  • colspan:跨列(水平合并)
  • rowspan:跨行(垂直合并)

4.用table制作一份简单的个人简历

 <style>/* 自己定义的类名,设置宽度和文本对齐方式 */.bigtable {width: 1100px;text-align: center;}/* 设置宽度和边框 */.smalltable {width: 100%;border: none;}table {/* 合并边框 */border-collapse: collapse;/* 边框颜色 */border-color: black;/* 边框宽度 */border-width: 1px;/* 设置边框样式是实线 */border-style: solid;}/* 设置行高 */tr {height: 75px;}/* 设置单元格的样式 */td {border-color: black;border-width: 1px;border-style: solid;width: 220px;}th {border-color: black;border-width: 1px;border-style: solid;width: 220px;background-color: rgb(210, 230, 243);}/* 设置简历图片的尺寸 */img {width: 220px;height: 290px;}/* 设置caption的字体大小和字体粗细 */caption {font-weight: 800px;font-size: 30px;}/* 设置这个类的文本对齐方式为左对齐 */.geshi {text-align: left;}.endu-td {/* 内边距为零 */padding: 0;}.td-01 {/* 无左边框 */border-left: none;}.td-02 {/* 无上边框 */border-top: none;}.td-03 {/* 无右边框 */border-right: none;}.td-04 {/* 无下边框 */border-bottom: none;}</style><table class="bigtable"><caption>个人简历</caption><tbody><!-- tr*8>td*5  8行5列的表格 --><tr><th>求职意向</th><td colspan="4">会计</td></tr><tr><th>姓名</th><td>小可爱</td><th>出生年月</th><td>2020.11.11</td><td rowspan="4"><img src="./imges/简历.PNG" alt=""></td></tr><tr><th>性别</th><td></td><th>政治面貌</th><td>共青团员</td></tr><tr><th>籍贯</th><td>北京</td><th>学历</tdh <td>本科</td></tr><tr><th>邮箱</th><td>11111111111</td><th>联系电话</th><td>66666</td></tr><!-- 地址 --><tr><th>地址</th><td colspan="4">北京市海淀区</td></tr><tr><th>教育经历</th><td colspan="4" class="endu-td"><table class="smalltable"><tr><td class="td-01 td-02">起止日期</td><td class="td-02">学校</td><td class="td-02 td-03">专业</td></tr><tr><td class="td-01">2011.9-2016.6</td><td>北京财经专修学院</td><td class="td-03">会计</td></tr><tr><td class="td-01">2009.-2011.6</td><td>北京中学</td><td class="td-03"></td></tr><tr><td class="td-01 td04">2003.92009.6</td><td class="td-04">北京小学</td><td class="td-03 td-04"></td></tr></table></td></tr><!-- 主修课程 --><tr><th>主修课程</th><td colspan="4" class="geshi">高数、概率论、线性代数、管理学、网页设计、java、c语言</td></tr><tr><th>实习经历</th><td colspan="4" class="geshi">2020.9-2021.11 goole公司 财务&nbsp; 负责申报、发票等,处理相关财务问题</td></tr><tr><th>荣誉证书</th><td colspan="4" class="geshi">国家一等奖学金&nbsp;注册会计师</td></tr><tr><th>校园经历</th><td colspan="4" class="geshi">2011.9 &nbsp;&nbsp;xxx校园大使</td></tr><tr><th>自我评价</th><td colspan="4" class="geshi">有责任心、抗压能力强</td></tr></tbody></table></center>
</body>

展示效果:
个人简历展示效果


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

相关文章

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 …

linux vi修改相同的字符,UNIX/Linux下的vi/vim编辑器快速替换字符串

在UNIX/Linux中的vi/vim编辑中可以使用 :s 命令来替换字符串。以前只会使用一种格式来全文替换&#xff0c;今天发现该命令有很多种写法&#xff0c;而且作用十分强大&#xff0c;还有很多需要学习&#xff0c;记录几种常用的在此&#xff0c;方便以后查询。 :s/procat/law/ 替…

linux用vi查找字符串替换,Linux中vi进行字符替换

Linux环境下vi/vim 可以使用 :s 命令来替换字符串。以前只会使用编辑软件进行替换&#xff0c;今天发现该命令有很多种写法(vi 真是强大啊&#xff0c;还有很多需要学习)&#xff0c;记录几种在此&#xff0c;方便以后查询。 :s/well/good/ 替换当前行第一个 well 为 good :s/w…

查看GitHub项目的星星排行榜(GitHub排行榜)

如图&#xff1a;打开GitHub&#xff0c;在输入框输入 stars:>10000 这里的10000是搜索的星星数的项目

如何查看github star排行榜?

输入location:China 可以搜索指定地区用户USER 输入 指定 star数 比如说 stars:>50000,查找star数大于5万的项目 找到优秀的开源项目, 学习它的源码, 是提高编程能力最快的方法, 即使你不是程序员, 也能从github找到一些好的开源工具, 提升你的工作效率, 当你对github有一…

githubRank: Github 项目和用户排行榜

自己平时比较喜欢逛 Github&#xff0c;也热衷于发现各种各样神奇的仓库&#xff0c;所以干脆用官方的接口自己整合一下&#xff0c;便诞生了—— githubRank&#xff0c;这样一个展示仓库与用户排行的网站&#xff0c;虽然已经存在了很多基于官方接口的 github 项目排行的网站…

GitHub 中文排行榜,高分优秀中文项目一网打尽!

点击上方“AI有道”&#xff0c;选择“星标”公众号 重磅干货&#xff0c;第一时间送达 GitHub 是每个程序员经常逛的地方。在 GitHub 里&#xff0c;我们经常能发现一些优秀的开源且高分项目&#xff01;有时候为了找到最优秀的开源项目&#xff0c;却往往要在 GitHub 上寻找很…