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

WBOY
Freigeben: 2023-09-04 22:13:02
nach vorne
1445 Leute haben es durchsucht

Legen Sie die Anzahl der Spalten in HTML fest, die sich erstrecken sollen

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

-Elements kann dies durch die Verwendung des colspan-Attributs erreicht werden. Daher kann sich eine einzelne Tabellenzelle nun über mehrere Spalten oder Zellenbreiten erstrecken. Schauen wir uns den Artikel an, um mehr über das Colspan-Attribut zu erfahren.

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">
Nach dem Login kopieren

Lassen Sie uns in das folgende Beispiel eintauchen, um die Colspan-Eigenschaft besser zu verstehen.

Die chinesische Übersetzung von

Beispiel 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>
Nach dem Login kopieren

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 von

Beispiel 2

lautet:

Beispiel 2

Sehen wir uns das folgende Beispiel an, in dem wir das

-Tag zusammen mit colspan verwendet haben.

<!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>
Nach dem Login kopieren
Wenn Sie das obige Skript ausführen, wird eine Ausgabe generiert, die den im Skript verwendeten Text sowie den Spaltenbereich auf der Webseite enthält

Das 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!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage