HTML表格标签

表格标签在过去的网页开发中使用的非常多,绝大多数的网站都是用来表格标签来制作,也就是说表格标签是一个时代的代表。

1. 什么是表格标签?

表格标签的作用 :用来给一堆数据添加表格语义,其实表格是一种数据的展现形式,当数据量非常大的时候,表格会清晰的展示出来
表格标签的格式

<table>
    <tr>
          <td>需要显示的内容</td>
   </tr>
</table>
  • 其实表格标签中的table 代表整个表格,也就是一堆table 标签就是一个表格,
  • 表格标签中的tr标签代表整个表格中的一行数据,也就是说一对 tr 标签就是表格中的一行,td 标签代表表格中一行中的一个单元格。
  • 注意点 1.表格标签有一个边框属性 border,这个属性决定了边框的宽度,默认情况下这个属性的值是0,所以是看不到边框的。
  • 注意点 2.表格标签是一个组合标签,所以table/tr/td 要么一起出现,要么一起不出现,不会单个出现的。

2. 表格标签的属性

  1. 宽度和高度属性:可以给table 标签和 td 标签使用。该属性默认是按照内容的尺寸来调整的;
  • 如果给td标签设置的width和height属性,会修改当前单元格的宽度和高度,不会影响到整个表格的宽度和高度。
  1. 水平对齐和垂直对齐的属性:其中水平对齐可以给table标签和tr 标签和td标签使用,但是垂直对齐只能给td标签使用。
  • 给table标签设置的align 属性,可以控制表格在水平方向的对齐方式;
  • 给tr标签设置align属性,可以控制当前行中所有单元格内容的水平方向的对齐方式;
  • 给td 标签设置的align属性,可以控制当前单元格内容在水平方向的对齐方式。
  • 如果给td中设置了align属性,tr中也设置了align 属性,那么单元格中的内容会按照td总设置的来对齐。
  • 给tr标签设置valign属性,可以控制当前行中所有单元格中的内容,在垂直方向的对齐方式
  • 如果td中设置了valign属性,tr中也设置了valign属性,那么单元格中的内容会按照td中设置的来对齐。
  1. 外边距和内边距的属性:只能给table 标签使用。
  • 外边距就是单元格和单元格之间的距离,默认,外边距为2px;cellspacing
  • 内边距 就是单元格的边框和文字之间的间隙;cellpadding;默认内边距为 1px。

3.细线表格

1.制作方式:

1.1 给table标签设置bgcolor;
1.2 给tr标签设置bgcolor;
1.3 给table 标签设置cellspacing=“1px”
注意点:table标签和tr标签以及td标签,都支持bgcolor 属性。

4. 表格标签其他标签

  1. 在表格标签中提供了一个标签,用来设置表格的标题,<caption>,只要将标题卸载caption 标签中,那么标题就会自动相对于表格的宽度居中

caption 标签的注意点:caption 标签一定要写在table 标签中,否则无效;
caption 标签一定要紧跟在table标签后面。

  1. 标题单元格标签

在表格标签中提供了一个标签专门用来存储每一列的标题,这个标签叫做th标签,只要将当前列的标题存储在这个标签中,文字会自动加粗。

3.其实表格中有两种单元格,一种是td,一种是th,td是专门用来存储数据的,th是专门用来存储当列的标题的。

5. 表格的数据分类

  1. 表格的标题 caption
  2. 表格的表头信息 thead
  3. 表格的主体信息 tbody
  4. 表格的附加信息 tfoot
    注意点:如果我们没有编写tbody,系统会我们添加tbody,如果指定了thead和tfoot,那么在修改表格的高度时,thead 和tfoot 都有自己默认的高度,不会随着表格的高度的变化而变化的。

6. 单元格合并

  1. 水平方向上的单元格合并:可以在td标签上添加一个colspan属性,来指定把某一个单元格当做多个单元格来看待。例如<td conlspan="2"></td>
  2. 注意点:由于把某一个单元格当做了多个单元格来看,所以会多出一些单元格,所以需要删掉多个单元格才能正常。
  3. 单元格合并永远都是向后或者向下合并,而不能向前或者向上合并。
  4. 垂直方向的合并单元格:可以给td标签添加一个rowspan属性,来指定吧某一个单元格当做多个单元格来看待,垂直方向。例如<td rowspan="2">

7.快捷键

  1. 快速移动 :control+shif+方向键;
  2. 快速合并和展开代码(选中的所有的标签):合并control + shift + - 展开:control +shift + +
  3. 快速新启一行 :shift+enter
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

  • 表格标签: 表格标签的作用:用来给一堆数据添加表格语义表格标签是一种数据的展现形式,当数据量特别大的时候,表格的展...
    幸运密码_xymm16888阅读 656评论 0 0
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 4,132评论 2 5
  • HTML需要掌握标签 标签(空格分隔): H5+CSS [TOC] 常用标签 img 注意点 和H系列标签/p标签...
    袁俊亮技术博客阅读 2,044评论 1 8
  • ## HTML基础-列表标签/表格标签 # 列表标签(无序列表/有序列表/定义列表) # 表格标签 # 单元格合并...
    KsKison阅读 619评论 0 0
  • 黑颈鹤,国家一级保护动物。头和颈的上部约三分之二为黑色,故称黑颈鹤,眼后和眼下方有白色或灰白色斑块。是世界上唯一生...
    ibolomi阅读 524评论 0 0