HTML基本标签(table详解) | 零基础学HTML(四)

179 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第13天,点击查看活动详情

  • 定义列表标签:自定义列表不仅仅是一列项目,而是项目及其注释的组合。由三个标签组成完整的结构,包含<dl>、<dt>和<dd>

    • <dl>:definition list,表示定义一个自定义列表的大结构

    • <dt>:definition term,表示定义自定义列表中的一个主题或者术语

    • <dd>:definition description,定义解释项,表示描述或解释前面的定义主题

    • <dl>内部只能嵌套<dt><dd><dt><dd>是同级关系

  • 表格至少由三个标签组成,分别是<table>、<tr>、<td>

    • table:表格,定义的是整个表格大结构

    • tr:table rows,表格的行,定义的是表格由多少行组成

    • td:table data,表格数据,也叫表格单元格,定义的是每一行内部的单元格

  • <table>的属性:border 属性值:数字,表示像素值;表格的单元格之间有默认的空隙,会导致双线边框。解决办法:设置标签样式属性style,属性值:border-collapse:collapse

  • 表头单元格:如果要绘制表头,使用标签<th>,table head data,表头单元格;在表格中绘制的时候,替换的是<td>的位置;<th>标签中自带默认的css样式效果,文字显示粗体并且居中

  • 单元格属性:表格的单元格可以进行合并,通过<th><td>的两个属性可以进行合并设置;rowspan:跨行和并,上下的合并;colspan:跨列合并,左右的合并;属性值:数字,数字是几表示跨几行(列)合并

  • 制作表格的技巧1:

    1. 先列出所有,以最小单元格为标准

    2. 再添加每一行的和单元格

    3. 划分单元格所在行时,顶边对齐的属于同一行

    4. 将所有行和列写完后,再查看哪个单元格有跨行或跨列,属性值的个数要参考最小的单元格

    5. 将所有<colspan><rowspan>标签都写在标签中 image.png

  • 表格的分区标签:都是双标签

       caption:表格的标题,内部书写标题文字

       thead:table head,表格的头部,内部嵌套tr>th

       tbody:table body,表格的主体,内部嵌套tr>td

       tfoot:table foot,表格的页脚,内部嵌套tr>td

       注意:四个分区可以选择性的进行组合。不论书写顺序如何颠倒,浏览器中的加载顺序都是自动按照caption、thead、tbody、tfoot执行的

  • 制作表格技巧2:

    1. 先写大分区标签结构

    2. 填充每个分区的内部内容

    3. 如果有合并单元格内容,进行单元格合并 image.png