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