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

Grafisches Tutorial zur Konfigurationsmethode für die Installationsversion von MySQL5.7.17 winx64 unter Windows Server 2008 R2

Installieren Sie mysql5.7 unter Win. Zu Ihrer Inf...

So implementieren Sie die Vervollständigung leerer Zellen in HTML-Tabellen

Als ich mir selbst die Webentwicklung beibrachte,...

Das mobile Vue-Terminal bestimmt die Richtung, in die der Finger über den Bildschirm gleitet

Das mobile Vue-Terminal bestimmt die Richtung, in...

So verwenden Sie die Technologie mit negativen Rändern, um ein durchschnittliches Layout in CSS zu erreichen

Wir verwenden normalerweise Float-Layout, um die ...

Lösen Sie das Problem der Datensynchronisierung beim Scrollen und Liken von Vue-Seamless-Scroll

VUE verwendet vue-seamless-scroll zum automatisch...

Allgemeine Befehle zum Bereitstellen von InfluxDB und Mongo mit Docker

Bereitstellen einer Datenbank basierend auf Docke...

Detaillierte Erläuterung zur Lösung des Problems, dass der Docker-Container nicht über IP auf den Hostcomputer zugreifen kann

Ursprung des Problems Wenn ich Docker verwende, m...

HTML-Basis-URL-Tag

Seine Funktion besteht darin, einen globalen Stil ...

So verwenden Sie Umgebungsvariablen in der Nginx-Konfigurationsdatei

Vorwort Nginx ist ein auf Leistung ausgelegter HT...

Einführung in die Verwendung der vier wichtigsten SQL-Rankingfunktionen ROW_NUMBER, RANK, DENSE_RANK, NTILE

1. ROW_NUMBER() Definition: Die Funktion ROW_NUMB...

Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse

Closure-Implementierung privater Variablen Privat...

CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18

Unter Bezugnahme auf die Online-Informationen hab...

Ausführliche Erläuterung des Prinzips des MySQL Innodb-Index

Einführung Wenn ich zurückblicke, sagte der Lehre...

Tutorial-Diagramm zur Konfiguration der Tomcat-Umgebungsvariablen unter Win10

Vor der Konfiguration müssen wir Folgendes tun: 1...

So schreiben Sie Objekte und Parameter, um Flash in Firefox abzuspielen

Code kopieren Der Code lautet wie folgt: <Obje...