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

推薦する

MySQL 検査スクリプト (必読)

以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...

DHTML オブジェクト (さまざまな HTML オブジェクトの共通プロパティ)

!DOCTYPE HTML ドキュメントが準拠するドキュメント型定義 (DTD) を指定します。 ...

HTML のブロックレベル要素と行レベル要素、特殊文字、ネスト規則

基本的な HTML Web ページ タグのネスト ルールを紹介する場合、最初に説明する必要があるのは...

Windows 10 での MySQL 8.0 のダウンロードとインストール構成のグラフィック チュートリアル

この記事では、MySQL 8.0のダウンロードとインストールについてご紹介します。具体的な内容は以下...

Vueはシンプルなタイマーコンポーネントを実装します

プロジェクトを実行すると、リアルタイム更新、広告アニメーションの連続表示などの要件に遭遇することは避...

deepin 2014 システムに MySQL データベースをインストールする方法

Deepin 2014 のダウンロードとインストールDeepin 2014 のダウンロードとインスト...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...

iframe を介してフレームセットを本体に配置する

フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...

役に立つメタ設定方法(必読)

<meta name="viewport" content="...

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...

CSS3 で less のテキストの長い影を実装する

この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...

Linux で PyCurl のエラーを解決する方法

「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...

数千万件のレコードをMySQLに素早く挿入する方法に関する実践的なチュートリアル

1. データベースを作成する 2. テーブルを作成する1. deptテーブルを作成する テーブル「d...

Dockerはポートを介してコンテナに接続します

Dockerコンテナ接続1. ネットワークポートマッピングPythonアプリケーション用のコンテナを...

vue backtop コンポーネントを実装するための完全なコード

効果: コード: <テンプレート> <div class="back-t...