html_table

[253867843]

表格

1.表格的操作
2.表格的属性
3.表格的跨行, 跨列的操作
4.表格的嵌套

1.表格的基本结构

<table>表格
<caption>表格标题
<tr>行
<th>列, 表格头, 内容居中, 加粗显示
<td>列, 单元格

<table> 表格开始
    <caption>表格标题</caption>
    <tr>
        <th>...</th> 表格头, 内容居中, 加粗显示
    </tr>
    <tr> 行标签
        <td>...</td> 列标签, 单元格
        ...
    </tr>
    <tr>
        <td>...</td>
        ...
    </tr>
</table> 表格结束

2.表格结构标签 --- 加载一部分, 显示一部分

表格划分三部分:
1.thead: 表头
2.tbody: 表格主体(数据主体)
3.tfoot: 脚注
三个标签需要同时存在, 同时使用


<table>
    <caption>...</caption>
    <thead>
        <tr>
            <th>表头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>主体</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>脚注</td>
        </tr>
    </tfoot>
</table>

3.表格属性table

属性:
width: 表格宽度
align: left, center, right; 表格相对周围元素的对齐方式
border: 表格边框宽度
bgcolor: 表格背景颜色
cellpadding: 单元格和内容之间的空白 px
cellspacing: 单元格和单元格之间的空白
frame: 外边框的显示属性
rules: 内边框的显示属性

4.表格属性tr

属性:
align: left, center, right 水平对齐方式
valign: top, middle, bottom, baseline 垂直对齐方式
bgcolor: 背景颜色 
颜色设置方式: 颜色名称, 十六进制， rgba(...)

5.表格属性td, th

属性:
align: 单元格内容的水平垂直
valign: 单元格内容的垂直对齐
bgcolor: 单元格的背景颜色
width: 单元格的宽度
height: 单元格的高度

如果tr设置过了align和valign, 就不需要在td, th中设置了

6.thead, tbody, tfoot标签属性

属性:
align: left, center, right, thead, tbody, tfooter内容的水平对齐
valign: top, middle, bottom, thead, tbody, tfooter内容的垂直对齐
tbody, tr, td
如果在tbody中设置了属性, 就不需要在tr, td再次设置了

7.表格跨行, 跨列

跨列属性colspan
<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
改为 
<table>
    <tr>
        <td colspan="2">...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
删除当前行的下一列

跨行属性rowspan
<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
改为
<table>
    <tr>
        <td>...</td>
        <td rowspan="2">...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>
删除下一行的第二列

8.表格嵌套

表格嵌套必须写在<td>...</td>标签内
<td>
    <table>表格嵌套
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</td>