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

43次阅读

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

表格标签的属性

  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

正文完
 0