HTML の表のフレームとルール属性の詳細な説明

HTML の表のフレームとルール属性の詳細な説明

テーブル タグの frame 属性と rules 属性は境界線の表示を制御できます。フレーム プロパティはテーブルの最も外側の 4 つの境界線の可視性を制御し、ルールはテーブルの内側の境界線の可視性を制御します。
フレーム属性の可能な値と意味は次のとおりです。
* void - デフォルト値。表の最も外側の境界線が表示されないことを示します。
* ボックス - 4 つの境界線を同時に表示します。
* border - 4 つの境界線を同時に表示します。
* 上記 - 上の境界線のみを表示します。
* 下 - 下の境界線のみを表示します。
* lhs - 左の境界線のみを表示します。
* rhs - 右側の境界線のみを表示します。
* hsides - 2 つの水平境界線のみを表示します。
* vsides - 2 つの垂直境界線のみを表示します。
ルール属性には 5 つの値が可能です。
* none - デフォルト値。国境はありません。
* グループ - 行または列のグループに境界線を追加します。
* 行 - 行に境界線を追加します。
* cols - 列に境界線を追加します。
* all - すべての行と列(セル)に境界線を追加します


コード例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. < 境界線= "1"  = "600"  フレーム= "hsides"  ルール= "グループ" >   
  2.       <キャプション>私の究極のテーブル</キャプション>   
  3.       <コルグループ スパン= "1"  = "200" > </列グループ>   
  4.       <コルグループ スパン= "3"  = "400" > </列グループ>   
  5.   
  6. <スレッド>   
  7.       < tr >   
  8.            < td >セル 1-1 </ td >   
  9.            < td >セル 1-2 </ td >   
  10.            < td >セル 1-3 </ td >   
  11.            < td >セル 1-4 </ td >   
  12.       </tr>   
  13. </スレッド>   
  14. < tfoot >   
  15.       < tr >   
  16.            < td >セル 4-1 </ td >   
  17.            < td >セル 4-2 </ td >   
  18.            < td >セル 4-3 </ td >   
  19.            < td >セル 4-4 </ td >   
  20.       </tr>   
  21. </ tfoot >   
  22. < tボディ>   
  23.       < tr >   
  24.            < td >セル 2-1 </ td >   
  25.            < td >セル 2-2 </ td >   
  26.            < td >セル 2-3 </ td >   
  27.            < td >セル 2-4 </ td >   
  28.       </tr>   
  29.       < tr >   
  30.            < td >セル 3-1 </ td >   
  31.            < td >セル 3-2 </ td >   
  32.            < td >セル 3-3 </ td >   
  33.            < td >セル 3-4 </ td >   
  34.       </tr>   
  35. </ tbody >   
  36. </>   

ブラウザでの表示効果は次のようになります。
201678140942598.jpg (599×127)

<<:  MySQL ソート機能の詳細

>>:  momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)

推薦する

CentOS で Mysql を再起動するさまざまな方法 (推奨)

1. rpm パッケージ経由でインストールされた MySQL サービスmysqldを再起動 /et...

Win10 インストール Linux システム チュートリアル ダイアグラム

Windows システムに仮想マシンをインストールするには、 VMware Workstationソ...

NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

1: アドレス書き換えとア​​ドレス転送の意味を理解する。アドレス書き換えとア​​ドレス転送は異なる...

MySQL トランザクション分離レベルの表示と変更の例

トランザクション分離レベルを確認するMySQL では、'%tx_isolation%'...

XHTML 入門チュートリアル: テキストの書式設定と特殊文字

<br />このセクションでは、XHTML でテキストの書式設定と特殊文字を実装する方法...

MySQLのビューとインデックスの使い方と違いの詳細な説明

MySQL ビュー簡単に言えば、MySQL ビューは SELECT コマンドを定義するためのショート...

すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください

各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...

Vue router-viewとrouter-linkの実装原理

使用 <div id="アプリ"> <router-link ...

Ajax リクエストにおけるクロスドメイン問題の原因と解決策

目次1. クロスドメインはどのように形成されるのでしょうか? 2. クロスドメインの根本的な原因3....

MYSQLクエリデータの結果に自動的に番号を付ける方法

序文実際、クエリ中に結果に番号が付けられるこのような状況に遭遇したことは一度もありません。同僚が転職...

JavaScriptの厳密モードが8進数をサポートしていない問題の説明

JavaScript厳密モードが 8 進数をサポートしていないという問題に関して、まず、 Java...

HttpとHttpsの両方をサポートするNginxの詳細な設定

最近の Web サイトでは Https をサポートすることがほぼ標準機能となっており、Nginx は...

iframe に関するいくつかの発見と考察

この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...