Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle
|
Was ist eine Tabelle? Es besteht aus Zellenzellen. In der Tabelle hängt die Anzahl der <td> von der Anzahl der Zellenzellen ab, die in jeder Zeile von <tr> umschlossen sind! Darüber hinaus wird die Standardtabelle vor dem Hinzufügen des CSS-Styles <style type="text/css">table tr td,th{border:1px solid #000;}; ohne Tabellenzeilen im Browser angezeigt. Allgemeine Methoden zum Schreiben von Tabellen in HTML: A. <tr>…</tr>: eine Zeile einer Tabelle, es gibt so viele Zeilen wie tr-Paare; B. <td>…</td>: eine Zelle einer Tabelle, eine Zeile enthält mehrere Paare von <td>...</td>, die die Anzahl der Spalten in einer Zeile angeben; C. <th>…</th>: eine Zelle im Kopf einer Tabelle, die Tabellenüberschrift, der Text ist standardmäßig fett und zentriert; D. <table summary="Tabelleneinführungstext">/*Der Inhalt der Zusammenfassung wird nicht im Browser angezeigt. Seine Funktion besteht darin, die Lesbarkeit (Semantisierung) der Tabelle zu verbessern, Suchmaschinen ein besseres Verständnis des Tabelleninhalts zu ermöglichen und Bildschirmleseprogramme zu verwenden, um speziellen Benutzern das Lesen des Tabelleninhalts zu erleichtern. */ E.caption-Tag, fügt der Tabelle Titel und Zusammenfassung hinzu. Der Titel wird verwendet, um den Tabelleninhalt zu beschreiben. Der Titel wird oben in der Tabelle angezeigt.
<table border="" cellspacing="" cellpadding="">
<tr><th>Kopfzeile</th></tr>
<tr><td>Daten</td></tr>
</Tabelle>
<table border="" cellspacing="" cellpadding="" summary="">
<Beschriftung></Beschriftung>
<tr><th>Heute ist Freitag/th></tr>
<tr><td>heute ist Freitag</td></tr>
</Tabelle>Kommen wir zurück zum Thema. Der Unterschied zwischen Cellpadding und Cellspacing. Schauen wir uns zunächst den Vergleich zwischen dem folgenden Satz von Tabellenbildern und dem Cellspacing-Code an:
<!DOCTYPE HTML>
<html>
<Kopf>
<meta charset="utf-8">
<title>Unterschiede im Zellenabstand in der Tabelle</title>
<style type="text/css">
Tisch{
Rand unten: 50px;
}
.ceshi{
Rahmenabstand: 20px;
/*Gibt den Abstand zwischen den Rändern benachbarter Zellen in einer Tabelle an. */
}
</Stil>
</Kopf>
<Tabellenbreite="600" Zellenabstand="0" bordercolor="#333" border="1">
<caption>Erste Zelle</caption>
<tr>
<td>Prüfung 1</td>
<td>Prüfung 2</td>
<td>Prüfung 3</td>
</tr>
</Tabelle>
<Tabellenbreite="600" Zellenabstand="20" bordercolor="#333" border="1">
<caption>Die zweite Zelle</caption>
<tr>
<td>Prüfung 1</td>
<td>Prüfung 2</td>
<td>Prüfung 3</td>
</tr>
</Tabelle>
<Tabelle Breite="600" bordercolor="#333" border="1" Klasse="ceshi">
<caption>Die dritte Zelle</caption>
<tr>
<td>Prüfung 1</td>
<td>Prüfung 2</td>
<td>Prüfung 3</td>
</tr>
</Tabelle>
</html>Beim Vergleich des Codes haben die beiden oberen Tabellen nur unterschiedliche Cellspacing-Einstellungen, eine ist „0“ und die andere ist „20“. Das Ergebnis ist, dass der Abstand zwischen jeder Zelle in der ersten Tabelle 0 ist und der Abstand zwischen jeder Zelle in der zweiten Tabelle 20 ist. Erweiterung: Die zweite Tabelle stimmt mit der dritten Tabelle überein, aber die dritte Tabelle legt keinen Cellspacing fest. Wir stellen fest, dass border-spacing: 20px; dasselbe Ergebnis hat wie cellspacing="20", z. B. Zusammenfassung: Das Cellspacing-Attribut wird verwendet, um den Abstand zwischen Zellen in einer Tabelle anzugeben. Der Parameterwert dieser Eigenschaft ist eine Zahl, die die Anzahl der Pixel darstellt, die der Zellenabstand einnimmt.
<!DOCTYPE HTML>
<html>
<Kopf>
<meta charset="utf-8">
<title>Unterschiede im Cellpadding in Tabl-Tabellen</title>
<style type="text/css">
Tisch{
Rand unten: 50px;
}
</Stil>
</Kopf>
<Text>
<table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
<tr>
<th>Ich bin ein glücklicher Zellentisch</th>
<th>Ich bin ein glücklicher Zellentisch</th>
<th>Ich bin ein glücklicher Zellentisch</th>
</tr>
</Tabelle>
<table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
<tr>
<th>Ich bin ein glücklicher Zellentisch</th>
<th>Ich bin ein glücklicher Zellentisch</th>
<th>Ich bin ein glücklicher Zellentisch</th>
</tr>
</Tabelle>
</body>
</html>
Aus den Ergebnissen der Ausführung des obigen Codes können wir erkennen, dass die beiden Tabellen nur unterschiedliche Cellpadding-Codewerte haben. In der ersten Tabelle sind die Wörter „I am a happy cell table“ 0 Pixel von der Zelle entfernt, in der sie sich befinden, weil cellpadding="0" gesetzt ist; in der zweiten Tabelle sind die Wörter „I am a happy cell table“ weit von der Zelle entfernt, in der sie sich befinden, weil cellpadding="20", was bedeutet, dass der Abstand zwischen „I am a happy cell table“ und dem Rand der Zelle, in der es sich befindet, 20 Pixel beträgt. Einfach ausgedrückt bestimmt der Wert von Cellpadding, wie viel Platz die Zellen in der Tabelle von ihren eigenen Grenzen aus einhalten, und die Elemente in den Zellen werden diesen Platz niemals betreten. ||Beachten Sie, dass das Cellpadding-Attribut verwendet wird, um die Größe des Leerraums zwischen dem Zellinhalt und dem Zellrand anzugeben. Der Parameterwert dieser Eigenschaft ist ebenfalls eine Zahl, die die Anzahl der Pixel darstellt, die die Höhe des Leerraums zwischen dem Zelleninhalt und den oberen und unteren Rändern einnimmt, sowie die Anzahl der Pixel, die die Breite des Leerraums zwischen dem Zelleninhalt und den linken und rechten Rändern einnimmt. Zusammenfassung: Cellspacing stellt den Abstand zwischen Zellen dar, und Cellpadding stellt den Abstand zwischen Zellinhalt und Rahmen dar; ersteres ist wie ein Rand, und letzteres ist wie ein Polster; Nest (Zelle) – der Inhalt der Tabelle; Nestpadding (Tabellenfüllung) (Cellpadding) – stellt einen Abstand außerhalb des Nests dar, der verwendet wird, um das Nest und den Nestraum zu trennen; Nestraum (Tabellenabstand) (Cellspacing) – stellt den Abstand zwischen dem Tabellenrahmen und dem Nestpadding dar, der auch der Abstand zwischen dem Nestpadding ist Erweiterung 1: Wie füge ich Zeilen und Spalten einer Tabelle zusammen? colspan führt über Spalten hinweg zusammen, rowspan führt über Zeilen hinweg zusammen
Codeanzeige:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Unterschied zwischen Colspan und Rowspan</title>
<style type="text/css">
Tisch{
Rand: 0 automatisch;
Rand unten: 50px;
Textausrichtung: zentriert;
}
</Stil>
</Kopf>
<Text>
<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
<caption>Normale Anzeige: eine Zeile und drei Spalten</caption>
<tr>
<td>Was soll ich sagen, ich weiß nicht</td>
<td>Was soll ich sagen, ich weiß nicht</td>
<td>Was soll ich sagen, ich weiß nicht</td>
</tr>
</Tabelle>
<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
<caption>Jetzt möchte ich eine Zeile und zwei Spalten anzeigen. Was muss ich tun? colspan führt über mehrere Spalten hinweg zusammen</caption>
<tr>
<td>Was soll ich sagen, ich weiß nicht</td>
<td colspan="2">Was soll ich sagen, ich weiß nicht</td>
<!-- <td>Was soll ich sagen, ich weiß nicht</td> -->
</tr>
</Tabelle>
<!-- ========Rücksichtslose Trennlinie================================================================ -->
<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
<caption>Normale Anzeige: zwei Zeilen und zwei Spalten</caption>
<tr>
<td>Was soll ich sagen, ich weiß nicht</td>
<td>Was soll ich sagen, ich weiß nicht</td>
</tr>
<tr>
<td>Was soll ich sagen, ich weiß nicht</td>
<td>Was soll ich sagen, ich weiß nicht</td>
</tr>
</Tabelle>
<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
<caption>Jetzt müssen wir eine Zeile und zwei Spalten anzeigen. Was sollen wir tun? Rowspan wird über mehrere Zeilen hinweg zusammengeführt</caption>
<tr>
<td rowspan="2">Was soll ich sagen, ich weiß nicht</td>
<td>Was soll ich sagen, ich weiß nicht</td>
</tr>
<tr>
<!-- <td>Was soll ich sagen, ich weiß nicht</td> -->
<td>Was soll ich sagen, ich weiß nicht</td>
</tr>
</Tabelle>
</body>
</html>Erweiterung 2: Wie führe ich Tabellenränder zusammen? Rahmen-Zusammenbruch: Zusammenbruch;
<!-- Tabellenzellen zusammenführen -->
<style type="text/css">
Tisch{
Rahmen-Zusammenbruch: Zusammenbruch;
/* Rahmenkollaps: trennen; */
/*Gibt an, ob die Zeilen- und Zellenränder einer Tabelle in einem einzigen Rahmen verbunden oder wie in Standard-HTML getrennt sind. */
}
</Stil>
<table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
</tbody>
</Tabelle>Schließlich ist im Chrome-Browser die systemseitig voreingestellte Tabellenrahmenfarbe Grau, der Rahmenabstand beträgt 2 usw.
/* Stylesheet für Benutzeragenten */
/* Tisch {
Anzeige: Tabelle;
Rahmenkollaps: trennen;
Rahmenabstand: 2px;
Rahmenfarbe: grau;
} */
/* border="1" wird standardmäßig auf border="1px" gesetzt
Obere Rahmenbreite: 1px;
Breite des rechten Rahmens: 1px;
Breite des unteren Rahmens: 1px;
Rahmenbreite links: 1px; */
/* bordercolor Gibt die Rahmenfarbe des Objekts zurück oder legt sie fest bordercolor: W3C - String
Gibt die Farbe des Elementrahmens an. Geben Sie entweder einen Farbnamen oder einen RGB-Farbcode an.
*/Dies ist das Ende dieses Artikels mit der detaillierten Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in Tabellen. Weitere Informationen zu Cellspacing und Cellpadding in Tabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Lösung für das Problem, dass Elemente mit negativem Z-Index nicht angeklickt werden können
>>: Beispiel für das Hoch- und Herunterladen von Dateien im Front-End mit Vue+Express
Artikel empfehlen
HTML-Tutorial: Titelattribut und Alt-Attribut
XHTML ist die Grundlage des CSS-Layouts. jb51.net...
Vue + Element dynamische Mehrfachheader und dynamische Slots
Inhaltsverzeichnis 1. Nachfrage 2. Wirkung 3. All...
Grundlegende Ideen zum Auffinden von Fehlern in der Web-Frontend-Entwicklung
Die WEB-Entwicklung besteht hauptsächlich aus zwe...
mysqldump-Parameter, die Sie möglicherweise nicht kennen
Im vorherigen Artikel wurde erwähnt, dass die in ...
Detailliertes Tutorial zur Überwachung von Nginx/Tomcat/MySQL mit Zabbix
Inhaltsverzeichnis Zabbix überwacht Nginx Zabbix ...
Wenn Navicat eine Verbindung zu MySQL herstellt, meldet es 10060, 1045 Fehler und den Speicherort von my.ini
Navicat meldet beim Verbinden mit der Datenbank d...
Die Fallstricke und Lösungen, die durch den Standardwert von sql_mode in MySQL 5.7 verursacht werden
Während der normalen Projektentwicklung, wenn die...
React Native JSI implementiert Beispielcode für RN und native Kommunikation
Inhaltsverzeichnis Was ist JSI Was ist anders an ...
Installieren Sie MySQL 5.6 aus der Yum-Quelle im Centos7.4-System
Systemumgebung: centos7.4 1. Prüfen Sie, ob die D...
So erstellen Sie eine PHP+Nginx+Swoole+MySQL+Redis-Umgebung mit Docker
Betriebssystem: Alibaba Cloud ESC-Instanz centos7...
Detaillierte Erläuterung der Laderegeln der require-Methode in node.js
Laderegeln der Require-Methode Laden aus dem Cach...
Mysql-Fehler: Lösung für zu viele Verbindungen
Zu viele Verbindungen zur MySQL-Datenbank Dieser ...
Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)
Vorwort Bei einer datenzentrierten Anwendung wirk...
HTML-Meta erklärt
Einführung Der Meta-Tag ist ein Hilfstag im HEAD-...
Vue implementiert Countdown-Funktion
In diesem Artikelbeispiel wird der spezifische Co...