Wie lege ich eine horizontale Kopfzeile für eine Tabelle fest?-HTML-Tutorial-php.cn

Wie lege ich eine horizontale Kopfzeile für eine Tabelle fest?

WBOY

Freigeben： 2023-09-01 18:05:02

nach vorne

1180 Leute haben es durchsucht

Tabellen in HTML können einen horizontalen Header und einen vertikalen Header haben. Wir müssen alle in einem einzigen setzen Grammatik

Das Folgende ist die Syntax zum Festlegen eines horizontalen Tabellentitels:

<tr>
   <th> horizontal header1… </th>
   <th> horizontal header2… </th>
</tr>

Nach dem Login kopieren

Die chinesische Übersetzung von
Beispiel 1
lautet:
Beispiel 1

Sehen wir uns nun ein Beispielprogramm zum Festlegen einer horizontalen Kopfzeile für eine Tabelle an.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; padding: 20px; } </style> </head> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th >First Name </th> <th>Job role</th> </tr> <tr> <td ></td> <td ></td> </tr> <tr> <td ></td> <td ></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
Nach dem Login kopieren

Beim Ausführen des obigen Programms wird eine Tabelle mit den horizontalen Überschriften
Vorname
und
Berufsrolle
angezeigt.
Beispiel 2 In diesem zweiten Beispiel versuchen wir nun, ein weiteres dreizeiliges Beispiel mit den horizontalen Überschriften „Name
“, „
Alter
“ und „
Technologie“ zu erstellen −
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; width: 100px; height: 50px; } </style> </head> <body> <h1>Employee Details</h1> <table> <tr> <th>Name</th> <th>Age</th> <th>Technology</th> </tr> <tr> <td>Amit</td> <td>27</td> <td>Database</td> </tr> <tr> <td>Sachin</td> <td>34</td> <td>Marketing</td> </tr> </table> </body> </html>
Nach dem Login kopieren
Folgend ist die Ausgabe für das obige Beispielprogramm. Beispiel 3
Wir können auch einen vertikalen Titel für die Tabelle festlegen. Unten sehen Sie ein Beispiel für die Erstellung einer vertikalen Kopfzeile für eine Tabelle.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> table,tr,th,td { border:1px solid black; padding: 20px; } </style> </head> <body> <table style="width: 100%"> <tr> <th>First Name </th> <td></td> <td></td> </tr> <tr> <th>Last Name</th> <td ></td> <td></td> </tr> <tr> <th>Job role</th> <td ></td> <td></td> </tr> </table> </body> </html>
Nach dem Login kopieren

Folgend ist die Ausgabe für das obige Beispielprogramm.

Das obige ist der detaillierte Inhalt vonWie lege ich eine horizontale Kopfzeile für eine Tabelle fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!