Eine kurze Diskussion über die Anwendung von HTML-Webseiten-Tabellenstruktur-Markup

Eine kurze Diskussion über die Anwendung von HTML-Webseiten-Tabellenstruktur-Markup

Eigenschaftsname

Eigenschaftswert

veranschaulichen

ausrichten

Spitze

Titel über der Tabelle

Unten

Titel unter der Tabelle


Zusammenfassung: Durch die Festlegung des Tabellentitels können Sie den Titel jederzeit mit der Tabelle verschieben.

HTML-Inline-Format

Was ist das Inline-Format einer Tabelle? Dies sehen wir normalerweise in Excel, wenn wir der gesamten Spalte eine Hintergrundfarbe hinzufügen.

<Spaltengruppe>…<Spaltengruppe>

Eigenschaftsname

Eigenschaftswert

veranschaulichen

Ausrichten

Links

Links halten

Center

Bestehen Sie die Prüfung

Rechts

Halten Sie nach rechts

Bewerten

Rechts

Halten Sie nach rechts

Spitze

Passieren

Mitte

Mitte

Unten

Untere

Spanne

Nummer

Anzahl der Inline


Zusammenfassung: Indem wir das Spaltenformat der Tabelle festlegen, können wir die Farbe des benötigten Inhalts intensivieren. Hier konzentrieren wir uns nur auf den Spalteninhalt.

Der Quellcode lautet wie folgt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >      
  2. <Kopf>​​      
  3.      
  4. < li > Verwendung verschachtelter Tabellen 1 </ li >      
  5.      
  6. < Tabelle    Breite = "500"   >      
  7. < tr >      
  8. < td   align = "center" > Notenblatt für Schüler </td>      
  9. </tr>​​      
  10. < td >      
  11. < Tabelle   Grenze = "1"   Breite = "100%" >      
  12. < thead >            
  13. < tr >      
  14. <th> Name </th>​​​​      
  15. < th > Chinesisch </ th >      
  16. < th > Mathematik </ th >      
  17. < th > Fremdsprache </ th >      
  18. </tr>​​      
  19. </ thead >      
  20. < tbody >      
  21. < tr >      
  22. < td > Zhang San </ td >      
  23. < td > 95 </ td >      
  24. < td > 95 </ td >      
  25. < td > 95 </ td >      
  26. </tr>​​      
  27. < tr >      
  28. < td > Zhang San </ td >      
  29. < td > 95 </ td >      
  30. < td > 95 </ td >      
  31. < td > 95 </ td >      
  32. </tr>​​      
  33. < tr >      
  34. < td > Zhang San </ td >      
  35. < td > 95 </ td >      
  36. < td > 95 </ td >      
  37. < td > 95 </ td >      
  38. </tr>​​      
  39. </ tbody >      
  40. < tFuß >      
  41. < tr >      
  42. < td   colspan = " 4 " > Ergebniszusammenfassung </td>      
  43. </tr>​​      
  44. </ tfoot >      
  45. </ Tabelle >      
  46. </ td >      
  47. </tr>​​      
  48. </ Tabelle >      
  49.      
  50. < br />      
  51.      
  52. < li > Verwendung verschachtelter Tabellen 2 </ li >      
  53.      
  54. < Tabelle   Grenze = "1"   Breite = "500"   >      
  55. < Bildunterschrift   align = "bottom" > Schülernoten </ caption >      
  56. < thead >      
  57. < tr >      
  58. <th> Name </th>​​​​      
  59. < th > Chinesisch </ th >      
  60. < th > Mathematik </ th >      
  61. < th > Fremdsprache </ th >      
  62. </tr>​​      
  63. </ thead >      
  64. < tbody >      
  65. < tr >      
  66. < td > Zhang San </ td >      
  67. < td > 95 </ td >      
  68. < td > 95 </ td >      
  69. < td > 95 </ td >      
  70. </tr>​​      
  71. < tr >      
  72. < td > Zhang San </ td >      
  73. < td > 95 </ td >      
  74. < td > 95 </ td >      
  75. < td > 95 </ td >      
  76. </tr>​​      
  77. < tr >      
  78. < td > Zhang San </ td >      
  79. < td > 95 </ td >      
  80. < td > 95 </ td >      
  81. < td > 95 </ td >      
  82. </tr>​​      
  83. </ tbody >      
  84. < tFuß >      
  85. < tr >      
  86. < td   colspan = " 4 " > Ergebniszusammenfassung </td>      
  87. </tr>​​      
  88. </ tfoot >      
  89. </ Tabelle >      
  90.         
  91. < br />      
  92.      
  93. < li > Verwendung verschachtelter Tabellen 3 </ li >      
  94. < Tabelle   Grenze = "1"   Breite = "500"   >      
  95. < Bildunterschrift   align = "bottom" > Schülernoten </ caption >      
  96. < Spalte   > </ Spalte >      
  97. < Spalte   bgcolor = blau > </ col >      
  98. < thead >      
  99. < tr >      
  100. <th> Name </th>​​​​      
  101. < th > Chinesisch </ th >      
  102. < th > Mathematik </ th >      
  103. < th > Fremdsprache </ th >      
  104. </tr>​​      
  105. </ thead >      
  106. < tbody >      
  107. < tr   >      
  108. < td > Zhang San </ td >      
  109. < td > 95 </ td >      
  110. < td > 95 </ td >      
  111. < td > 95 </ td >      
  112. </tr>​​      
  113. < tr >      
  114. < td > Zhang San </ td >      
  115. < td > 95 </ td >      
  116. < td > 95 </ td >      
  117. < td > 95 </ td >      
  118. </tr>​​      
  119. < tr >      
  120. < td > Zhang San </ td >      
  121. < td > 95 </ td >      
  122. < td > 95 </ td >      
  123. < td > 95 </ td >      
  124. </tr>​​      
  125. </ tbody >      
  126. < tFuß >      
  127. </ tfoot >      
  128. </ Tabelle >      
  129.      
  130. </ Körper >      
  131. </ Kopf >      
  132. </ html >     

Das Obige ist der gesamte Inhalt der Anwendung der HTML-Webseiten-Tabellenstruktur-Markup, die Ihnen vom Herausgeber zur Verfügung gestellt wurde. Ich hoffe, es wird für alle hilfreich sein. Bitte unterstützen Sie 123WORDPRESS.COM~

Bevor wir über die strukturelle Auszeichnung von Webtabellen sprechen, schauen wir uns ein paar Bilder an.

Strukturierung von HTML-Tabellen

Die sogenannte Strukturierung, wie im ersten Bild oben gezeigt, besteht darin, unsere Tabelle in drei Typen zu unterteilen: Kopfzeile, Hauptteil und Fußzeile. Wenn wir daher den Tabellenkörper ändern, wirkt sich dies nicht auf die anderen beiden Teile aus. Dadurch wird die Kopplung aufgehoben und unsere Anwendung vereinfacht.

Strukturiertes Format

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Tabelle >      
  2.      
  3. < thead > … </ thead > --------Header-Bereich
  4.      
  5. < tbody > … </ tbody > ---------Tabellenkörperbereich
  6.      
  7. < tfoot > … </ tfoot > ------------Tabellenfußbereich
  8.      
  9. </ Tabelle >     

Zusammenfassung: Durch die Aufteilung der Tabelle in drei Teile fällt es uns leichter, die Tabelle zu bearbeiten.

HTML-Tabellentitel

Jede Tabelle hat ihren eigenen Titel, wie im zweiten Bild oben gezeigt. Wie können wir also dafür sorgen, dass sich der Titel zusammen mit dem Inhalt bewegt?

Tabellentitel

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < Tabelle >      
  2.      
  3. <Beschriftung> … </Beschriftung>​​​​      
  4.      
  5. </ Tabelle >     
Die Attributwerte unter <caption> sind:

<<:  Detaillierte Einführung in den MySQL Innodb Index-Mechanismus

>>:  Beispiel für die Kompilierung von LNMP im Docker-Container

Artikel empfehlen

JavaScript zur Implementierung der Webversion des Schlangenspiels

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

JavaScript-Einzelthread und asynchrone Details

Inhaltsverzeichnis 1. Aufgabenwarteschlange 2. Um...

Vergleichende Analyse von IN und Exists in MySQL-Anweisungen

Hintergrund Als ich kürzlich SQL-Anweisungen schr...

Erfahren Sie mehr über die Verwendung regulärer Ausdrücke in JavaScript

Inhaltsverzeichnis 1. Was ist ein regulärer Ausdr...

Detaillierte Erläuterung der Implementierung mehrerer dreispaltiger adaptiver CSS-Layouts

Vorwort Um dem herkömmlichen WEB-Layout zu folgen...

Beispiel für die Konvertierung von Webpack-Bildern in Base64

URL-Loader herunterladen yarn add -D URL-Lader Mo...

CentOS7-Konfiguration Alibaba Cloud Yum-Quellmethodencode

Öffnen Sie den Centos Yum-Ordner Geben Sie den Be...

Ausführliche Erklärung zu Slots und Filtern in Vue

Inhaltsverzeichnis Spielautomaten Was sind Slots?...

Einführung in die Verwendung des MySQL Performance Stress Benchmark Tools Sysbench

Inhaltsverzeichnis 1. Einführung in Sysbench #Pro...

Detaillierte Erklärung zur Konfiguration des sekundären Domänennamens auf einem Apache-Server in einer Linux-Umgebung

Dieser Artikel beschreibt, wie Sie einen sekundär...

Einführung und Installation von MySQL Shell

Inhaltsverzeichnis 01 ReplicaSet-Architektur 02 E...

Verwenden von Openlayer in Vue, um einen Ladeanimationseffekt zu realisieren

Hinweis: Sie können keine bereichsbezogenen Anima...

So ändern Sie die Standardspeicher-Engine in MySQL

MySQL-Speicher-Engine: Der MySQL-Server verwendet...

MySQL MSI-Version herunterladen und installieren - ausführliches grafisches Tutorial für Anfänger

Inhaltsverzeichnis 1. Laden Sie die MySQL-MSI-Ver...

CSS sorgt dafür, dass der Footer automatisch unten bleibt, wenn die Inhaltshöhe nicht ausreicht

Beim UI-Schnittprozess besteht die Seite häufig a...