Heim Web-Frontend HTML-Tutorial Ausführliche Erläuterung der Tabelle in HTML

Ausführliche Erläuterung der Tabelle in HTML

May 16, 2018 am 11:03 AM
html table 详解

In diesem Artikel werden hauptsächlich Tabellen in HTML vorgestellt. Ich hoffe, dass er für alle hilfreich ist.

  1. Gewöhnliche Tabelle, eine einfache HTML-Tabelle besteht aus dem Tabellenelement und den Elementen tr, td und th, wobei tr sich auf die Tabellenzeile bezieht, td sich auf die Zelle bezieht und th die Tabelle definiert Kopfzeile. Lassen Sie die leeren Zellen einfach leer oder verwenden Sie  .

<table>	
<tr>		
<th>表头</th>		
<th>表头</th>		
<th>表头</th>	
</tr>	
<tr>		
<td>单元格1
</td>		
<td></td>		
<td>单元格3</td>	
</tr>	
</table>
Nach dem Login kopieren

2. Tabelle mit Rändern. Das Rahmenelement stellt den Rand der Tabelle dar. Die Standardeinheit ist px. Cellspcing stellt den inneren Rand/Auffüllabstand dar.

<table border="1" cellspacing="10" cellpadding="30">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>
Nach dem Login kopieren

3. Tabellen mit Hintergrundbildern oder Farben, Hinweis: bgcolor bedeutet Farbe, und Hintergrund kann keine Farbe direkt zu HTML hinzufügen (Dieser Satz ist falsch. Ja, das Die verwendete Methode ist falsch. Das direkte Schreiben mit dem Inline-Stil ist style="background:red" oder style="background-color:red"). Das Hinzufügen zur Tabelle bedeutet, dass die gesamte Tabelle festgelegt wird in tr oder td dient dazu, einzelne Zeilen oder Zellen festzulegen.



<table border="1">
		<tr>
			<th>表头</th>
			<th>表头</th>
			<th>表头</th>
		</tr>
		<tr>
			<td>单元格1</td>
			<td>单元格2</td>
			<td>单元格3</td>
		</tr>
	</table>
Nach dem Login kopieren

4. Bei Tabellen, die sich über Zeilen und Spalten erstrecken, bedeutet rowspan zeilenübergreifend, colspan spaltenübergreifend , und über Wenn die Spalte gelöscht wird, wird sie in der aktuellen Tabellenzeile gelöscht. Wenn sie sich über mehrere Zeilen erstreckt, wird sie in der Tabellenzeile darunter gelöscht.

<table border="1">
	<caption>跨行</caption>
		<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>
Nach dem Login kopieren
rreee

Eine Tabelle mit einem Titel stellt den Titel der Tabelle dar. Sie können jedoch auch andere Tags verwenden, um den Tabellentitel zu finden Die Standardeinstellung ist „An der Mitte der Tabelle ausrichten“.


6. Ordnen Sie Inhalte in Tabellenzellen an, indem Sie beispielsweise Absätze, Listen usw. in Zellen hinzufügen.

<table border="1">
	<caption>跨列</caption>
		<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>
Nach dem Login kopieren

7.frame Rahmenattribut, gibt an, welcher Teil des äußeren Rahmens sichtbar ist. //Wird vorerst nicht verwendet.

Verwandte Empfehlungen:

Implementierung der Bildlaufleiste für HTML-Seitentabellen

Detaillierte Erläuterung der ElTableColumn-Erweiterungsmethode

Verwandte Operationen der SQL ALTER TABLE-Anweisung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Tabelle in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Tabellenrahmen in HTML Tabellenrahmen in HTML Sep 04, 2024 pm 04:49 PM

Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.

HTML-Rand links HTML-Rand links Sep 04, 2024 pm 04:48 PM

Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.

Verschachtelte Tabelle in HTML Verschachtelte Tabelle in HTML Sep 04, 2024 pm 04:49 PM

Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.

HTML-Tabellenlayout HTML-Tabellenlayout Sep 04, 2024 pm 04:54 PM

Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.

HTML-Eingabeplatzhalter HTML-Eingabeplatzhalter Sep 04, 2024 pm 04:54 PM

Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.

HTML-geordnete Liste HTML-geordnete Liste Sep 04, 2024 pm 04:43 PM

Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele

Text in HTML verschieben Text in HTML verschieben Sep 04, 2024 pm 04:45 PM

Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.

HTML-Onclick-Button HTML-Onclick-Button Sep 04, 2024 pm 04:49 PM

Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.

See all articles