HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明

HTMLウェブページテーブル構造化マークアップの応用に関する簡単な説明

物件名

プロパティ値

例示する

整列する

トップ

表の上のタイトル

表の下のタイトル


概要:表のタイトルを設定することで、いつでも表とともにタイトルを移動させることができます。

HTML インライン形式

テーブルのインライン形式とは何ですか?これは、Excel で列全体に背景色を追加したときに通常表示されるものです。

<colgroup>…<colgroup>

物件名

プロパティ値

例示する

整列

左車線維持

中心

試験に合格する

右に寄れ

ヴァリン

右に寄れ

トップ

合格

真ん中

真ん中

より低い

スパン

番号

インライン数


要約:テーブルの列のフォーマットを設定することで、必要なコンテンツの色を濃くすることができます。ここでは、列のコンテンツのみに焦点を当てます。

ソースコードは次のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <html>      
  2. <ヘッド>      
  3.      
  4. < li >ネストされたテーブルの使用 1 </ li >      
  5.      
  6. <  = "500"   >      
  7. < tr >      
  8. < td   align = "center" >生徒の成績</td>      
  9. </tr>      
  10. < td >      
  11. < 境界線= "1"  = "100%" >      
  12. <スレッド>            
  13. < tr >      
  14. < th >名前</ th >      
  15. < th >中国語</ th >      
  16. < th >数学</ th >      
  17. < th >外国語</ th >      
  18. </tr>      
  19. </スレッド>      
  20. < tボディ>      
  21. < tr >      
  22. < td >張三</ td >      
  23. < td > 95 </ td >      
  24. < td > 95 </ td >      
  25. < td > 95 </ td >      
  26. </tr>      
  27. < tr >      
  28. < td >張三</ td >      
  29. < td > 95 </ td >      
  30. < td > 95 </ td >      
  31. < td > 95 </ td >      
  32. </tr>      
  33. < tr >      
  34. < td >張三</ td >      
  35. < td > 95 </ td >      
  36. < td > 95 </ td >      
  37. < td > 95 </ td >      
  38. </tr>      
  39. </ tbody >      
  40. < tfoot >      
  41. < tr >      
  42. < td   colspan = "4 " >結果の概要</td>      
  43. </tr>      
  44. </ tfoot >      
  45. </>      
  46. </ td >      
  47. </tr>      
  48. </>      
  49.      
  50. <br />      
  51.      
  52. < li >ネストされたテーブルの使用 2 </ li >      
  53.      
  54. < 境界線= "1"  = "500"   >      
  55. <キャプション  align = "bottom" >生徒の成績</ caption >      
  56. <スレッド>      
  57. < tr >      
  58. < th >名前</ th >      
  59. < th >中国語</ th >      
  60. < th >数学</ th >      
  61. < th >外国語</ th >      
  62. </tr>      
  63. </スレッド>      
  64. < tボディ>      
  65. < tr >      
  66. < td >張三</ td >      
  67. < td > 95 </ td >      
  68. < td > 95 </ td >      
  69. < td > 95 </ td >      
  70. </tr>      
  71. < tr >      
  72. < td >張三</ td >      
  73. < td > 95 </ td >      
  74. < td > 95 </ td >      
  75. < td > 95 </ td >      
  76. </tr>      
  77. < tr >      
  78. < td >張三</ td >      
  79. < td > 95 </ td >      
  80. < td > 95 </ td >      
  81. < td > 95 </ td >      
  82. </tr>      
  83. </ tbody >      
  84. < tfoot >      
  85. < tr >      
  86. < td   colspan = "4 " >結果の概要</td>      
  87. </tr>      
  88. </ tfoot >      
  89. </>      
  90.         
  91. <br />      
  92.      
  93. < li >ネストされたテーブルの使用 3 </ li >      
  94. < 境界線= "1"  = "500"   >      
  95. <キャプション  align = "bottom" >生徒の成績</ caption >      
  96. <  > </>      
  97. <  bgcolor => </ col >      
  98. <スレッド>      
  99. < tr >      
  100. < th >名前</ th >      
  101. < th >中国語</ th >      
  102. < th >数学</ th >      
  103. < th >外国語</ th >      
  104. </tr>      
  105. </スレッド>      
  106. < tボディ>      
  107. < tr   >      
  108. < td >張三</ td >      
  109. < td > 95 </ td >      
  110. < td > 95 </ td >      
  111. < td > 95 </ td >      
  112. </tr>      
  113. < tr >      
  114. < td >張三</ td >      
  115. < td > 95 </ td >      
  116. < td > 95 </ td >      
  117. < td > 95 </ td >      
  118. </tr>      
  119. < tr >      
  120. < td >張三</ td >      
  121. < td > 95 </ td >      
  122. < td > 95 </ td >      
  123. < td > 95 </ td >      
  124. </tr>      
  125. </ tbody >      
  126. < tfoot >      
  127. </ tfoot >      
  128. </>      
  129.      
  130. </本文>      
  131. </ヘッド>      
  132. </html>     

以上が、エディターがお届けするHTMLウェブページテーブル構造化マークアップの応用内容のすべてです。皆様のお役に立てれば幸いです。123WORDPRESS.COMを応援してくださいね~

Web テーブルの構造マークアップについて説明する前に、いくつかの画像を見てみましょう。

HTML テーブルの構造化

いわゆる構造化とは、上記の最初の図に示すように、テーブルをヘッダー、本文、フッターの 3 つのタイプに分割することです。したがって、テーブル本体を変更しても他の 2 つの部分には影響がないため、結合が解除され、アプリケーションが容易になります。

構造化フォーマット

XML/HTML コードコンテンツをクリップボードにコピー
  1. <>      
  2.      
  3. < thead > </ thead > --------ヘッダー領域
  4.      
  5. < tbody > </ tbody > --------- 表本体領域
  6.      
  7. < tfoot > </ tfoot > ------------表のフッター領域
  8.      
  9. </>     

要約:表を 3 つの部分に分割すると、表の編集が容易になります。

HTML テーブルタイトル

上記の 2 番目の図に示すように、各テーブルには独自のタイトルがありますが、コンテンツに合わせてタイトルを移動させるにはどうすればよいでしょうか。

表のタイトル

XML/HTML コードコンテンツをクリップボードにコピー
  1. <>      
  2.      
  3. <キャプション> </キャプション>      
  4.      
  5. </>     
<caption> の下の属性値は次のとおりです。

<<:  MySQL Innodb インデックス メカニズムの詳細な紹介

>>:  DockerコンテナでLNMPをコンパイルする例

推薦する

Ace をベースにした Markdown エディターを共有する

エディターは 2 つのカテゴリに分かれていると思います。1 つは、即時レンダリングを実現するために左...

JavaScript デザインパターン コマンドパターン

コマンド パターンは、JavaScript デザイン パターンにおける動作デザイン パターンです。定...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

ディスク容量不足による MySQL レプリケーション障害の解決方法

目次ケースシナリオ問題を解決するまとめケースシナリオ本日、オンラインで問題が発見されました。監視範囲...

UDP 接続オブジェクトの原理分析と使用例

以前、UDP を使い始めるために簡単な UDP サーバーとクライアントの例を作成しましたが、実際に使...

VMware Workstation16 と Navicat リモート接続での Centos7 での MySQL8.0 インストール プロセス

目次1. CentOS7+MySQL8.0、yumソースインストール2. MySQLにログインしてパ...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

win2008 で mysql8.0.11 を mysql8.0.17 にアップグレードする詳細な手順

アップグレードの背景: MySQLの下位バージョンの脆弱性を解決するために、MySQLはMySQL ...

CentOS7 に YUM 経由で MySQL 5.7 をインストールする詳細な手順

1. インストールパッケージを保存する場所に移動しますcd /home/lnmp 2. MySQL ...

Linux での Nginx 監視の問題

nginxのインストール仮想マシンがインターネットにアクセスできることを確認します。 1. ルートユ...

MySQL インデックスの使用方法 (単一列インデックスと複数列インデックス)

1. 単一列インデックスどの列にインデックスを作成するかを選択することは、パフォーマンス最適化プロ...

JSはUUIDとNanoIDというユニークなIDメソッドを生成します

目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文:ユ...

プロジェクトにおける CSS グリッドシステムの柔軟な使用方法の詳細な説明

序文CSS グリッドは通常、さまざまなフレームワークにバンドルされていますが、実際のビジネス ニーズ...

MySQLからHiveにさらにデータをインポートするためのソリューション

元の派生コマンド: bin/sqoop インポート -connect jdbc:mysql://19...