Web前端------HTML表格_前端table表格-优快云博客

本文链接：https://blog.youkuaiyun.com/2402_88282438/article/details/145193928

一.表格标签介绍

表格，类似操作的软件excel一样，通过规范的行列方式展示数据的一种视图！

网页中（初级开发），对于这种规范的数据，使用表格标签最方便的；

实际开发（高级开发），大量的插件，可以直接生成好看的表格数据，反倒原始的表格标签使用频率降低

<table></table> 表格标签，表格中展示的所有数据都要包含在这个标签中 

<thead></thead> 表头标签，表示表格中第一行-设置表头

<tbody></tbody> 表体标签，表格中的所有行列数据都包含在这个标签中-展示数据 

<tfooter></tfooter> 表尾标签，表格中最后一行进行合计的标签-展示统计结果 

<tr></tr> 行标签，table row缩写，表示表格中的一行 

<th><th> 表格标题标签，table header缩写，表示表格第一行标题 

<td></td> 单元格标签，table cell data缩写，表示一行中的一列

二.代码展示及效果展示

1.常用语法

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>

    <h3>常用表格</h3>

    <!-- 

    表格中的所有数据都必须包含在table标签中

    border属性，添加表格的边框

    width属性，调整表格的宽度

    cellspacing属性，调整表格单元格之间的间距，一般设置为0

    cellpadding属性，调整表格边框和内容之间的距离

    align属性，调整表格在网页中的对齐方式left/center/right

    bgcolor属性，调整表格的背景颜色

    -->

    <table border="1" 
            width="800px" 
            cellspacing="0" 
            cellpadding="10px" 
            align="center">

        <!-- tr表示一行，必须包含在table中使用 

            height属性：设置一行的高度，最小的高度是内容行高
            bgcolor属性：设置行的背景颜色

            align属性：设置一行中的所有单元格对齐方式 left/center/right

        -->

        <tr height="80px" bgcolor="#abcdef">

            <!-- 标题-单元格 

                th属性、td属性一致，th本质上就是td

                width属性：设置单元格的宽度，本质上就是设置列的宽度 

                align属性：设置当前单元格内容的对齐方式

            -->

            <th width="100px" align="center">学号</th>

            <th>姓名</th>

            <th>年龄</th>

        </tr>

        <!-- tr新的一行 -->

        <tr align="center">

            <!-- 普通数据展示，使用td标签，必须包含在tr中 -->

            <td align="center">001</td>

            <td>汤姆</td>

            <td>18</td>

        </tr>

        <!-- tr新的一行 -->

        <tr>

            <td align="center">002</td>

            <td>杰瑞</td>

            <td>19</td>

        </tr>

    </table>
</body>
</html>

2.完整语法

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>

    <!-- 

    编码小技巧

        按 Shift + Alt + 上/下方向键，可以直接复制一行代码

    -->

    <h3>表格完整语法</h3>

    <table width="500" border="1">

        <!-- 表格顶部标题 -->

        <caption>表格标题</caption>

        <!-- 表格第一行表头 -->

        <thead>

            <tr>

                <th>序号</th>
<th>姓名</th>

                <th>年龄</th>

            </tr>

        </thead>

        <!-- 表格主体数据 -->

        <tbody>

            <tr>

                <td>001</td>

                <td>汤姆</td>

                <td>18</td>

            </tr>

            <tr>

                <td>001</td>

                <td>杰瑞</td>

                <td>20</td>

            </tr>

        </tbody>

        <tfoot>

            <td>总计：</td>

            <td>人数-2人</td>

            <td>年龄-38</td>

        </tfoot>

    </table>
</body>
</html>

3.合并单元格

第一种情况：跨列合并单元格

第二种情况：跨行合并单元格

代码展示

<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>
</head>
<body>

    <h3>跨列合并单元格</h3>

    <table width="500" border="1" cellpadding="10" cellspacing="0">

        <tr>

            <td>101</td>

            <td colspan="2">102</td>

            <!-- <td>103</td> -->

        </tr>

        <tr>

            <td>201</td>

            <td>202</td>

            <td>203</td>

        </tr>

        <tr>

            <td>301</td>

            <td>302</td>

            <td>303</td>

        </tr>

    </table>

    <h3>跨行合并单元格</h3>

    <table width="500" border="1" cellpadding="10" cellspacing="0">

        <tr>

            <td>101</td>

            <td>102</td>

            <td>103</td>

        </tr>

        <tr>

            <td rowspan="2">201</td>

            <td>202</td>

            <td>203</td>

        </tr>

        <tr>

            <!-- <td>301</td> -->

            <td>302</td>

            <td>303</td>

        </tr>

    </table>
</body>
</html>