表格-HTML基础

悠悠 2024-04-20 11:35 72阅读 0赞

## 表格-HTML基础 ##

**目录**

表格-HTML基础

一、表格简介

二、表格基本结构

1.语义

三、表格完整结构

1.caption-表格标题

（1）示例

2.th-表头单元格

（1）语法

（2）th和td区别

四、语义化

1.语法

（1）实际开发

① 重要性

Ⅰ.总结

五、rowspan-合并行

1.语法

（1）示例

① 例1

六、colspan-合并列

1.语法

（1）示例

① 例1

2.实际开发

--------------------

本文章向大家介绍4.表格-HTML基础，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

### 一、表格简介 ###

> 在过去的`web1.0`时代，表格常用于页面布局。但在`web2.0`中，这种用表格的页面布局方式已经被抛弃，现在的网页布局都是使用`CSS`来实现的。 但是表格并不是一无是处，**表格在实际开发中是用得非常多的，因为使用表格可以更清晰地排列数据**。

### 二、表格基本结构 ###

> 在 HTML 中，一个表格一般会由以下三部分组成：

*  表格：`table标签`
 *  行：`tr标签`
 *  单元格：`td标签`

#### 1.语义 ####

> tr 指的是 **table row（表格行）**。 td 指的是 **table data cell（表格单元格）**。 **`<table></table>`表示整个表格的开始和结束**。 **`<tr></tr>`表示行的开始和结束**。在表格中，有多少组`<tr></tr>`就有多少行。 **`<td></td>`表示单元格的开始和结束**。

### 三、表格完整结构 ###

> 一个表格的完整结构，不仅仅只有`table、tr、td`这三个，还应包括`caption、th、thead、tbody、tfoot`。

#### 1.caption-表格标题 ####

> 在 `HTML` 中，表格一般都会有且只有一个标题，通过使用`caption标签`来实现，也就是说一个表格中只有一个`caption标签`。 在默认情况下，标题都是位于整个表格内的第一行。

（1）示例

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">  
            <title>表格</title>
            <style type="text/css">
                table,tr,td{
                    border: 1px solid #00FFFF;      /*为表格加上边框，默认是没有边框的*/
                }
            </style>
        </head>
        <body>
            <table>
                <caption>見贤思齊</caption>     
                <tr>                            
                    <td>君初见</td>            
                    <td>初见</td>
                </tr>
                <tr>
                    <td>王小淘</td>
                    <td>小淘</td>
                </tr>           
            </table>
        </body>
    </html>

#### 2.th-表头单元格 ####

> 之前我们通过学习知道，td指的是 **table data cell（表格单元格）**。 但在 `HTML` 中，单元格其实有两种：

*  th 指的是**table header cell（表头单元格）**。
 *  td 指的是**table data cell（表行单元格）**。

（1）语法

<table>
        <caption>表格标题</caption>     
        <tr>                            
            <th>表头单元格1</th>         
            <th>表头单元格2</th>
        </tr>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>           
    </table>

（2）th和td区别

> th 和 td在**本质上都是单元格，但是并不代表两者可以互换**。它们之间具体有以下两种区别：

*  显示上：**浏览器会以粗体和居中来显示 `th 标签`中的内容**，但是 `td 标签`不会。
 *  语义上：**`th标签`用于表头；`td标签`用于表行**。

当然，对于表头单元格，我有可能会使用 td 来代替 th，但不建议这样做。 因为在`HTML`语义化中了解到：**学习** `HTML` **的目的就是在需要的地方使用恰当的标签（也就是语义化）**。

### 四、语义化 ###

> 在这之前我们已经学习了`table、caption、tr、th (表头单元格)、td (表行单元格)`。 为了更深入地对表格进行语义化，HTML引入了 `thead、tbody、tfoot`这三个标签。 `thead、tbody、tfoot`将表格划分为 3 部分：表头、表身、表脚。有了这三个标签，使得**表格语义变得更加良好，结构更清晰，也更具可读性和可维护性**。

#### 1.语法 ####

<table>
        <caption>表格标题</caption>     
        
        <thead>     
            <tr>                            
                <th>表头单元格1</th>         
                <th>表头单元格2</th>
            </tr>
        </thead>
        
        <tbody>     
            <tr>
                <td>表行单元格1</td>
                <td>表行单元格2</td>
            </tr>
        </tbody>
        
        <tfoot>     
            <tr>
                <td>标准单元格1</td>
                <td>标准单元格2</td>
            </tr>
        </tfoot>
    </table>

（1）实际开发

> `tfoot`表脚往往用于**统计数据**。对于`thead、tbody、tfoot`这 3 个标签，不一定全部都用上，比如：`tfoot`就很少用。一般情况下，根据实际需求来使用这 3 个标签。

① 重要性

*  `thead、tbody、tfoot`是表格中非常重要的标签，它们**从语义上区分了表头、表身、表脚**，这使得代码更具语义，千万不要忽视了它们。
 *  此外，还有一个重要作用：**方便分块来控制表格的`CSS`样式**。

Ⅰ.总结

> 对于表格的显示效果来说，`thead、tbody、tfoot`这三个标签加上后和没加之前的效果是一样的，那为何还用使用呢？ 单纯只从显示效果来说，确实加与不加效果都差不多，但是**加上之后会让你的代码更具逻辑性，并且还可以很好地结合**`CSS`**来分块控制样式**。

### 五、rowspan-合并行 ###

> 在`HTML`中，我们可以使用`rowspan属性`来合并行。 所谓的合并行，就是将**纵向的N个单元格**合并成一个。（也可简单理解为上下合并）

#### 1.语法 ####

（1）示例

① 例1

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <title>表格</title>
            <style>
                table,tr,td,th{
                    border: 1px solid #66A9FE;
                }
            </style>
        </head>
        <body>
            <table>
                <caption>合并行</caption>
                <thead>
                    <tr>
                        <th>
                            姓名：
                        </th>
                        <th>
                            王小淘
                        </th>
                    </tr>
                </thead>
                
                <tbody>
                <tr>
                    <td rowspan="2">喜欢的水果：</td>
                    <td>菠萝</td>
                </tr>
                <tr>
                    <td>其它全部水果</td>
                </tr>
                </tbody>
                    
            </table>
        </body>
    </html>

合并行例1.png

### 六、colspan-合并列 ###

> 在`HTML`中，我们可以使用`colspan属性`来合并列。 所谓的合并列，就是将**横向的N个单元格**合并成一个。（也可简单理解为左右合并）

#### 1.语法 ####

（1）示例

① 例1

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">      
            <title>表格</title>
            <style>
                table,tr,td,th{
                    border: 1px solid #00FFFF;
                }
            </style>
        </head>
        <body>
            <table>
                <caption>合并列</caption>
                <thead>                 
                    <tr>
                        <th>
                            姓名
                        </th>
                        <th>
                            数学
                        </th>
                        <th>
                            英语
                        </th>
                        <th>
                            政治
                        </th>
                        <th>
                            专业课
                        </th>
                    </tr>
                </thead>
                
                <tbody>                 
                <tr>
                    <td>王小淘</td>
                    <td>100</td>
                    <td>80</td>
                    <td>80</td>
                    <td>110</td>
                </tr>   
                </tbody>
                
                <tfoot>                 
                    <tr>
                        <td>总成绩</td>
                        <td colspan="4">370</td>
                    </tr>
                </tfoot>
            
            </table>
        </body>
    </html>

合并列例1.png

#### 2.实际开发 ####

> 在实际开发中，合并行与合并列用的很少，忘了的话回过头来看一眼。 对于 `rowspan 和 colspan` ，要从语义上去理解，rowspan表示row span，colspan表示column span。