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

So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen

Zweck der Verwendung von Nginx Lassen Sie uns zun...

Detaillierte Erklärung, wie Tomcat asynchrone Servlets implementiert

Vorwort Durch meine vorherige Tomcat-Artikelserie...

jQuery realisiert die Shuttle-Box-Funktion

In diesem Artikelbeispiel wird der spezifische Co...

Front-End-JavaScript versteht Funktions-Currying gründlich

Inhaltsverzeichnis 1. Was ist Curry 2. Verwendung...

So verwenden Sie Javascript zum Erstellen einfacher Algorithmen

Inhaltsverzeichnis 1 Frage 2 Methoden 3 Experimen...

So optimieren Sie die langsame Like-Fuzzy-Abfrage in MySQL

Inhaltsverzeichnis 1. Einleitung: 2. Die erste Id...

Detaillierte Erläuterung des MySQL-Ausführungsprinzips, der logischen Schichtung und der Änderung der Datenbankverarbeitungs-Engine

Da ich MySQL schon so lange verwende, glaube ich,...

Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich

In diesem Artikel erfahren Sie, wie Sie mit Vue e...

Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems

Vorwort Um zum Originalcode kompatibel zu sein, b...

MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...

Der Dienst für die dekomprimierte Version von MySQL 5.6 kann aufgrund des Systemfehlers 1067 nicht gestartet werden

Notieren Sie den Fehler, der mich heute den ganze...

Einführung in bedingte Zugriffsattribute und Pfeilfunktionen in JavaScript

Inhaltsverzeichnis 1. Bedingte Zugriffsattribute ...

Bei der Verwendung von mybatis-generator mit mysql8.0.3 in IDEA sind Fehler aufgetreten

1. Fügen Sie das Plug-In hinzu und fügen Sie die ...

Wichtige Bonuselemente zur Optimierung und Verpackung des Frontends von Vue-Projekten

Inhaltsverzeichnis Vorwort 1. Routing von Lazy Lo...

Interpretation des CocosCreator-Quellcodes: Engine-Start und Hauptschleife

Inhaltsverzeichnis Vorwort Vorbereitung Gehen! Te...