HTML表格的使用

等风来`deng

已于 2023-02-08 15:03:39 修改

阅读量1k

点赞数

分类专栏： HTML学习笔记文章标签： html css css3 visual studio code vscode

于 2022-12-14 11:58:57 首次发布

本文链接：https://blog.csdn.net/m0_46688827/article/details/128314310

版权

HTML学习笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML表格的使用

1、HTML个人笔记分享（二）
2、表格基本标签：
3、表格属性：
4、表格标题和表头单元格标签：
5、表格的结构标签：
6、合并单元格：

1、HTML个人笔记分享（二）

表格：能够使用表格相关标签和属性，实现网页表格结构的搭建。

2、表格基本标签：

table 表示整体, 可用于包裹多个tr

                       tr 表格每行，可用于包裹td
                       td 表示单元格，可用于包裹内容
                       嵌套关系  table> tr> td

3、表格属性：

在table中设置表格展示场景（实际开发针对表格样式效果推荐CSS设置）

                    border 边框宽度
                    width  表格宽度
                    height 表格高度

4、表格标题和表头单元格标签：

在表格中表示整体大标题和一列小标题

                    caption 表格大标题，表示表格整体大标题，默认在表格顶部居中显示
                    th 表头单元格，表示一列小标题，通常表示表格第一行，在表格中加粗显示
                    特点：caption书写在table内部，th书写在tr内部（用于替换td标签）

5、表格的结构标签：

让表格的内容结构分组，突出表格的不同部分（头部、主题、底部），使语义更加清晰

                    thead 表格头部
                    tbody 表格主体
                    tfoot 表格底部
                    特点： 表格结构标签内部用于包裹tr标签，表格的结构标签可以省略

6、合并单元格：

将水平或者垂直多个单元格合并成一个单元格

            	    垂直合并又叫跨行合并，水平合并又叫跨列合并  
            		只有同一结构标签中的单元格才能合并，不能跨标签合并
                        上下合并，只保留最上的，删除其他
                        左右合并，只保留最左的，删除其他    
                        跨行合并（rowspan)  跨列合并（colspan）
               属性名             属性值                说明
              rowspan      合并单元的格个数       跨行合并，将多行的单元格垂直合并
              colspan      合并单元格的个数       跨列合并，将多列的单元格水平合并

PS：有些Vs code在执行跨行或者跨列合并，会另起一列保留被合并单元格的内容。比如将成绩这一列的第二行和第三行合并：在td标签内加入rowspan=“2”。（不知道为啥）

<tr>
    <td>小陈</td>
    <td rowspan="2">100</td>
    <td>NO.1</td>
</tr>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>

        <!-- 表格：能够使用表格相关标签和属性，实现网页表格结构的搭建 
              表格基本标签: table 表示整体, 可用于包裹多个tr
                           tr 表格每行，可用于包裹td
                           td 表示单元格，可用于包裹内容
                           嵌套关系  table> tr> td

              表格属性：在table中设置表格展示场景（实际开发针对表格样式效果推荐CSS设置）
                        border 边框宽度
                        width  表格宽度
                        height 表格高度  
              表格标题和表![头单元格标签：在表格中表示整体大标题和一列小标题
                        caption 表格大标题，表示表格整体大标题，默认在表格顶部居中显示
                        th 表头单元格，表示一列小标题，通常表示表格第一行，在表格中加粗显示

                        特点：caption书写在table内部，th书写在tr内部（用于替换td标签）
              表格的结构标签：让表格的内容结构分组，突出表格的不同部分（头部、主题、底部），使语义更加清晰
                        thead 表格头部
                        tbody 表格主体
                        tfoot 表格底部
                        特点： 表格结构标签内部用于包裹tr标签，表格的结构标签可以省略    
                合并单元格： 将水平或者垂直多个单元格合并成一个单元格
                            垂直合并又叫跨行合并，水平合并又叫跨列合并  
                            上下合并，只保留最上的，删除其他
                            左右合并，只保留最左的，删除其他    
                            跨行合并（rowspan)  跨列合并（colspan）
                            属性名             属性值                说明
                            rowspan      合并单元的格个数       跨行合并，将多行的单元格垂直合并
                            colspan      合并单元格的个数       跨列合并，将多列的单元格水平合并    
    -->

    <h1>表格基本标签</h1>
    <!-- 表格基本标签: table 表示整体, 可用于包裹多个tr
    tr 表格每行，可用于包裹td
    td 表示单元格，可用于包裹内容
    嵌套关系  table> tr> td -->
    <table> 
        <tr>
            <td>姓名</td> 
            <td>成绩</td>
            <td>排名</td>
        </tr>
        <tr>
            <td>小陈</td>
            <td>100</td>
            <td>1</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>99.5</td>
            <td>2</td>
        </tr>
    </table>
    <hr>

    <h1>表格属性</h1>
    <!-- 表格属性：在table中设置表格展示场景（实际开发针对表格样式效果推荐CSS设置）
    border 边框宽度
    width  表格宽度
    height 表格高度  
    表格标题和表头单元格标签：在表格中表示整体大标题和一列小标题
    caption 表格大标题，表示表格整体大标题，默认在表格顶部居中显示
    th 表头单元格，表示一列小标题，通常表示表格第一行，在表格中加粗显示
    特点：caption书写在table内部，th书写在tr内部（用于替换td标签）-->
    <table border="1" height="150" width="150"> 
        <caption> <strong>成绩单</strong> </caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>排名</th>
            <!-- <td>姓名</td> -->
            <!-- <td>成绩</td>
            <td>排名</td> -->
        </tr>
        <tr>
            <td>小陈</td>
            <td>100</td>
            <td>1</td>
        </tr>
        <tr>
            <td>小王</td>
            <td>99.5</td>
            <td>2</td>
        </tr>
    </table>
    <hr>


<!-- 
    表格的结构标签：让表格的内容结构分组，突出表格的不同部分（头部、主题、底部），使语义更加清晰
    thead 表格头部
    tbody 表格主体
    tfoot 表格底部
    特点： 表格结构标签内部用于包裹tr标签，表格的结构标签可以省略 -->
    <h1>表格的结构标签</h1>
    <table border="1">
        <caption> <strong>成绩单</strong> </caption>
        <!-- 表头 -->
        <thead>
            <tr>
                <!-- 多行选中向后缩进：tab键  
                     多行选中向前缩进：shift+tab键 -->
                <th>姓名</th>
                <th>成绩</th>
                <th>排名</th>
            </tr>
        </thead>
        <!-- 表格主体 -->
        <tbody>
            <tr>
                <td>小陈</td>
                <td>100</td>
                <td>1</td>
            </tr>
            <tr>
                <td>小王</td>
                <td>99.5</td>
                <td>2</td>
            </tr>
        </tbody>
        <!-- 表格底部 -->
        <tfoot>
            <tr>
                <td>总结</td>
                <td>继续努力</td>
                <td>加油</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>