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 を使用してカウントダウン コンポーネントを作成する (サンプル コード)

推薦する

Linuxにログインする際の文字セットの問題を解決する方法

文字セットエラーは常に存在するロケール: LC_CTYPE をデフォルト ロケールに設定できません:...

JavaScript配列の一般的なメソッドの詳細な説明

目次一般的な配列メソッドポップ()シフト解除()シフト()スライス()スプライス()配列から重複した...

Node.js を使用してパスワード ジェネレータを作成するための完全な手順

目次1. 準備2. コマンドラインの記述2.1 バージョンと説明を追加する2.2 パスワードの長さを...

MySQL で準備、実行、割り当て解除ステートメントを使用するチュートリアル

序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...

最小限の展開で CentOS8 に OpenStack Ussuri をインストールする方法の詳細なチュートリアル

CentOS8 に最小限のデプロイメントで OpenStack Ussuri をインストールするため...

nodejs で worker_threads を使用して新しいスレッドを作成する方法

導入前の記事で述べたように、NodeJS には 2 種類のスレッドがあります。1 つは、ユーザー リ...

JavaScript 関数呼び出しの典型的なサンプルコード

目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...

wgetはウェブサイト全体(サブディレクトリ全体)または特定のディレクトリをダウンロードします

wgetコマンドを使用して、親ディレクトリの下のサブディレクトリ全体をダウンロードします。親ディレク...

MySQL 8.0.2 オフラインインストールと設定方法のグラフィックチュートリアル

MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...

MySQL はエンタープライズレベルのログ管理、バックアップ、リカバリの実践的なチュートリアルを実装します

背景事業が発展するにつれ、会社の事業内容や規模は拡大し続け、ウェブサイトには大量のユーザー情報やデー...

CSS 手法を使用してモジュール性を実現する例

1. CSS 方法論とは何ですか? CSS methodologiesデザイン パターンまたは CS...

HTML に埋め込まれた MP4 形式のビデオが再生できないのはなぜですか?

次のコードは、私の test.html にあります。ビデオは、c:\test.html などの絶対パ...

Windows 環境での MySQL の解凍、インストール、バックアップ、復元

システム環境はserver2012です1. MySQLの解凍バージョンをダウンロードし、インストール...

MySQL InnoDB ストレージ エンジンの詳細

序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...

js で継承を実装する 5 つの方法

コンストラクタの借用この手法の基本的な考え方は単純です。サブタイプ コンストラクター内からスーパータ...