前端必备知识之表格标签


表格

  表格是用来展示数据。

表格的基本语法

<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
</table>

<table></table>用于定义表格的标签

<tr></tr>定义表格中的行

<td></td>定义表格中的单元格,表格中内容填写在这里。

表头标签

<th></th>表示表格的表头部分,加粗居中显示。

表格的属性(了解)

  通常用CSS设置,实际开发中不常用,属性写在table标签中。

属性名属性值描述
alignleft、right、center规定表格的对齐方式
border1或""规定表格是否有边框,默认是"",表示没有边框。
cellpadding像素值规定单元格内边距,默认1像素。
cellspacing像素值规定单元格外边距,默认2像素。
width像素值或百分比规定表格的宽度。
height像素值或百分比规定表格的高度。

表格结构标签

  有时候表格可能很长,为了更好的表现表格的语义,可以将表格分为表格的头部,和表格的主体,是的表格结构更清晰。

  表格头部区域标签为<thead></thead>,表格主体区域标签为<tbody></tbody>

合并单元格

合并单元格的方式

  1. 跨行合并:rowspan="合并单元格的个数"
  2. 跨列合并:colspan="合并单元格的个数"

写在目标单元格中:跨行写在最上侧单元格中,跨列写在最左侧单元格中。最后将余单元格标签删除。

声明:极客角度|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 前端必备知识之表格标签


代码书写人生