Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle

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

Analysieren Sie das Problem beim Herunterladen der Oracle 11g-Image-Konfiguration in Docker

1. Ziehen Sie das Bild Docker-Pull-Registrierung....

Einführung in die MySQL-Gesamtarchitektur

Die Gesamtarchitektur von MySQL ist in die Server...

jQuery-Plugin zur Implementierung des Minesweeper-Spiels (1)

Dieser Artikel teilt den spezifischen Code des er...

Implementierung und Optimierung von MySql-Unterabfragen IN

Inhaltsverzeichnis Warum ist IN langsam? Was ist ...

Detaillierte Schritte zum Bereitstellen eines Tomcat-Servers basierend auf IDEA

Inhaltsverzeichnis Einführung Schritt 1 Schritt 2...

So deaktivieren Sie die automatische Eingabeaufforderung zum Speichern des Kennworts im Chrome-Browser

Hinweis: Bei der Webentwicklung werden IE und FF n...

Beispiel für die Konfiguration von nginx zur Implementierung von SSL

Umgebungsbeschreibung Serversystem: Ubuntu 18.04 ...

Docker Compose stellt ein SpringBoot-Projekt bereit, um eine Verbindung zu MySQL herzustellen, und die dabei auftretenden Fallstricke

Zuvor haben wir Docker verwendet, um das SpringBo...

Mysql setzt Boolesche Typoperationen

Mysql legt den Booleschen Typ fest 1. Tinyint-Typ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Windows 64 Bit

In diesem Artikel finden Sie das Installations- u...

JavaScript zum Erzielen eines Zeitbereichseffekts

In diesem Artikel wird der spezifische Code für J...

Implementierung von MySQL Multi-version Concurrency Control MVCC

Inhaltsverzeichnis Was ist MVCC MVCC-Implementier...

So fügen Sie eine Festplatte in Vmware hinzu: Erweitern Sie die Festplatte

In diesem Artikel wird beschrieben, wie Sie eine ...

Beispielanalyse von Linux-Dateiverwaltungsbefehlen [Anzeige, Ansicht, Statistiken usw.]

Dieser Artikel beschreibt die Linux-Dateiverwaltu...

Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0

Heute zeige ich Ihnen einen Neon-Button-Animation...