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 最速のテキスト検索ツール ripgrep (grep の最良の代替)

序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法

ダウンロードMySQL 公式ダウンロード、Windows (x86、64 ビット)、ZIP アーカイ...

Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例

効果: まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...

Vue はインターフェースのスライド効果を実装します

この記事では、インターフェースのスライド効果を実現するためのVueの具体的なコードを例として紹介しま...

Mysql InnoDBとMyISAMの違いの分析

MySQL は、myisam、innodb、memory、archive、example など、多く...

JavaScript スタイル オブジェクトと CurrentStyle オブジェクトのケース スタディ

1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...

Vue双方向バインディングの詳細な説明

目次1. 双方向バインディング2. 他のタグを選択した場合にも同じ結果になりますか? 答えはもちろん...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

MySQLデータテーブルの基本操作:テーブル構造の操作、フィールド操作例の分析

この記事では、テーブル構造操作やフィールド操作など、MySQL データ テーブルの基本的な操作につい...

JSはクリックドロップ効果を実装します

jsはクリックとドロップの特殊効果を実現します。まずは効果画像を見てみましょうさっそく始めましょう。...

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャ...

TortoiseSvn Little Turtle インストール 最新の詳細なグラフィックチュートリアル

tortoiseGit のインストール時にいつも問題があったので、単純に svn に変更しました。途...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

HTMLチュートリアル、簡単に学べるHTML言語

1. <body background=画像ファイル名 bgcolor=color text=...