HTML 创建可编辑的表格

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

Vue React JavaScript Angular CSS HTML

HTML 创建可编辑的表格

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

本文将讨论创建 HTML 表格以及如何使其单元格可编辑。

在 HTML 表格中创建单元格

在创建网页时，有时我们可能需要创建表格来表示数据。 HTML 为我们提供了 table 属性来实现这一点。

在表格中创建单元格的语法如下。

<table>
    <tr>
        <td>This is a cell</td>
    </tr>
</table>

在上面的代码中，我们可以看到几个元素。 <tr> 用于创建表格行；在此内部，我们使用了一个 <td> 元素，用于在行内构建单元格。

完整的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>HTML Table</title>
</head>
    <body>
        <table>
            <tr>
                <td>This is a cell</td>
            </tr>
        </table>
    </body>
</html>

如您所见，我们检索了一个包含一个单元格的表格。但是它显示为纯文本，因为我们没有给它任何样式。

让我们向单元格添加一些样式。

table {
    background-color: rgb(139, 220, 247);
    width: auto;
}

td{
    border: 1px solid #000000;
    text-align: center;
    padding: 16px;
}

在上面的输出中，我们现在可以将其视为表格单元格。

在 HTML 中创建可编辑表格

在某些情况下，用户可能需要更改表格单元格的内容。

HTML 表格元素提供了 contenteditable 属性，用户可以在其中创建可编辑的单元格。使用它，我们可以轻松地编辑表格单元格。

使用 contenteditable 属性使单元格可编辑的语法如下。

语法：

contenteditable = "value"

我们可以给 true 或 false 作为 contenteditable 属性的值。如果值为真，则单元格可以编辑，而如果值为假，则无法编辑单元格。

让我们看看如何使用具有相同样式的前面的示例来做到这一点。您可以相应地更改单元格的数据。

<table>
    <tr>
        <td contenteditable="true">This is a cell</td>
    </tr>
</table>

在上面的示例代码中，我们在 <td> 元素中添加了 contenteditable 属性。然后，我们将值设置为 true。

结果，我们可以有一个可编辑的单元格，如下所示。要编辑单元格，我们可以双击它。

现在，让我们观察一下当我们将 false 作为 contenteditable 属性的值时会发生什么。

<table>
    <tr>
        <td contenteditable="false">This is an editable cell</td>
    </tr>
</table>

如您所见，表格的数据或内容不再可编辑。真值和假值在不同场合都很重要。

一些开发人员使用表格创建表单和其他内容。有时一些数据需要保持原样，这就是开发人员可以使用假值的地方。

如果有用户可以更改的数据，如上例所示，我们可以使用 true 选项。

现在，让我们制作一个可以同时使用 true 和 false 的表格。

例如，假设一位讲师想要网页上的一个表来存储三个学生的数据，我们将实现它。他需要Student ID, Name, Grade作为列标题，我们在Name和Grade列下添加的数据必须是可编辑的。

原因是他可能打错了名字。此外，成绩可能需要更改，因为学生可能会要求重新更正。

让我们使用以下代码块创建一个表。

<table>
    <!-- Creating the first row as table headers -->
    <tr>
        <th>Student ID</th>
        <th>Name</th>
        <th>Grade</th>
    </tr>
    <!-- Creating the second row -->
    <tr>
        <td>001</td>
        <td>Simon Nick</td>
        <td>A</td>
    </tr>
    <!-- Creating the third row -->
    <tr>
        <td>002</td>
        <td>John Robbert</td>
        <td>C</td>
    </tr>
    <!-- Creating the fourth row -->
    <tr>
        <td>007</td>
        <td>Chris Henderson</td>
        <td>B</td>
    </tr>
</table>

我们可以通过在表格中添加一些样式来单独查看表格单元格。

table {
    background-color: beige;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 50%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

现在，我们的表格看起来比以前更明显了。

我们的下一步是设置可编辑单元格。让我们将 contenteditable 属性添加到具有相关值的相关单元格，如下所示。

<table>
    <!-- Creating the first row as table headers -->
    <tr>
        <th>Student ID</th>
        <th>Name</th>
        <th>Grade</th>
    </tr>
    <!-- Creating the first row as table headers -->
    <tr>
        <td contenteditable="false">001</td>
        <td contenteditable="true">Simon Nick</td>
        <td contenteditable="true">A</td>
    </tr>
    <!-- Creating the first row as table headers -->
    <tr>
        <td contenteditable="false">002</td>
        <td contenteditable="true">John Robbert</td>
        <td contenteditable="true">C</td>
    </tr>
    <!-- Creating the first row as table headers -->
    <tr>
        <td contenteditable="false">007</td>
        <td contenteditable="true">Chris Henderson</td>
        <td contenteditable="true">B</td>
    </tr>
</table>