Erstellen Sie eine bearbeitbare HTML-Tabelle
- Erstellen Sie eine Zelle in einer HTML-Tabelle
- Erstellen Sie eine bearbeitbare Tabelle in HTML
- Abschluss
In diesem Artikel wird erläutert, wie Sie HTML-Tabellen erstellen und ihre Zellen bearbeitbar machen.
Erstellen Sie eine Zelle in einer HTML-Tabelle
Beim Erstellen von Webseiten müssen wir manchmal Tabellen zur Datendarstellung erstellen. HTML stellt uns dafür das Attribut table zur Verfügung.
Die Syntax zum Erstellen einer Zelle in einer Tabelle lautet wie folgt.
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
Im obigen Code sehen wir mehrere Elemente. <tr> dient zum Erstellen von Tabellenzeilen; darin haben wir ein <td>-Element verwendet, das zum Aufbau von Zellen innerhalb der Zeile verwendet wird.
Vollständiger HTML-Code:
<!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>
Wie Sie sehen können, haben wir eine Tabelle mit einer Zelle abgerufen. Aber es wird als reiner Text angezeigt, weil wir ihm keinen Stil gegeben haben.
Fügen wir der Zelle einige Stile hinzu.
table {
background-color: rgb(139, 220, 247);
width: auto;
}
td{
border: 1px solid #000000;
text-align: center;
padding: 16px;
}
In der obigen Ausgabe können wir es jetzt als Tabellenzelle sehen.
Erstellen Sie eine bearbeitbare Tabelle in HTML
In einigen Fällen müssen Benutzer möglicherweise den Inhalt der Zellen einer Tabelle ändern.
Das HTML-Element table stellt die Eigenschaft contenteditable bereit, mit der Benutzer bearbeitbare Zellen erstellen können. Damit können wir eine Tabellenzelle einfach bearbeiten.
Die Syntax, um eine Zelle mit dem Attribut contenteditable bearbeitbar zu machen, lautet wie folgt.
Syntax:
contenteditable = "value"
Als Wert des Attributs contenteditable können wir true oder false angeben. Die Zelle kann bearbeitet werden, wenn der Wert true ist, wohingegen wir die Zelle nicht bearbeiten können, wenn der Wert false ist.
Mal sehen, wie wir das mit dem vorherigen Beispiel mit denselben Stilen machen können. Sie können die Daten der Zelle entsprechend ändern.
<table>
<tr>
<td contenteditable="true">This is a cell</td>
</tr>
</table>
Im obigen Beispielcode haben wir das Attribut contenteditable innerhalb des Elements <td> hinzugefügt. Dann setzen wir den Wert auf true.
Als Ergebnis können wir eine bearbeitbare Zelle wie unten haben. Um die Zelle zu bearbeiten, können wir darauf doppelklicken.
Lassen Sie uns nun beobachten, was passiert, wenn wir false als Wert des contenteditable-Attributs angeben.
<table>
<tr>
<td contenteditable="false">This is an editable cell</td>
</tr>
</table>
Wie Sie sehen, können die Daten oder der Inhalt der Tabelle nicht mehr bearbeitet werden. Sowohl wahre als auch falsche Werte sind bei verschiedenen Gelegenheiten wichtig.
Einige Entwickler erstellen Formulare und andere Dinge mithilfe von Tabellen. Manchmal müssen einige Daten so bleiben, wie sie sind, und hier können die Entwickler den Wert false verwenden.
Wenn es Daten gibt, die ein Benutzer ändern kann, wie im obigen Beispiel, können wir die Option true verwenden.
Lassen Sie uns nun eine Tabelle erstellen, in der wir sowohl true als auch false verwenden können.
Nehmen wir zum Beispiel an, ein Dozent möchte eine Tabelle auf einer Webseite, in der die Daten von drei Studenten gespeichert werden, und wir werden das umsetzen. Er benötigt als Spaltenüberschriften Studenten-ID, Name und Note, und die Daten, die wir unter den Spalten Name und Note hinzufügen, müssen editierbar sein.
Der Grund ist, dass er den Namen möglicherweise falsch eingibt. Außerdem müssen die Noten möglicherweise geändert werden, da die Schüler möglicherweise eine erneute Korrektur verlangen.
Lassen Sie uns eine Tabelle mit dem folgenden Codeabschnitt erstellen.
<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>
Wir können die Tabellenzellen separat sehen, indem wir der Tabelle einige Stile hinzufügen.
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;
}
Jetzt sieht unsere Tabelle deutlicher aus als zuvor.
Unser nächster Schritt besteht darin, bearbeitbare Zellen festzulegen. Fügen wir den relevanten Zellen mit den relevanten Werten wie unten inhaltlich bearbeitbare Attribute hinzu.
<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>
Wie im obigen Code haben wir contenteditable-Attribute mit den true-Werten auf alle Zellen gesetzt, die sich auf Name und Grad beziehen.
Wenn wir nun den obigen Code ausführen, können alle Zellen außer den Zellen Studenten-ID wie unten bearbeitet werden.
Ausgabe beim Bearbeiten der Namen und Noten:
Ausgabe beim Versuch, die Zellen Student ID zu bearbeiten:
Wie Sie sehen, können wir die Zellen Student ID nicht bearbeiten, da der Wert von contenteditable false ist.
Abschluss
In diesem Artikel haben wir anhand einiger Beispiele besprochen, wie Sie eine HTML-Tabelle erstellen und diese Tabelle bearbeitbar machen. Außerdem haben wir gelernt, wie man contenteditable-Attribute zusammen mit den Werten true und false verwendet.
Wenn Sie eine bearbeitbare Zelle wünschen, weisen Sie als Wert true zu, und wenn Sie diese Funktion nicht benötigen, setzen Sie als Wert false oder entfernen Sie das Attribut.
Wir können Zellen mit JavaScript bearbeitbar machen, aber dies ist ein einfacher Weg, um das Ziel zu erreichen.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.