HTML标签——表格标签与属性介绍

表格标签

<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>

表格标签的属性

1. 设置表格的宽度：width="数值"
2. 设置表格的高度：height="数值"
3. 设置表格的边框：border="数值"
4. 设置背景颜色：bgcolor="色值"

5. 设置表格内容的水平对齐方式：align="方向"

   • 左对齐：left
   • 居中对齐：center
   • 右对齐：right

6. 设置表格内容的垂直对齐方式：valign="方向"

   • 上对齐：top
   • 居中对齐：middle
   • 下对齐：bottom

7. <td>标签合并属性

   • 列合并：colspan="数值"
   • 行合并：rowspan="数值"

8. < table>标签的属性

   • 设置边框与边框之间的距离：cellspacing="数值"
   • 设置边框与内容之间的距离：cellpadding="数值"

   • 添加分割线：rules="分割线类型"

     • 必须使用<colgroup>标签进行列分组
     • 组分割线：group
     • 行分割线：rows
     • 列分割线：cols
     • 行与列分割线：all
     • 无分割线：none