Heim > Web-Frontend > HTML-Tutorial > So erstellen Sie eine Datenanzeigeseite mit HTML-Tabellenlayout

So erstellen Sie eine Datenanzeigeseite mit HTML-Tabellenlayout

王林
Freigeben: 2023-10-19 10:42:19
Original
1718 Leute haben es durchsucht

So erstellen Sie eine Datenanzeigeseite mit HTML-Tabellenlayout

So verwenden Sie das HTML-Tabellenlayout zum Erstellen einer Datenanzeigeseite

HTML-Tabelle ist ein gängiges Layout-Tool, das zum Erstellen von Datenanzeigeseiten verwendet werden kann. Durch die sinnvolle Nutzung der Struktur und Attribute der Tabelle können Sie eine klare, leicht lesbare und schöne Datenanzeigeseite erstellen.

1. Grundlegende Tabellenstruktur

In HTML bestehen Tabellen aus den Tags table, tr und td. Das Tag „table“ dient zum Definieren einer Tabelle, das Tag „tr“ zum Definieren von Tabellenzeilen und das Tag „td“ zum Definieren von Tabellenzellen. Hier ist ein Beispiel für eine grundlegende Tabellenstruktur:

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>
Nach dem Login kopieren

Im obigen Beispiel wird die Titelleiste mit dem Tag th und die Datenzeilen mit dem Tag td definiert. Das th-Tag wird normalerweise in der ersten Zeile einer Tabelle verwendet, um Titel oder Spaltennamen anzuzeigen, während das td-Tag zur Anzeige gewöhnlicher Tabellendaten verwendet wird.

2. Legen Sie den Tabellenstil fest.

Der Stil der Tabelle kann über CSS festgelegt werden. Für die Tags table, tr und td können verschiedene Stile festgelegt werden, um den Zweck der Anpassung des Tabellenstils zu erreichen. Hier ist ein einfaches Beispiel:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>
Nach dem Login kopieren

Im obigen Beispiel setzen wir die Breite der Tabellenbeschriftung auf 100 %, sodass sie die Breite des übergeordneten Containers ausfüllt Die Tabelle kann in A zusammengeführt werden; sowohl die Tags „th“ als auch „td“ legen den Rahmenstil fest und der Abstand „th“ legt auch die Hintergrundfarbe und die Schriftfettigkeit fest.

3. Zellen zusammenführen

In einigen Fällen müssen wir möglicherweise Zellen zusammenführen, um komplexere Daten anzuzeigen. HTML stellt die Attribute colspan und rowspan zum Zusammenführen von Zellen bereit. Hier ist ein Beispiel für das Zusammenführen von Tabellenzellen mithilfe des colspan-Attributs:

<table>
  <tr>
    <th colspan="2">合并单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
</table>
Nach dem Login kopieren

Im obigen Beispiel verwenden wir colspan="2", um die Titelleistenzellen der ersten Zeile über zwei Spalten hinweg zusammenzuführen, und verwenden rowspan="2" Die Zellen in der ersten Spalte werden über beide Zeilen hinweg zusammengeführt.

4. Verwenden Sie Tabellenköpfe und Tabellenkörper, um Daten zu gruppieren. Bei großen Datensätzen können wir die Tabellenköpfe und Tabellenkörper in die Tags einfügen. Dadurch wird die Tabelle strukturierter und die Leistung beim Rendern wird besser optimiert. Hier ist ein Beispiel:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
Nach dem Login kopieren

Im obigen Beispiel verwenden wir das Tag , um den Kopf der Tabelle zu definieren, und das Tag

, um den Hauptteil der Tabelle zu definieren.

Durch die richtige Anwendung der oben genannten Techniken können wir schöne und leicht lesbare Datenanzeigeseiten mit HTML-Tabellenlayout erstellen. Natürlich können wir entsprechend den tatsächlichen Anforderungen weitere CSS-Stile hinzufügen, um die Tabelle zu verschönern, z. B. das Festlegen der Hintergrundfarbe, des Rahmenstils usw.

Ich hoffe, dass der obige Inhalt Ihnen bei der Erstellung einer Datenanzeigeseite hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Datenanzeigeseite mit HTML-Tabellenlayout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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