HTML 标签详解

2026-02-13 22:40:03 0条评论 2次阅读 0人点赞

HTML 中的 INLINECODE03ab490a 标签是用于在网页上创建表格的主要工具。它能够帮助我们以结构化和表格化的形式来组织和展示数据。为了在行和列中呈现信息，我们可以利用 INLINECODE9f28ffde、INLINECODE285c6dbb 和 INLINECODEb8ba96d5 等元素来指定表格单元格的不同部分。

此外，为了赋予表格更多的语义和结构，我们还可以定义 INLINECODE893990f2（表头）、INLINECODEbe6f4086（标题）、INLINECODE3ef502df（表尾）以及 INLINECODE8b35daf0（表身）元素。

语法


    

        课程
        文章
    

    

        HTML
        HTML 表格

注意： HTML

标签支持 全局属性 和 事件属性。

示例 1：基础表格实现

下面的例子向我们展示了 HTML 表格的基础用法。

#### HTML 代码





    
    
    HTML table tag
    
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        table,
        th,
        td {
            margin: auto;
            border: 1px solid black;
        }
    



    
GeeksforGeeks

    
HTML <table> tag
Name Age Class
Shivika 11 7
Gauri 18 12
Mahima 15 10

#### 输出

!Screenshot-2024-01-12-133107

示例 2：使用 rowspan、colspan 和自定义样式

这个例子向我们展示了如何结合 INLINECODE4394efb9（跨行）和 INLINECODEec4cd44e（跨列）属性来使用表格标签，并应用了自定义 CSS 样式，包括背景颜色、右对齐和边框合并（border-collapse）。

#### HTML 代码





    
    
    HTML table tag
    
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        table,
        td,
        th {
            border: 2px solid black;
            border-collapse: collapse;
        }

        table {
            margin: auto;
            background-color: rgb(173, 240, 213);
        }
    




    
GeeksforGeeks

    
 
        HTML table with Custom style
        (right- align, border-collapse
        and background-color)
    

    

        

            Name
            Details
        

        

            Age
            Class
        

        

            Shivika
            11
            7
        

        

            Gauri
            18
            12
        

        

            Mahima
            15
            10
        

        

            Shree
            15
            10
        

        

            Kanha
            15
            10

#### 输出

!Screenshot-2024-01-12-163253

示例 3：浏览器默认 CSS 样式

下面的示例展示了在应用浏览器默认 CSS 样式时的表格表现。

#### HTML 代码





    
    
    HTML table tag
    
        table {
            display: table;
            border-collapse: separate;
            box-sizing: border-box;
            text-indent: initial;
            border-spacing: 2px;
            border-color: gray;
        }
    




    

        

            Name
            Age
        

        

            Shivika
            11
        

        

            Gauri
            18
        

        

            Mahima
            15

#### 输出

(注：此处将显示应用了默认样式的表格效果)

让我们继续深入探讨，看看我们还能用

标签做些什么。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/46541.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年

投稿给我们

如何建站？

vps是什么？

如何安装宝塔？

如何通过博客赚钱？

便宜wordpress托管方案

免费wordpress主题

这些都是免费方案