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

推薦する

複数の Tomcat を展開して起動し、プロジェクトを移行する方法を 1 つの記事で学習します。

目次tomcatをデプロイする1.ダウンロードして解凍する2. 設定ファイルを変更する移植プロジェク...

49 個の JavaScript のヒントとコツ

目次1. js整数の演算2. ネイティブアラートを書き換えてポップアップボックスの数を記録する3. ...

Baidu の https 認証プロンプト「http サイトを 301 から https サイトにリダイレクトしてください」の解決方法の詳細な説明

最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...

スケルトンスクリーン効果を実現する CSS

ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...

HTML の相対パスと絶対パスの違いの分析

HTML 初心者は、ファイルを正しく参照する方法という問題によく遭遇します。たとえば、HTML ペー...

HTML ページに画像を挿入し、マップ インデックスを追加する方法の例

1. WEBでサポートされている画像形式: GIF: 256色を保存でき、透明色をサポートし、アニメ...

例を通してMySQLパーティションテーブルの原理と一般的な操作を学びます

1. パーティションテーブルの意味パーティション テーブル定義は、任意のサイズに設定できるルールに従...

画像を読み込むための JavaScript キャンバス

この記事では、画像を読み込むためのJavaScriptキャンバスの具体的なコードを参考までに紹介しま...

MySQL の結合テーブルにインデックスを作成する方法

この記事では、MySQL で 2 つのテーブルを関連付ける結合テーブルにインデックスを作成する方法を...

grpc のリバース プロキシとして nginx を使用する場合の落とし穴の概要

背景ご存知のとおり、nginx は高性能な Web サーバーであり、負荷分散やリバース プロキシによ...

Vue Element UIの使用時に遭遇した問題をまとめる

目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...

1つの記事でJavaScriptのクロージャ関数について学ぶ

目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...

SQL インジェクションの詳細

1. SQL インジェクションとは何ですか? SQL インジェクションは、入力パラメータに SQL ...

スキニングを実現するネイティブJavaScript

ネイティブJavaScriptでスキニングを実装するための具体的なコードは参考までに。具体的な内容は...

Dockerコンテナを使用してプロキシ転送とデータバックアップを実装する方法

序文アプリケーションを Docker コンテナとしてサーバーにデプロイする場合、通常はネットワークと...