HTML 表格

应用于数据展示等情况

表格基本标签

<table> 表格
<tr>  行
<td>  单元格

三个标签依次包含

代码应用

代码应用结果

添加和删除添加和删除只需根据所要完成的操作删除和添加对应的tr td

带表头的表格

<table>
    <tr>
        <th>...</th> 表格头，内容居中，加粗显示
        ...
    </tr>
    <tr>
        <td>...</td>默认左对齐
    </tr>
    ...
</table>

带标题的表格

<table>
    <caption>...</caption> 表格标题，居中显示
    <tr>
        <th>...</th> 表格头，内容居中，加粗显示
        ...
    </tr>
    <tr>
        <td>...</td>默认左对齐
    </tr>
    ...
</table>

代码实现结果

带结构的表格

表格划分三部分：表头、主体、脚注

thead：表头（放标题之类内容）
tbody：表格的主体（放数据主体）
tfoot：表格的脚（放表格的脚注）

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

通常情况下，三个标签同时使用，且三个标签顺序可以改变

代码实现

在代码编写过程中，将body 和 foot 部分交换了位置

而在实现过程中，tfoot 仍旧在最后一行
证明在标签中，三部分标签的顺序并不影响最终的呈现效果

表格属性（对表格样式进行设置）

table 表格属性

属性	值	描述
width	pixels、%	规定表格宽度
align	left、center、right	表格相对元素的对齐方式
border	pixels	规定表格边框的宽度
bgcolor	rgb（xxx）、#xxx、colorname	表格的背景颜色
cellpadding	pixels、%	单元边沿与其内容之间的空白
cellspacing	pixels、%	单元格之间的空白
frame	属性值	规定外侧边框的哪个部分是可见的
rules	属性值	规定内侧边框的哪个部分是可见的

不同属性对应的控制内容

frame属性

值	描述
void	不显示外侧边框
above	显示上部的外侧边框
below	显示下部的外侧边框
hsides	显示上部和下部的外侧边框
vsides	显示左边和右边的外侧边框
Ihs	显示左边的外侧边框
rhs	显示右边的外侧边框
box	在所有四个边上显示外侧边框
border	在所有四个边上显示外侧边框

rules属性

值	描述
none	没有线条
groups	位于行组和列组之间的线条
rows	位于行之间的线条
cols	位于列之间的线条
all	位于行和列之间的线条

简单的对表格的属性值进行应用

最终的显示结果

###tr 标签属性

属性	值	描述
align	left、center、right、justify、char	行内容的水平对齐
valign	top、middle、bottom、baseline	行内容的垂直对齐
bgcolor	.rgb(xxx)、.#xxxx、.colorname	行的背景颜色

thead tbody tfoot 标签属性

属性	值	描述
align	left、center、right、justify、char	水平对齐
valign	top、middle、bottom、baseline	垂直对齐

跨行跨列属性

跨列属性

<table>
    <tr>
        <td colspan="跨列合并的列数">...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

跨行属性

<table>
    <tr>
        <td rowspan="跨行合并的行数">...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

##表格的嵌套说明

嵌入的表格一定要是个完整的表格
嵌入的表格要放到td标签内

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>...</td>
                    <td>...</td>
                </tr>
                 .....
            </table>
        </td> 
    </tr>
    .....
</table>

表格布局

表格网页布局时，不设置border边框，只是作为网页结构的排版

注意

尽量少的使用表格嵌套尽量少使用跨行跨列增加维护成本