Grundlegendes Lern-Tutorial zum Tabellen-Tag in HTML

Die Verwendung des Tabellen-Tags zum Anzeigen von Tabelleninhalten im Web ist eine der grundlegendsten Funktionen von HTML. Hier werfen wir einen Blick auf das grundlegende Lern-Tutorial des Tabellen-Tags in HTML

Die Tag-Zusammensetzung der Tabelle
Die Tabelle in HTML besteht aus

Zeilen in der Tabelle werden mit dem Tag definiert. Das -Tag ist eine Unterklasse des -Tags. Das -Tags Trennen Sie die Spalten und bilden Sie ein vollständiges Formular.
Die Tag-Kombinationsbeziehung der Tabelle lautet:

<table>  
<tr>  
<td>我是单元格1</td>  
<td>我是单元格2</td>  
</tr>  
</table>

Es können beliebige HTML-Tags wie Text, Bilder, Listen, Absätze, Formulare, horizontale Linien usw. eingefügt werden in die Tabelle und kann sogar für das Seitenlayout verwendet werden. Das Tabellenlayout weist jedoch Probleme wie zu lange Coderedundanz, Nichteinhaltung von HTML-Spezifikationen und unfreundliche Suchmaschinen auf. Daher wird empfohlen, keine Tabellen für das Seitenlayout zu verwenden, es sei denn, eine Tabelle wird auf der Seite wirklich benötigt.
Die übrigen Elemente

und werden aufgrund der schlechten Browserunterstützung selten verwendet.

Tabellen- und Rahmenattribute
Die Tabelle selbst kann das Rahmenattribut definieren, um die Breite des Tabellenrandes zu bestimmen. Der Wert dieses Attributs wird standardmäßig in numerischen Einheiten angezeigt, z as border="1" Der Wert ist in px. Beachten Sie, dass Sie nach dem Randwert keine Einheit hinzufügen, da der Wert sonst nicht korrekt erkannt wird.

Tabellenkopf
In

-Tag wird zum Definieren der Spalten der Tabelle verwendet. Das	-Tag ist ebenfalls eine Unterklasse des
,

können Sie den Tag -Tag. Bei einer Tabelle ist die Kopfzeile nicht notwendig und kann bei Bedarf eingefügt werden. Der Text innerhalb des

festlegen ;tr>-Tag Es gehört zur gleichen Ebene und der Header erscheint normalerweise vor dem

-Tags wird automatisch fett dargestellt.

Zusammenführen von Zellen
Das Zusammenführen von Zellen wird in vertikales Zusammenführen und horizontales Zusammenführen unterteilt. Beim Zusammenführen müssen Sie feststellen, ob in anderen Zeilen und Spalten entsprechende Anzahlen von Zellen vorhanden sind .
Beim horizontalen Zusammenführen von Zellen wird das Attribut colspan verwendet, dessen Wert eine Zahl ist, die die Anzahl der zusammenzuführenden Zellen bestimmt. Beispielsweise bedeutet colspan="2", dass zwei Zellen rechts zusammengeführt werden.
Beim vertikalen Zusammenführen von Zellen wird das Attribut rowspan verwendet, das mit dem horizontalen Zusammenführungsattribut identisch ist. Es bestimmt auch die Anzahl der Zellen, die in numerischer Form zusammengeführt werden sollen. Rowspan="2" bedeutet beispielsweise das Zusammenführen von zwei Zellen nach unten.
Beispiel-Demonstrationscode:

<table border=“1”>  
<tr>  
<th>姓名</th>  
<th colspan=“2”>电话</th>  
</tr>  
<tr>  
<td>Bill Gates</td>  
<td>555 77 854</td>  
<td>555 77 855</td>  
</tr>  
</table><h4>横跨两行的单元格：</h4>  
<table border=“1”>  
<tr>  
<th>姓名</th>  
<td>Bill Gates</td>  
</tr>  
<tr>  
<th rowspan=“2”>电话</th>  
<td>555 77 854</td>  
</tr>  
<tr>  
<td>555 77 855</td>  
</tr>  
</table>

Beispiel-Demonstrationseffekt:

Zellrand
Die Tabelle verfügt über eine Auffüllfunktion ähnlich dem Auffüllstil. Durch die Definition des cellpadding-Attributs innerhalb des

-Tags können Sie den Abstand für alle -Beschriftungen 10 Pixel beträgt

Zellen Zellenabstand
Der Abstand zwischen den Zellen wird durch die Definition des äußeren Rands des festgelegt Mit dem cellspacing-Attribut im

-Elemente festlegen. Der Parameter des Cellpadding-Attributs besteht darin, dass der Wert in Form einer Zahl vorliegt, um die Größe des Randes zu bestimmen. Cellpadding="10" bedeutet beispielsweise, dass der innere Rand aller

-Tag können Sie den Rand des -Tags festlegen. Dieses Attribut bestimmt auch die Größe der Ränder in Form von Zahlen. Cellspacing="10" bedeutet beispielsweise, dass die Ränder aller -Tags 10 Pixel betragen.

Hintergrund für die Tabelle
Die Tabelle kann über das Hintergrundattribut ein beliebiges Bild als Hintergrund für die Tabelle oder Zelle festlegen. Seine Verwendung ist dem Hintergrund in CSS sehr ähnlich. Legen Sie den entsprechenden Bildpfad für den Hintergrund fest, damit in der Zelle das entsprechende Bild angezeigt wird. Beispiel: background="table_bg.gif"

Ausrichtung des Tabelleninhalts
Die Ausrichtung von Tabellen ist in horizontale Ausrichtung und vertikale Ausrichtung unterteilt. Dies sind das align-Attribut bzw. das valign-Attribut. Fügen Sie diese beiden Attribute in das entsprechende

-Tag ein, um die Ausrichtung von Text oder Bildern in der Zelle abzuschließen.
Die horizontale Ausrichtung hat drei Werte: links, Mitte und rechts.
Die vertikale Ausrichtung hat ebenfalls drei Werte: oben, Mitte, unten und Grundlinie.
Grundlinienausrichtung ist möglicherweise nicht wörtlich zu verstehen. Tatsächlich bedeutet Grundlinienausrichtung, dass der Text im oberen mittleren Teil der Tabelle statt in der Mitte erscheint. Wenn der Text nicht groß ist, ist der Effekt ähnlich wie bei „Mitte“, etwas höher als bei „Mitte“.

PS: Die Table-Layout-Anweisung in CSS
kann verwendet werden, um den Stil der Tabellenanzeige anzugeben, z. B.

CSS-CodeInhalt in die Zwischenablage kopieren

1. Tabelle { Tabellenlayout : fest }

Es kann drei Werte annehmen:
* automatisch (Standard)
* fest
* erben
auto bedeutet, dass die Größe der Zelle durch den Inhalt bestimmt wird. Fest bedeutet, dass die Größe der Zelle festgelegt ist und durch die erste Zelle mit einer bestimmten Größe bestimmt wird. Wenn nicht alle Zellen eine bestimmte Größe haben, wird sie durch die Standardgröße der ersten Zelle bestimmt überschreitet die Zelle. Die Größe des Rasters wird durch den Überlaufbefehl in CSS gesteuert. Microsoft behauptet, dass mit diesem Befehl die Anzeigegeschwindigkeit der Tabelle um das Hundertfache beschleunigt werden kann.
Um die Tabellenanzeige zu beschleunigen, ist es übrigens am besten, die Breite und Höhe der Tabelle im CSS (oder die Breiten- und Höhenattribute des Tabellen-Tags) vorab anzugeben.

Weitere verwandte Artikel zum grundlegenden Lern-Tutorial für Tabellen-Tags in HTML finden Sie auf der chinesischen PHP-Website!