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

Eine detaillierte Erklärung der überlappenden und weichen Farbanpassungsmethode bei der Farbanpassung von Webseiten

In diesem Artikel gibt es keine Spitzfindigkeiten,...

Eine einfache und effektive Lösung, um das ursprüngliche Passwort bei der Installation von MySQL zu vergessen

Wenn Sie MySQL installieren, wird Ihnen ein erste...

Werfen wir einen Blick auf die Vorkompilierung von JavaScript (Zusammenfassung)

JS-Lauftrilogie js-Ausführungscode ist in drei Sc...

Tutorial-Diagramm zur kostenlosen 64-Bit-Installationsversion von MySQL 5.7.31

1. Herunterladen Download-Adresse: https://dev.my...

Analyse der neuen Funktionen von MySQL 8.0 - Transaktionales Datenwörterbuch und Atomic DDL

Vorwort Das Transaktionsdatenwörterbuch und das a...

Die Tücken der automatischen Inkrementierung numerischer MySQL-Typen

Beim Entwurf von Tabellenstrukturen gehören numer...

Detaillierte Erläuterung des Befehls zum Bereinigen des MySQL-Datenbank-Binlogs

Überblick Heute werde ich hauptsächlich erklären,...

Sicherheitskonfiguration und Erkennung von SSL, nachdem die Website https aktiviert hat

Heutzutage ist es für Websites Standard, SSL zu a...

Vollständiges Beispiel der Kapselung der globalen Toast-Komponente durch Vue

Inhaltsverzeichnis Vorwort 1. Mit vue-cli 1. Defi...

So schreiben Sie schönen HTML-Code

So sieht schöner HTML-Code aus. So schreiben Sie ...

Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung

Vor Kurzem musste ich das Projekt für die Mitglie...

Erstellen Sie einen stabilen und hochverfügbaren Cluster basierend auf MySQL + MyCat, Lastausgleich, Master-Slave-Replikation und Lese-/Schreibtrennung

Bei der Optimierung der Datenbankleistung wird im...

So erlauben Sie den Remotezugriff auf offene Ports in Linux

1. Ändern Sie die Firewall-Konfigurationsdatei # ...

Öffentlicher Upload-Bereich für mehrere Typen von Anhangsbildern auf der Vue-Seite und anwendbares Faltfenster (Beispielcode)

In Front-End-Projekten ist das Hochladen von Anhä...

Detaillierte Erklärung der Listendarstellung von Vue

Inhaltsverzeichnis 1. v-for: Array-Inhalte durchl...