Heim >Web-Frontend >HTML-Tutorial >Wie lege ich eine horizontale Kopfzeile für eine Tabelle fest?

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

WBOY
WBOYnach vorne
2023-09-01 18:05:021188Durchsuche

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: Wie lege ich eine horizontale Kopfzeile für eine Tabelle fest?

<tr>
   <th> horizontal header1… </th>
   <th> horizontal header2… </th>
</tr>
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>

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

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen