Html——之table表格

article/2025/4/25 0:42:47

表格(table)的应用:

表格的创建:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>  <--表格标记-->
</head>
<body><table><tr>          <--行标记--><td>第一行第一列</td>   <--单元格标记--><td>第一行第二列</td></tr> <tr><td>第二行第二列</td><td>第二行第三列</td></tr></table>
</body>
</html>

输出:

第一行第一列	第一行第二列
第二行第二列	第二行第三列

表格中一些其它的关键字:

captyion:标题运用通过“<caption>表格的标题</caption>”来实现。标题可以认为是在整个表格的最上方添加了一个没有边框的行。

th:表头,意味加粗显示“<th>第一行第三列加粗显示</th>”,与<td></td>同级。

简单的知道了如何的创建表格,下面我们开始介绍表格的一些属性。

表格<table>的简单属性:

width:宽度,意味设置表格的宽度,单位就是px(像素),也可以是占浏览器的百分比(width="100"或者是width="90%")等。

height:同比向width。

align:设置表格的对齐方式,有左对齐left,右对齐right,居中对齐:center。

border:设置表格的边框效果,数值越大表格边框越粗。

bordercolor:边框的颜色。这时候边框的宽度不能为0否则显示不出效果,颜色为十六进制的颜色代码。

cellspacing:表格内框的宽度。

cellpadding:表格内文字与边框的间距,数值不能不限制的进行调整,因为它对边框的上下左右都有效,数值设置过大会影响表格的设定宽高。

bgcolor:表格的背景设置。

background:为表格设置背景图片,图片可以是绝对路径也可以是相对路径。与bgcolor只有一个起效果。

<tr>属性:

<td>属性:

练习:

table表格也可以用来进行简单的布局,尝试将两张图片利用table进行居中(显示在网页的中间)拼接。如下:

相关练习代码与资源:https://u062.com/dir/26395293-39721853-c328a7

业余爱好者,有问题练习哦!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意:表格的各种属性的设置要在<table>与</table>之间完成。

 


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

相关文章

前端table表格的用法

文章目录 一、table的基础用法二、table属性三、合并单元格拓展总结 一、table的基础用法 代码如下&#xff1a; <table><tr>//第一行<td>第一行第1列</td><td>第一行第2列</td></tr><tr>//第二行<td>第二行第1列<…

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…