HTML 创建具有不同列大小的表格

当前位置：主页 > 学无止境 > WEB前端 > HTML >

Vue React JavaScript Angular CSS HTML

HTML 创建具有不同列大小的表格

作者：迹忆客最近更新：2023/05/05 浏览次数：

本文介绍了如何在 HTML 和 CSS 中修改列宽以满足我们的规范。由于 HTML5 弃用了各种标签和属性，我们将介绍一些用于实现所需功能的替代策略。

本教程将介绍如何使用内联和内部 CSS 自定义 HTML 表格。

设置 HTML 表格列的大小

我们经常需要为我们的网页开发具有多个列和行的表格。有时我们需要为 HTML 表格的每一列设置不同的宽度。

让我们看看如何创建一个包含不同宽度列的表格。在 HTML5 之前，table 标签及其关联标签（如 <th>）具有宽度属性，允许开发人员设置列的所需宽度。

<html>
    <head>
        <style>
            table, th, td {
                border:1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table style="width:100%">
            <tr>
                <th width="15%">ID</th>
                <th width="70%">Name</th>
                <th width="15%">Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jackson</td>
                <td>40</td>
            </tr>
        </table>
    </body>
</html>

上面的 HTML 代码使用了 <th> 标签内的 width 属性。表格宽度设置为 100%。

我们希望 Name 列比其他列宽。因此，我们将 70% 的宽度分配给名称列，将 15% 的宽度分配给其他两列。

将所有数字 70 + 15 + 17 = 100 相加，我们再次得到 100。

您可以根据需要将表格宽度设置为任意百分比。这个宽度百分比取决于 <table> 的父标签，在我们的例子中是 <body> 标签。

在 HTML5 中，width 属性已被弃用。 HTML 不再支持已弃用的属性和标签。

HTML5 中的这一变化鼓励开发人员将 CSS 用于任何需要的样式。让我们看看如何使用 CSS 设置表格及其列宽。

使用内联 CSS 设置表格列宽

由于我们不能在 <th> 内使用 width 属性，我们仍然可以使用标签内的样式来设置表格样式，这称为内联样式。您可以为每列指定不同的宽度百分比。

检查下面的代码以清楚地理解它。

<html>
    <head>
        <style>
            table, th, td {
                border:1px solid black;
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <table style="width:100%">
            <tr>
                <th style="width:10%">ID</th>
                <th style="width:40%">First Name</th>
                <th style="width:40%">Last Name</th>
                <th style="width:10%">Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>Doe</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jackson</td>
                <td>Will</td>
                <td>40</td>
            </tr>
        </table>
    </body>
</html>

在上面的代码中，我们为每列分配了 10、40、40 和 10 的宽度百分比。把这些数字加起来就是 100。

由于我们将表格宽度设置为 100%，因此我们必须将每一列划分在相同的范围内。

使用内部 CSS 设置表格列宽

我们使用内联 CSS 在上面的代码中设置了列宽。但是内联 CSS 是不推荐的，因为如果我们想要在多个网页区域上使用相同的功能，我们必须做大量的重写。

将 HTML 和 CSS 代码分开是一种专业做法。那么让我们看看如何使用内部 CSS 为表格列设置样式。

内部 CSS 写在 HTML head 标签内的 style 标签内。

方法 1：使用 CSS 类

最简单的方法之一是为每个 <th> 标签分配一个类，然后在 style 标签中为它们应用样式。就是这样。

<html>
    <head>
        <style>
            table{
                width: 100%
            }
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            .name {
                width: 70%
            }
            .id, .age {
                width: 15%
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th class="id">ID</th>
                <th class="name">Name</th>
                <th class="age">Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jackson</td>
                <td>40</td>
            </tr>
        </table>
    </body>
</html>

很简单。但是这种方法在列数较多的情况下效率不高。

假设我们有一个包含 10 或 20 列的表格，并且希望每列的宽度不同。为每个标签分配类并为所有标签设置样式将是一项繁重的任务。

应该有一些方法可以做到这一点，而无需为标签提供类并直接在样式标签中调用它们。让我们在下面的方法中看看这个技术。

方法 2：使用CSS伪类选择器

让我们看看另一种使用更好、更高效的代码来实现预期输出的方法。

<html>
    <head>
        <style>
            table{
                width: 100%
            }
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            th:nth-child(1) {
                width: 5%
            }
            th:nth-child(2) {
                width: 70%
            }
            th:nth-child(3) {
                width: 25%
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jackson</td>
                <td>40</td>
            </tr>
        </table>
    </body>
</html>

让我们了解一下我们在代码中做了什么。 CSS 选择器匹配每个父元素的第 n 个子元素。

CSS 伪类选择器 :nth-child(n) 用于根据元素在一对兄弟中的位置来比较元素。 n 可以是任何数字或关键字，如奇数或偶数。

我们选择 style 标签中的 <th> 标签，并在其上调用 nth-child 选择器。 nth-chid(1) 表示它将选择 ID 列，nth-child(2) 将选择 Name 列，依此类推。

这样，您可以自定义列的宽度，而无需为每个标签分配一个类。

这里更重要的一点是，如果你指定了ID和Age列的宽度，就不需要选择Name列的宽度百分比，因为剩余的宽度会自动分配给它，它会给我们同样的结果。

检查下面的例子。

<html>
    <head>
        <style>
            table{
                width: 100%
            }
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
            }
            th:nth-child(1) {
                width: 5%
            }
            th:nth-child(3) {
                width: 25%
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>1</td>
                <td>John</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jackson</td>
                <td>40</td>
            </tr>
        </table>
    </body>
</html>