HTMLのテーブル表のframe属性とrule属性の説明
2022-01-09 13:18:59
のframe属性とrules属性があります。
tableタグのframe属性とrules属性は、ボーダーの表示を制御します。frameはテーブルの一番外側の4つのボーダーの見え方を制御し、rulesはテーブルの内側のボーダーの見え方を制御します。
また
frame属性の望ましい値と意味は以下の通りです。
* void - デフォルト値です。フォームの一番外側のボーダーを表示しないことを示す。
* ボックス - 4つのボーダーを同時に表示します。
* ボーダー - 4つのボーダーを同時に表示します。
* 上記 - 一番上のボーダーのみを表示します。
* 下 - 下部のボーダーのみが表示されます。
{下枠のみ表示
* lhs - 左側のボーダーのみを表示します。
* rhs - 右のボーダーのみを表示します。
* hsides - 2つの水平ボーダーのみを表示します。
* vsides - ボーダーの垂直方向の2辺のみを表示します。
rulesプロパティは5つの値を取ることができます。
* none - デフォルト値です。ボーダーなし。
* グループ - 行または列のグループにボーダーを追加します。
* rows - 行にボーダーを追加します。
* cols - 列にボーダーを追加します。
* all - すべての行(セル)にボーダーを追加します。
コード例です。
XML/HTMLコード
コンテンツをクリップボードにコピーする
- < テーブル ボーダー = "1" 幅 = "600" フレーム = "hsides" ルール = "グループ" >
- < キャプション > マイ・アルティメット・テーブル < キャプション >
- < コルグループ スパン = "1" 幅 = "200" > < コルグループ >
- < コルグループ スパン = "3" 幅 = "400" > < コルグループ >
- < テード >
- < tr >
- < td > セル1-1 < td >
- < td > セル1-2 < td >
- < td > セル1-3 < td >
- < td > セル1-4 < td >
- < tr >
- < テード >
- < 足 >
- < tr >
- < td > セル4-1 < td >
- < td > セル4-2 < td >
- < td > セル4-3 < td >
- < td > セル4-4 < td >
- < tr >
- < 足 >
- < 本体 >
- < tr >
- < td > セル2-1 < td >
- < td > セル2-2 < td >
- < td > セル2-3 < td >
- < td > セル2-4 < td >
- < tr >
- < tr >
- < td > セル3-1 < td >
- < td > セル3-2 < td >
- < td > セル3-3 < td >
- < td > セル3-4 < td >
- < tr >
- < 本体 >
- < テーブル >
ブラウザでの表示はこのようになります。
関連
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
HTMLとJavaScriptでローカルメディア(ビデオやオーディオ)ファイルを再生する方法
-
border-radius は、要素に丸みを帯びたボーダーを追加する方法です。
-
メタデータに基づく時限的なページ更新やジャンプ
-
セレクトドロップダウンメニューのテキストを左右にスクロールするように設定する方法
-
モバイルウェブサイズ適応手法の実装
-
Html,sHtml,XHtml差分解析まとめ
-
Webページでよく使われるコード より基本的なもの
-
HTML&CSS&JS互換ツリー(IE、Firefox、chrome)
-
テーブル表におけるコンテンツのはみ出しに対するレイアウト方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン