Der Unterschied zwischen Zellabstand und Zellauffüllung in der Tabelle

Was ist Tisch? Die Anzahl der Zellen in der Tabelle hängt von der Anzahl der in jeder Zeile eingeschlossenen Zellen ab. Darüber hinaus enthält die Standardtabelle keine Tabellenzeilen, wenn sie im Browser angezeigt wird, bevor der CSS-Stil table tr td,th{border:1px solid #000;}

Übliche Methoden zum Schreiben von Tabellen in HTML: A. … : eine Zeile einer Tabelle, so viele Paare von tr-Tabellen, wie es mehrere Zeilen gibt; : Eine Zelle einer Tabelle enthält mehrere Paare von , die angeben, wie viele Spalten es in einer Zeile gibt. : Kopfzeile der Tabelle In einer Zelle, Tabellenkopf, wird der Text standardmäßig fett gedruckt und in der Mitte angezeigt. D. /*Der Inhalt der Zusammenfassung wird nicht im Browser angezeigt. Seine Funktion besteht darin, die Lesbarkeit (Semantisierung) der Tabelle zu erhöhen, Suchmaschinen ein besseres Verständnis des Tabelleninhalts zu ermöglichen und es außerdem Screenreadern zu ermöglichen, speziellen Benutzern das Lesen des Tabelleninhalts besser zu erleichtern. */ E.caption-Tag, fügen Sie der Tabelle einen Titel und eine Zusammenfassung hinzu. Der Titel wird verwendet, um den Inhalt der Tabelle zu beschreiben: Header Data Nach dem Login kopieren rreee

Kommen wir zurück Punkt. Der Unterschied zwischen Zellauffüllung und Zellabstand. Schauen wir uns zunächst die folgenden Tabellenbilder und den Vergleich der Zellabstandscodes an:

今天星期五/th> today is Friday Nach dem Login kopieren

Vergleichen Sie die Codes Verschiedene Einstellungen für den Zellenabstand, eine ist „0“ und die andere ist „20“, wie gezeigt. Das Ergebnis ist, dass der Abstand zwischen jeder Zelle in der ersten Tabelle 0 und der Abstand zwischen jeder Zelle in der zweiten Tabelle 20 beträgt : Die zweite Tabelle stimmt mit der dritten überein, aber die drei Tabellen haben keinen Zellabstand. Wir haben festgestellt, dass „border-spacing: 20px“ das gleiche Ergebnis hat wie „cellspacing“ = „20“. um die Lücke zwischen den Zellen in der Tabelle anzugeben. Der Parameterwert dieser Eigenschaft ist eine Zahl, die die Anzahl der Pixel angibt, die von der Zelllücke eingenommen werden. table中cellspacing的区别 table{ margin-bottom: 50px; } .ceshi{ border-spacing: 20px; /*Specifies the distance between the borders of adjoining cells in a table. */ } 第一个单元格 测试1 测试2 测试3 第二个单元格 测试1 测试2 测试3 第三个单元格 测试1 测试2 测试3 Nach dem Login kopieren

Den Ergebnissen der Ausführung des obigen Codes nach zu urteilen: Die beiden Tabellen haben nur unterschiedliche Cellpadding-Codewerte. In der ersten Tabelle stehen die Worte „Ich bin eine glückliche Zellentabelle“. " Das Wort „Ich bin eine glückliche Zellentabelle“ in der zweiten Tabelle ist weit von der Zelle entfernt, in der es sich befindet. Das liegt daran, dass cellpadding="0" gesetzt ist. Das heißt, weil cellpadding="20" ist , der Abstand zwischen „Ich bin eine glückliche Zelltabelle“ und dem Rand der Zelle, in der sie sich befindet, beträgt 20 Pixel. Einfach ausgedrückt ist der Wert des Zellauffüllens gleich dem, wie viel Leerraum die Zellen in der Tabelle innerhalb ihrer eigenen Grenzen behalten. Die Elemente in der Zelle werden niemals in diese Leerräume eindringen. ||Beachten Sie, dass das cellpadding-Attribut verwendet wird, um die Größe des leeren Abstands zwischen dem Zellinhalt und der Zellgrenze anzugeben. Der Parameterwert dieses Attributs ist ebenfalls eine Zahl, die die Anzahl der Pixel darstellt, die von der Höhe des Leerraums zwischen dem Zellinhalt und dem oberen und unteren Rand eingenommen werden, und die Anzahl der Pixel, die von der Breite des Leerraums zwischen dem Zellinhalt eingenommen werden Zellinhalt und der linke und rechte Rand.

Zum Beispiel: Der Zellabstand stellt den Abstand zwischen den Zellen dar, und der Zellabstand stellt den Abstand zwischen dem Zellinhalt und dem Rand dar; ersterer wird als Rand verstanden, und letzterer ist wie Polsterung (Zelle); Inhalt der Tabelle; Nest-Auffüllung (Tabellenfüllung) (Zellabstand) – stellt einen Abstand außerhalb der Verschachtelung dar, der zum Trennen der Verschachtelung und des Verschachtelungsraums (Tabellenabstand) (Zellenabstand) verwendet wird – stellt den Tabellenrand und die Verschachtelung dar; padding Der Abstand ist auch der Abstand zwischen Nestfüllern

Erweiterung 1: Wie füge ich die Zeilen und Spalten der Tabelle zusammen? Colspan wird spaltenübergreifend zusammengeführt, Rowspan wird zeilenübergreifend zusammengeführt

Codeanzeige: tabl表格中cellpadding的区别 table{ margin-bottom: 50px; } 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 Nach dem Login kopieren

Erweiterung 2: Wie werden Tabellenränder zusammengeführt? border-collapse: Collapse; colspan与rowspan的区别 table{ margin: 0 auto; margin-bottom: 50px; text-align: center; } 正常展示：一行三列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办？colspan跨列合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 正常展示：二行二列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办?rowspan跨行合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 说点啥了,不知道 Nach dem Login kopieren

Schließlich ist im Chrome-Browser die Standardrahmenfarbe der Tabelle grau, der Rahmenabstand beträgt 2 usw.

table{ border-collapse: collapse; /* border-collapse: separate; */ /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */ } 单元格1 单元格2 单元格3 Nach dem Login kopieren

Empfohlenes Tutorial: „ CSS-Tutorial “

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Der Unterschied zwischen Zellabstand und Zellauffüllung in der Tabelle