关于前端学习: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