002. html篇之《表格》

Posted 2023-02-16 弦歌是只敲代码的前端大猫

html表格基本使用

html篇之《表格》

1. 结构

<table> <!-- 表格标签 -->
  <caption>标题，自动居中对齐</caption>
  <thead> <!-- 表格结构化-表头，内容始终保持在页面最上方，不受tbody和tfoot摆放顺序影响 -->
    <tr>  <!-- 行标签 -->
      <th>表头,自动加粗，居中对齐</th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>单元格标签</td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody> <!-- 表格结构化-主体，内容始终保持在页面中间，不受thead和tfoot摆放顺序影响 -->
    <tr>
      <td colspan="2"></td> <!-- 跨列属性,合并同一行2列单元格 -->
      <!-- 此单元格删除，以达成跨列合并单元格 -->
      <td></td>
    </tr>
    <tr>
      <td rowspan="2"></td> <!-- 跨行属性，合并同一列2行单元格 -->
      <td></td>
      <td></td>
    </tr>
    <tr>
      <!-- 此单元格删除，以达成跨行合并单元格 -->
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot> <!-- 表格结构化-脚注，内容始终保持在页面最下方，不受thead和tbody摆放顺序影响-->
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>
        <!-- 表格嵌套，在<td></td>中放入完整表格结构 -->
        <table>
          <tr>
            <td></td>
          </tr>
        </table>
      </td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

2. <table>表格标签属性

（1）width

表格宽度

px | %

（2）align

表格水平对齐方式

left | center | right

（3）border

表格边框宽度

px

（4）bgcolor

表格背景颜色

rgb | 十六进制 | colorname

（5）cellpadding

单元格边沿与其内容之间的空白

px | %

（6）cellspacing

单元格之间的空白

px | %

（7）frame

规定外侧边框的哪个部分是可见的.

值：

① void

不显示外边框

② above

显示上边

③ below

显示下边

④ lhs

显示左边

⑤ rhs

显示右边

⑥ hsides

显示上下

⑦ vsides

显示左右

⑧ box

显示所有边

⑨ border

显示所有边

（8）rules

规定内侧边框的哪个部分是可见的.

值：

① none

没有线条

② groups

位于行组和列组之间的线条

③ rows

位于行之间的线条

④ cols

位于列之间的线条

⑤ all

位于行和列之间的线条

3. <tr>行标签属性

（1）align

行水平对齐方式

left | center | right | justify | char

（2）valign

行垂直对齐方式

top | middle | bottom | baseline

（3）bgcolor

行背景颜色

rgb | 十六进制 | colorname

4. <td>和<th>单元格标签属性

（1）align

单元格水平对齐方式

left | center | right | justify | char

（2）valign

单元格垂直对齐方式

top | middle | bottom | baseline

（3）bgcolor

单元格背景颜色

rgb | 十六进制 | colorname

（4）width

单元格宽度

px | %

（5）height

单元格高度

px | %

5. <thead>、<tbody>、<tfoot>结构标签属性

（1）align

水平对齐方式

left | center | right | justify | char

（2）valign

垂直对齐方式

top | middle | bottom | baseline