Was ist ein Tisch? Es besteht aus Zellzellen. In der Tabelle hängt die Anzahl der <td> von der Anzahl der in jeder Zeile gewickelten Zellzellen ab <tr>! Darüber hinaus wird in der Standardtabelle Tabelle keine Tabellenzeile im Browser angezeigt, bevor der CSS -Stil hinzugefügt wird.
GEMEINIGE TABELLE -Schreibmethoden in HTML: A. <tr>… </tr>: Eine Zeile einer Tabelle, es gibt mehrere TR -Paare, und es gibt mehrere Zeilen; B. <td>… </td>: Eine Zelle einer Tabelle, die mehrere Paare von <td>… </td> enthält, was bedeutet, dass es mehrere Spalten in einer Zeile gibt; C. <Th>… </th>: Eine Zelle am Kopf der Tabelle, der Tischkopf und der Text ist fett und in der Mitte angezeigt; D. <Tabellenzusammenfassung = Tabelle Einführung Text>/*Der Inhalt der Zusammenfassung wird im Browser nicht angezeigt. Seine Funktion besteht darin, die Lesbarkeit (Semantisierung) der Tabelle zu erhöhen, Suchmaschinen zu ermöglichen, um den Inhalt der Tabellen besser zu verstehen und die Bildschirmleser besser zu helfen, Spezialbenutzern besser zu helfen, den Tabelleninhalt zu lesen. */ 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, die Anzeigeort des Titels: über der Tabelle
<table border = cellpacing = cellpadding => <tr> <th> Header </th> </tr> <tr> <td> Daten </td> </tr> </table>
<table border = cellpacing = cellpadding = summary => <caption> </caption> <tr> <th> Heute ist Freitag </td> </tr> </table>
Kehren Sie zum Thema zurück zu dem Punkt, an dem der Unterschied zwischen Cellpadding und Zellpaket der Vergleich zwischen den folgenden Satz von Tabellenbildern und dem Zellpaketcode ist:
<! DocType html> <html> <kopf> <meta charset = utf-8> <title> Unterschiede in der Zellpaket in Tabelle </title> <style type = text/css> table {margin-bottom: 50px; } .ceshi {Grenze: 20px; /*Gibt den Abstand zwischen den Grenzen benachbarter Zellen in einer Tabelle an. */ } </style> </head> <table width=600 cellpacing=0 bordercolor=#333 border=1> <caption>First cell</caption> <tr> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> </tr> </table> <table width=600 cellpacing=20 bordercolor=#333 border=1> <Caption> Zweite Zelle </caption> <tr> <Td> Test 1 </td> <Td> test 2 </td> <td> test 3 </td> </tr> </table> <table breiten <td> Test 3 </td> </tr> </table> </html>Wenn der Code verglichen wird, haben die beiden oberen Tabellen unterschiedliche Einstellungen, einer ist 0 und der andere 20. Das angezeigte Ergebnis ist, dass der Abstand zwischen jeder Zelle in der ersten Tabelle 0 beträgt und der Abstand zwischen jeder Zelle in der zweiten Tabelle 20. Erweitert: Die zweite Tabelle stimmt mit der dritten Tabelle überein, aber die dritte Tabelle hat keine Zellabteilung. Wir fanden heraus, dass dieser Grenzbereich: 20px; ist das gleiche wie das Ergebnis des Zellabstands = 20. z. B. Zusammenfassung: Das Zellabstandsattribut wird verwendet, um die Lücke zwischen den Zellen der Tabelle anzugeben. Der Parameterwert dieser Eigenschaft lautet eine Zahl, die die Anzahl der Pixelpunkte angibt, die durch die Zelllücke besetzt sind.
<! DocType html> <html> <kopf> <meta charset = utf-8> <title> Unterschiede in der Cellpadding in Tabellen </title> <style type = text/css> Tabelle {Margin-Bottom: 50px; } </style> </head> <body> <table wide <tr> <th> Ich bin eine glückliche Zellform </th> <th> Ich bin eine glückliche Zellform </th> <th> Ich bin eine glückliche Zellform </th> <th> Ich bin eine glückliche Zellform </th> </tr> </table> </body> </html>Nach dem oben genannten Code zu beurteilen: Die beiden Tabellen haben unterschiedliche Werte von Cellpadding -Codes. In der ersten Tabelle sind die Wörter "Ich bin fröhliche Zelle" 0 aus der Zelle, in der sie sich befindet, dh Cellpadding = 0 ist festgelegt. In der zweiten Tabelle sind die Wörter "Ich bin fröhliche Zelle" weit von der Zelle entfernt, in der sie sich befindet, dh der Abstand zwischen der Zelle, in der ich fröhliche Zelle bin, beträgt 20 Pixel. Einfach ausgedrückt, wie viel ist der Wert von Cellpadding gleich, wie viele Lücken von der Grenze der Zellen in der Tabelle nach innen gelassen werden, und die Elemente in der Zelle werden niemals in diese Lücken eintreten. || Beachten Sie, dass die CellPadding -Eigenschaft verwendet wird, um die Größe des Blindenteils zwischen dem Zellgehalt und der Zellgrenze anzugeben. Der Parameterwert dieser Eigenschaft ist ebenfalls eine Zahl, die die Anzahl der Pixel angibt, die durch die Höhe des leeren Abstands zwischen dem Zellgehalt und den oberen und unteren Grenzen und der Anzahl der Pixel, die durch die Breite des Blindabstands zwischen dem Zellgehalt und den linken und rechten Grenzen besetzt sind, besetzt sind.
EG -Zusammenfassung: Zellpaket repräsentiert den Abstand zwischen den Zellen. Das Cellpading repräsentiert den Abstand zwischen Zellgehalt und Rand; Ersteres ist wie der Rand, letzteres ist wie Polsterung; NEST (Zelle)-der Inhalt der Tabelle; Nestfüllung (Tischfüllung) (Cellpadding)-repräsentiert einen Abstand außerhalb des Nestes, der zum Trennen des Nest- und Nestraums verwendet wird; NEST Space (Tabellenabstand)-repräsentiert den Abstand zwischen Tabellenrand- und Nestfüllung und ist auch der Abstand zwischen der Nestfüllung
Erweiterung 1: Wie fusioniere ich Zeilen und Spalten einer Tabelle? Colspan Cross-Column-Verschmelz
Codeanzeige:
<! DocType html> <html> <kopf> <meta charset = utf-8> <title> Der Unterschied zwischen colspan und rowspan </title> <style type = text/css> Tabelle {Margin: 0 Auto; Randboden: 50px; Text-Align: Mitte; } </style> </head> <body> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor =#ccc> <caption> normale display: Eine Zeile und drei Spalten </caption> <tr> <Td> Sag etwas, sagen Sie nicht. width = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor =#cc> <caption> Was soll ich jetzt tun, um eine Zeile und zwei Spalten anzuzeigen? Colspan Cross-Cross-Merge </caption> <tr> <td> Sag etwas, weiß nicht </td> <td colspan = 2> Sag etwas, weiß nicht </td> <!-<td> Sag etwas, weiß nicht </td>-> </tr> </table> <! ==========================================================ieben ==========================================================ieben ==========================================================ieben ==================================================================ieben <td> Sag etwas, weiß nicht </td> </tr> <tr> <td> Sag etwas, weiß nicht </td> <td> Sag etwas, weiß nicht </td> <td> Sag etwas, weiß nicht. Spalten? rowspan cross-row merge</caption> <tr> <td rowspan=2>Say something, don't know</td> <td>Say something, don't know</td> </tr> <tr> <!-- <td>Say something, don't know</td> --> <td>Say something, don't know</td> </tr> </table> </body></html>Erweiterung 2: Wie fusioniere ich Tischgrenzen? Grenzkollapse: Zusammenbruch;
<!-Merge Table Cells-> <Style Type = Text/CSS> Tabelle {Border-Collapse: Collapse; /* Grenzkollapse: getrennt; * / /*Gibt an, ob die Zeile und die Zellgrenzen einer Tabelle in einer einzigen Grenze verbunden sind oder wie in Standard -HTML abgelöst werden. */} </style> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor =#ccc> <tbody> <tr> <td> Zelle 1 </td> <td> Zelle 2 </td> <td> Zelle 3 </td> </tbody> </table> </table> </table>Schließlich ist im Chrombrowser das System Standardtabelle Grenze grau, der Grenzabstand 2 usw. beträgt usw.
/* User Agent Stylesheet* / /* Tabelle {Anzeige: Tabelle; Grenzkollapse: getrennt; Randabstand: 2px; Grenzfarbe: Grau; } * / / * border = 1 Standard gleich Grenze = 1px Border-Top-Width: 1px; Grenzrechte Breite: 1PX; Grenzbodenbreite: 1PX; Border-Links-Breite: 1PX; * / /* BorderColor gibt die Randfarbe des Objekts BorderColor zurück oder legt die Farbe des Randes des Elements an. Geben Sie entweder einen Farbnamen oder einen RGB -Farbcode an. */Dies ist der Artikel über die Details des Unterschieds zwischen Cesllpacing und Cellpadding in der Tabelle. Weitere verwandte Inhalte von Cesllpacing und Cellpadding in Tabellen finden Sie in früheren Artikeln von wulin.com oder stöbern Sie weiter nach unten zu verwandten Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!