关于前端学习:HTML标签表格标签与属性介绍

5次阅读

共计 796 个字符，预计需要花费 2 分钟才能阅读完成。

表格标签

<table>
    <tr>
        <th></th>
    </tr>
    <tr>
          <td></td>
    </tr>
</table>

<table>：示意一个表格
<tr>：示意一行
<th>：示意表格的表头单元格
<td>：示意表格的一个单元格

HTML5 语义化表格标签

<caption></caption>
<table>
   <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
        </tr>
    </tfoot>    
</table>

<caption>：示意一个表格的题目
<thead>：示意表格的头部
<tbody>：示意表格的主体
<tfoot>：示意表格尾部

表格列分组标签

 从左至右对表格进行列分组
第一种语法：<col span="数值"/>
第二种语法：<colgroup span="数值"></colgroup>

表格标签的属性

设置表格的宽度：width=” 数值 ”
设置表格的高度：height=” 数值 ”
设置表格的边框：border=” 数值 ”
设置背景色彩：bgcolor=” 色值 ”
设置表格内容的程度对齐形式：align=” 方向 ”
- 左对齐：left
- 居中对齐：center
- 右对齐：right
设置表格内容的垂直对齐形式：valign=” 方向 ”
- 上对齐：top
- 居中对齐：middle
- 下对齐：bottom
<td> 标签合并属性
- 列合并：colspan=” 数值 ”
- 行合并：rowspan=” 数值 ”
< table> 标签的属性
- 设置边框与边框之间的间隔：cellspacing=” 数值 ”
- 设置边框与内容之间的间隔：cellpadding=” 数值 ”
- 增加分割线：rules=” 分割线类型 ”
  - 必须应用 <colgroup> 标签进行列分组
  - 组分割线：group
  - 行分割线：rows
  - 列分割线：cols
  - 行与列分割线：all
  - 无分割线：none