Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über die Anwendung des strukturierten Markups von HTML-Webseitentabellen

Eine kurze Diskussion über die Anwendung des strukturierten Markups von HTML-Webseitentabellen

高洛峰
高洛峰Original
2017-02-10 10:26:461468Durchsuche

Der folgende Editor bietet Ihnen eine kurze Diskussion über die Anwendung des strukturierten Markups von HTML-Webseitentabellen. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.

Bevor wir über das strukturierte Markup von Webtabellen sprechen, werfen wir einen Blick auf ein paar Bilder.

Eine kurze Diskussion über die Anwendung des strukturierten Markups von HTML-Webseitentabellen

Struktur der Html-Tabelle

Die sogenannte Strukturierung, wie im ersten Bild oben dargestellt Anzeige bedeutet, unsere Tabelle in drei Typen zu unterteilen: Kopfzeile, Hauptteil und Fußzeile. Wenn wir also den Tabellenkörperteil ändern, hat dies keine Auswirkungen auf die beiden anderen Teile, wodurch unsere Anwendung entkoppelt und erleichtert wird.

Strukturiertes Format


XML/HTML-CodeInhalt kopieren in die Zwischenablage

  1. Tabelle> 

  2.  

  3. thead>< ;/ Kopf> --------Kopfbereich

  4. tbody>tbody> ---------Körperbereich

  5. tFuß >tfoot>------------ Tabelle Schwanzbereich

  6. Zusammenfassung: Durch die Aufteilung der Tabelle in drei Teile, Es ist für uns praktisch, die Tabelle zu bearbeiten.

  7. Titel der HTML-Tabelle

Jede Tabelle hat ihren eigenen Titel, wie im zweiten Bild oben gezeigt. Wie kann man also dafür sorgen, dass der Titel dem Inhalt folgt? Kommen Sie in Bewegung?

Titel der Tabelle

XML/HTML-Code


Inhalt in die Zwischenablage kopieren


Tabelle>

 

  1.  

    Bildunterschrift

  2. >
  3. Bildunterschrift
  4. >Tabelle> 

  5. Die Attributwerte unter sind:
  6. Attributname

  7. Attributwert
  8. BeschreibungalignObenDer Titel befindet sich über der Tabelle

  9. Unten

Der Titel befindet sich unter der Tabelle

Zusammenfassung:

Durch Festlegen des Titels der Tabelle können Sie den Titel jederzeit mit der Tabelle verschieben.

Html-Inline-Format

Was ist das Inline-Format der Tabelle? Was wir in Excel normalerweise sehen, ist das Hinzufügen einer Hintergrundfarbe zu einer ganzen Spalte.

Attributname


Attributwert

BeschreibungAusrichtenLinks

LinksMitte

Akzeptiert

Rechts

Rechts halten

Valign

Rechts

Rechts halten

Oben

Akzeptiert

Mitte

Mitte

Unten

Down

Span

Nummer

Seriennummer

Zusammenfassung:

Durch Festlegen des Inline-Formats der Tabelle können wir die Farbe des benötigten Inhalts vertiefen. Dies gilt nur für den Spalteninhalt.

Der Quellcode lautet wie folgt:

XML/HTML-Code

Kopieren Sie den Inhalt in die Zwischenablage


  1. html>                         🎜>

    Kopf
  2. >

      

  3. li
  4. >

    Die Verwendung von verschachtelt Tabellen li>   

  5. Tabelle
  6.  
  7. Breite

    ="500" >

    tr
  8. >

    🎜>td align

    =
  9. "center"
  10. >Studenten-Bewertungsblatttd> > ;td

  11. >
  12. 🎜>

    Tabelle Rahmen=

    "1"
  13. Breite

    ="100 %">                                                               > gt;                       

    th
  14. >

    Nameth> th

    >
  15. Chinesisch
  16. th> th

  17. >
  18. Mathematik

    th>

  19. th>Fremdspracheth> >>

  20. thead> ; >tbody

  21. >
  22. tr> td>

    Zhang San
  23. td> >95td> >

  24. td
  25. >95td>

     
  26. td>

    95
  27. td> 

  28. tr> 

  29. tr>     

  30. td>张三td>     

  31. td>95td>      

  32. td>95td>     

  33. td>95td>     

  34. tr>     

  35. tr>     

  36. td>张三td >     

  37. td>95 td>     

  38. td> 95td>     

  39. td>95td>     

  40. tr>     

  41. tbody>     

  42. tfoot>     

  43. tr>     

  44. td colspan="4">成绩汇总td >     

  45. tr>     

  46. tfoot>     

  47. table>     

  48. td>     

  49. tr>     

  50. Tabelle>     

  51.      

  52. br/>     

  53.      

  54. li>表格嵌套的使用二li>     

  55.      

  56. Tabelle Rahmen="1" Breite="500" >     

  57. Bildunterschrift align="bottom">Student PartiturBildunterschrift> 🎜>

    >
  58. tr

    >
  59. >
  60. th> Name

  61. th

    > th> th

  62. >
  63. Mathematik

    th> 🎜>>Fremdspracheth>

  64. tr

    >  thead>

  65. tbody> >tr>

     
  66. td>

    Zhang San
  67. td> 

  68. td>95td

    >
  69.  

    td

  70. >
  71. 95

    td                                                          td>

  72. tr

    > ;tr> >

  73. td

    >Zhang San td>

  74. td

    >95td>                                                                      ;/td>

     
  75. td >

    95
  76. td > >tr>

     
  77. tr>

  78. td
  79. >Zhang San td> 

  80. td>95td>     

  81. td>95td>     

  82. td>95td>     

  83. tr>     

  84. tbody>     

  85. tfoot>     

  86. < ;tr>     

  87. td colspan ="4">成绩汇总td>     

  88. tr>     

  89. tfoot>     

  90. Tabelle >     

  91.         

  92. br/>      

  93.      

  94. li>表格嵌套的使用三li>     

  95. Tabelle Rahmen="1" Breite="500" >     

  96. Bildunterschrift align="bottom">学生成绩Bildunterschrift>     

  97. col >col>     

  98. col bgcolor=blau>col>     

  99. thead>     

  100. tr>     

  101. th>姓名th>     

  102. th>语文th>

  103. th>数学th>     

  104. th>外语th>     

  105. tr>     

  106. thead>     

  107. tbody>     

  108. tr >     

  109. td>张三td>     

  110. td>95< ;/td>     

  111. td >95td>     

  112. td>95td>     

  113. tr>     

  114. tr >     

  115. td>张三td>     

  116. td>95td>     

  117. td>95td>     

  118. td>95td>     

  119. tr>     

  120. tr>     

  121. td >张三td>     

  122. < ;td>95td>     

  123. td>95td> ;     

  124. td>95td>     

  125. tr>

  126. tbody>     

  127. tfoot>     

  128. tfoot>     

  129. Tabelle>     

  130.  

  131. Körper> 

  132. Kopf> 🎜>

    html
  133. >

                                  Das ist Alles über die Anwendung strukturierter Tags. Ich hoffe, dass es für alle hilfreich ist.Weitere Artikel zur Anwendung strukturierter Tags in HTML-Webseitentabellen finden Sie unter PHP chinesische Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn