宁夏建设工程质量安全监督网站,电商网站需求分析,南阳东莞网站建设公司哪家好,权威发布2015注意#xff1a;手机#xff08;APP#xff09;打开#xff0c;内容显示更佳#xff0c;不会的私聊博主即可 想要拿代码或加入学习计划#xff08;** 博主会监督你并且教你写文章 **#xff09;的拉到最下面#xff08;PC端Web打开#xff09;加博主即可#xff0c;目…注意手机APP打开内容显示更佳不会的私聊博主即可 想要拿代码或加入学习计划** 博主会监督你并且教你写文章 **的拉到最下面PC端Web打开加博主即可目录也在最下面。 参加1_bit博主前端学习计划发文时再头部记得机上本专栏链接示例如下 我已加入 1_bit 博主的免费前端 站起来 学习计划专栏链接https://blog.csdn.net/a757291228/category_11609526.html
表格的使用
一、表格的基础用法
1_bit小媛这节课咱们学习表格的使用。
小媛就是类似Excel表格那种吗
1_bit对的在 HTML 中表格使用的标签是 table 标签。
小媛是这样写吧 table /table
1_bit对的。表格的使用很简单一般在表格内有行和列每个列都有自己的列名例如如下截图示例。 1_bit这些列名在 table 中是使用 th 标签来表示但是这些列属于同一个行这个行在 table 标签中也有表示那就是使用 tr 标签例如如下代码示例就是定义了列名。
tabletrth昵称/thth等级/thth战力/thth种族/th/tr
/table小媛真简单其中的 th 标签在 tr 里面意思就是 tr 就是一行而每一个 th 标签就是一个列名每一个 th 标签就包含了一个列名。
1_bit对的那么咱们现在有了列名后咱们可以给这些列添加一些内容这些内容此时不是使用 th 标签进行说明而是使用 td 标签例如如下示例则是一个完整的基本表格示例。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title1_bit 的前端实战课程06 表格/title
/head
bodytabletrth昵称/thth等级/thth战力/thth种族/th/trtrtd萌王/tdtd未知/tdtd天花板/tdtd史莱姆/td/trtrtd鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/table
/body
/html小媛哇我发现了 tr 没变依旧是表示行但是在内容中是使用 td 表示每一行的元素了。
二、结构化
1_bit是这样的这个就是一个最基本的表格了。一般来说可以使用 thead 、tbody、tfoot 标签定义表的头部也就是 table head 表格头部、tbody 表格主题、tfoot 表格尾部使表格结构化你可以理解为结构清晰、每个部分有对应的结构表格可以写成这样。
table
theadtrth昵称/thth等级/thth战力/thth种族/th/tr
/thead
tfoottrtd萌王/tdtd未知/tdtd天花板/tdtd史莱姆/td/tr
/tfoot
tbodytrtd鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr
/tbody小媛明白了而且定义了 tfoot 的内容直接呈现在了底部。
三、边框
1_bit咱们还可以使这些表格内容添加边框只需要给予 table 标签的边框属性值即可例如如下代码。
table border1theadtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottrtd萌王/tdtd未知/tdtd天花板/tdtd史莱姆/td/tr/tfoottbodytrtd鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/tbody
/table1_bit此时保存代码运行将会显示如下效果。 小媛奥原来如此原来给了 border 属性一个值就会使表格添加边框。
1_bit对的border 对应修改的内容为边框值并且你可以更改不同的边框值加粗或变细边框粗细。
小媛明白了。
1_bit除此之外咱们还可以设置边框的颜色设置边框的颜色使用 bordercolor 属性例如如下示例重复代码不再贴出。
table border1 bordercolorblue小媛哇真好还有什么玩法吗
四、边距
1_bit当然例如设置表格单元格之间的边距设置边距使用属性 cellspacing例如如下示例。
table border1 bordercolorblue cellspacing151_bit还可以设置单元格与内容之间的距离一般情况下单元格都是距离内容紧挨着的如果想要设置内容与单元格边框的距离就可以使用 cellpadding 属性。
table border1 bordercolorblue cellspacing15 cellpadding5小媛可是我总感觉这个表格少了什么东西。
1_bit你是想说表格标题吗
小媛对对是少了这个。
1_bit这个设置也超级简单在表格中添加一个标签 caption 即可例如如下示例。
table border1 bordercolorblue cellspacing15 cellpadding5caption动漫战斗力统计/captiontheadtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottrtd萌王/tdtd未知/tdtd天花板/tdtd史莱姆/td/tr/tfoottbodytrtd鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/tbody
/table1_bit而且你会发现不管这个 caption 放哪只要在 table 之内都会显示在头部这就是结构化。你还记得上一章学了一堆七七八八的东西但是从视觉角度并没有呈现出什么明显的效果但是如果你从代码中看可以知道哪里是页脚、哪里是文章、哪里是标题等这就是结构化的好处像我们常规的一个网站一般有一个导航栏这个导航栏如果你用导航标签定义后你从代码上看一看就知道了并且咱们的浏览器也知道例如你定义了一个导航栏使用了导航标签这个时候如果是一个视觉不便的人在浏览一个网站时并不能看见哪里是导航栏但是浏览器知道在进行无障碍阅读时就会语音播报当前页面的结构导航栏有哪些、是否要进入某个导航这就是结构化的作用。当然这个例子比较片面在此只是作为一个举例便于理解其内容
小媛哇原来是这么回事上一节的问题我悟了。
1_bit悟了就行咱们还可以设置当前表格的宽高在 table 标签中设置其属性 width 和 height 即可例如如下示例。
table width400 height500 border1 bordercolorblue cellspacing15 cellpadding5五、背景色
1_bit当然你可以使用 bgcolor 属性设置背景色。
table bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding51_bit也可以指定某一行设置背景色。
table bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding5caption动漫战斗力统计/captiontheadtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottr bgcolorredtd萌王/tdtd bgcolorgreen未知/tdtd天花板/tdtd史莱姆/td/tr/tfoottbodytrtd鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/tbody
/table六、对齐方式
小媛那可以设置水平对齐方式吗
1_bit可以的例如你可以使用 align 属性集体设置对齐方式或具体各行、列设置对齐都可以。
table alignleft bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding5caption动漫战斗力统计/captiontheadtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottr bgcolorredtd萌王/tdtd bgcolorgreen未知/tdtd天花板/tdtd史莱姆/td/tr/tfoottbody alignrighttrtd鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd aligncenter莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/tbody
/table小媛那垂直对齐呢
1_bit当然也可以垂直对其使用 valign 属性设置方法如下使用 top、bottom、middle 值分别对应顶部、底部以及中部作用于行内。
table alignleft bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding5caption动漫战斗力统计/captionthead valignbottomtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottr bgcolorredtd萌王/tdtd bgcolorgreen未知/tdtd天花板/tdtd史莱姆/td/tr/tfoottbody alignrighttrtd valignmiddle鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd aligncenter莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/tbody/table七、背景图
小媛明白了还有什么特殊的功能吗
1_bit特殊呀那就是给这个单元格添加背景图片直接在 table 中添加 background 属性就可以了值就是图片的路径。
table background./img/1.png alignleft bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding5小媛哈哈哈好花呀这个不算还有啥吗
八、合并单元格
1_bit那就合并水平单元格合并垂直的单元格
小媛勉强算你及格吧。
1_bit合并单元格只需要在某一个单元格 td 抱歉中添加一个 colspan 的属性并且指定合并单元格的数量即可例如如下示例。
table alignleft bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding5caption动漫战斗力统计/captionthead valignbottomtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottr bgcolorredtd colspan2萌王 战斗力 yyds/tdtd天花板/tdtd史莱姆/td/tr/tfoottbody alignrighttrtd valignmiddle鹿娘/tdtd99/tdtd190000/tdtd兽族/td/trtrtd aligncenter莱茵/tdtd999/tdtd9990000/tdtd吸血鬼/td/tr/tbody
/table小媛这不就是表示占有几个格吗垂直的怎么做呢
1_bit垂直的只需要使用rowspan 属性就可以了。
table alignleft bgcoloryellow width400 height500 border1 bordercolorblue cellspacing15 cellpadding5caption动漫战斗力统计/captionthead valignbottomtrth昵称/thth等级/thth战力/thth种族/th/tr/theadtfoottr bgcolorredtd colspan2萌王 战斗力 yyds/tdtd天花板/tdtd史莱姆/td/tr/tfoottbody alignrighttrtd valignmiddle鹿娘/tdtd rowspan299/tdtd190000/tdtd兽族/td/trtrtd aligncenter莱茵/tdtd9990000/tdtd吸血鬼/td/tr/tbody
/table1_bit好了没了一点都没了。
小媛好的问题不大期待下一期学习。
目录
【前端就业课 第一阶段】HTML5 零基础到实战九列表 【前端就业课 第一阶段】HTML5 零基础到实战八表单详解 【前端就业课 第一阶段】HTML5 零基础到实战七文字及图片样式 【前端就业课 第一阶段】HTML5 零基础到实战六表格详解 【前端就业课 第一阶段】HTML5 零基础到实战五基础元素 【前端就业课 第一阶段】HTML5 零基础到实战四伪类与伪元素 【前端就业课 第一阶段】HTML5 零基础到实战三一篇文CSS基础入门 【前端就业课 第一阶段】HTML5 零基础到实战二超链接 【前端就业课 第一阶段】HTML5 零基础到实战一基础代码结构详解
