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`

我是弦歌，

一个渴望成长的前端小白，

欢迎您的留言，

更期待您的不吝指正。

若我的内容能帮助到您，欢迎关注我

记得点赞收藏哦

巴特西

002. html篇之《表格》

html篇之《表格》

1. 结构

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

2. `<table>`表格标签属性

`px | %`

`left | center | right`

`px`

`rgb | 十六进制 | colorname`

`px | %`

`px | %`

① `void`

② `above`

③ `below`

④ `lhs`

⑤ `rhs`

⑥ `hsides`

⑦ `vsides`

⑧ `box`

⑨ `border`

① `none`

② `groups`

③ `rows`

④ `cols`

⑤ `all`

3. `<tr>`行标签属性

`left | center | right | justify | char`

`top | middle | bottom | baseline`

`rgb | 十六进制 | colorname`

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

`left | center | right | justify | char`

`top | middle | bottom | baseline`

`rgb | 十六进制 | colorname`

`px | %`

`px | %`

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

`left | center | right | justify | char`

`top | middle | bottom | baseline`