Heim >Web-Frontend >HTML-Tutorial >Legen Sie die Anzahl der Spalten in HTML fest, die sich erstrecken sollen
Legen Sie die Anzahl der Spalten in HTML fest, die sich erstrecken sollen
- WBOYnach vorne
- 2023-09-04 22:13:021452Durchsuche
Die Aufgabe, die wir in diesem Artikel ausführen werden, besteht darin, die Anzahl der Spalten festzulegen, die sich in HTML erstrecken sollen.
Bei Verwendung des
Colspan-Attribut
In HTML wird die Anzahl der Spalten, die eine Zelle umfassen soll, durch das colspan-Attribut angegeben. Dadurch kann eine einzelne Tabellenzelle mehrere Spalten oder Zellen umfassen. Es bietet die gleichen Funktionen wie Tabellenkalkulationsprogramme, beispielsweise die Funktion „Zellen zusammenführen“ von Excel.
Grammatik
Das Folgende ist die Syntax des Colspan-Attributs.
<td colspan="number">
Lassen Sie uns in das folgende Beispiel eintauchen, um die Colspan-Eigenschaft besser zu verstehen.
Die chinesische Übersetzung vonBeispiel 1
lautet:Beispiel 1
Im folgenden Beispiel verwenden wir colspan, um Zellen der Tabelle zusammenzuführen.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
table,
tbody,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>NAME</th>
<th>Amount</th>
</tr>
<tr>
<td>Surya</td>
<td>143</td>
</tr>
<tr>
<td>Karthik</td>
<td>420</td>
</tr>
<tr>
<td colspan="2">Total Amount : 563</td>
</tr>
</table>
</body>
</html>
Wenn das Skript ausgeführt wird, generiert es eine Ausgabe mit einer Tabelle bestehend aus den im Skript angegebenen Daten sowie einer Spalte mit der Gesamtmenge auf der Webseite.
Die chinesische Übersetzung vonBeispiel 2
lautet:Beispiel 2
Sehen wir uns das folgende Beispiel an, in dem wir das
<!DOCTYPE html>
<html>
<head>
<style>
article {
columns: 3;
}
h1 {
column-span: all;
}
</style>
</head>
<body>
<article>
<h1>spanning all of the columns</h1>
<p>Mahendra Singh Dhoni is an Indian former professional cricketer who was captain of the Indian national cricket team in limited-overs formats</p>
<p>Virat Kohli is an Indian international cricketer and former captain of the India national cricket team.He plays for Delhi in domestic cricket</p>
<p>Hardik Himanshu Pandya is an Indian international cricketer who plays for the India national cricket team at the international level and the Baroda cricket team domestically.</p>
</article>
</body>
</html>
Wenn Sie das obige Skript ausführen, wird eine Ausgabe generiert, die den im Skript verwendeten Text sowie den Spaltenbereich auf der Webseite enthältDas obige ist der detaillierte Inhalt vonLegen Sie die Anzahl der Spalten in HTML fest, die sich erstrecken sollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!