Wie füge ich Tabellenzellen in HTML zusammen?-HTML-Tutorial-php.cn

Wie füge ich Tabellenzellen in HTML zusammen?

王林

Freigeben： 2023-09-10 16:09:04

nach vorne

3017 Leute haben es durchsucht

Wie füge ich Tabellenzellen in HTML zusammen?

Wir verwenden die Attribute colspan und rowspan, um Zellen in HTML zusammenzuführen. Das rowspan-Attribut gibt die Anzahl der Zeilen an, in denen Zellen zusammengeführt werden sollen, während das colspan-Attribut verwendet wird, um die Anzahl der Spalten anzugeben, in denen Zellen zusammengeführt werden sollen.

Dieses Attribut sollte innerhalb des

-Tags platziert werden.

Grammatik

Hier ist die Syntax zum Zusammenführen von Tabellenzellen in HTML.

<td rowspan="2">cell data</td>

Nach dem Login kopieren

Beispiel

Das Folgende ist ein Beispielprogramm zum Zusammenführen von Tabellenzeilenzellen in HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
   </table>
</body>
</html>

Nach dem Login kopieren

Verwenden Sie das Colspan-Attribut

Mit der folgenden Syntax können wir Spaltenzellen einer Tabelle zusammenführen.

Grammatik

Für Colspan verwenden wir die folgende Syntax.

<td colspan="2">cell data</td>

Nach dem Login kopieren

Beispiel

Das Folgende ist ein Beispielprogramm zum Zusammenführen von Tabellenspaltenzellen in HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Last Name</th>
         <th>Job role</th>
      </tr>
      <tr>
         <td colspan="2" >Tharun chandra</td>
         <td >Content writer</td>
      </tr>
      <tr>
         <td colspan="2">Akshaj Vank</td>
         <td >Content writer</td>
      </tr>
   </table>
</body>
</html>

Nach dem Login kopieren

Beispiel

Das Folgende ist unser Beispielprogramm zum Ausführen von Rowspan und Colspan für eine HTML-Tabelle.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
      <tr>
         <td colspan="2">Welcome to the company</td>
      </tr>
   </table>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie füge ich Tabellenzellen in HTML zusammen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!