CSSを使用して表の枠線をスタイル化する
以前のWeb開発欄では、HTMLテーブルを処理する方法をいくつか紹介しました.現在、テーブルを使用してWebページをレイアウトする方法は流行していませんが、テーブルを使用してテーブル列データを表示することができます.
表を表示してスタイル化する方法はいろいろありますが、この記事ではCSSを使用して表の枠線をスタイル化する方法を紹介します.
リンク
CSS 2テーブルモデルはHTML 4.01テーブルモデルに基づく.表には、オプションのアンカーマークとセル、およびデータ行が含まれます.表モデルには、表、アンカー、データ行、データ行グループ、データ列、データ列グループ、およびセルの要素が含まれます.この文章では、表の各要素の枠線処理方法について集中的に説明します.
枠線
必要に応じて、表とセルに異なる枠線を適用できます.表全体の枠線を定義したり、個別のセルを個別に定義したりできます.CSSの枠線プロパティでは、枠線のサイズと色とタイプを指定できます.次のコードは、幅5ピクセルの黒い実線の枠線を定義します.
l none:テーブルに枠線がないことを指定します.枠線の幅は0です.
l dotted:点線からなる表の枠線.
l dashed:破線からなる表の枠線.
l solid:実線からなる表の枠線.
l Double:二重実線からなる表の枠線.
l Groove:溝線効果ボーダー.
l ridge:リッジ効果の枠線で、溝効果とは逆です.
l inset:凹み効果ボーダー.
l outset:外凸効果の枠線で、内凹効果とは逆です.
各枠線タイプでは、背景色に枠線を描画する色を指定できます.リストAでは、枠線プロパティを使用して、表全体とアンカーマークと個別のセルをスタイル化します.
リストA
この例では、よく知られているメトリック単位(ピクセル、ポンド、行長単位など)を使用できるテーブルの枠線のオプションをいくつか示します.枠線のサイズを設定します.16進数の数値または色名を使用して枠線の色を指定できます.次の例では、枠線を定義する方法を示します.
この文には、幅、スタイル、色のプロパティの定義が組み込まれていますが、次のように要素を個別に定義することもできます.
リストB
CAPTION要素全体の枠線が青5ポンドのリッジ効果として定義され、CAPTION枠線の上部が10ポンドに設定されていることに気づくかもしれません.個別の枠線設定(左、右、上、下)が後に表示されると、元の枠線設定全体が上書きされます.
それ以外に、前の例では、TABLE要素の枠線属性を割り当てることで、1つのテーブルで複数の枠線(アンカーマーク、テーブル本体、ヘッダー、個別のセルなど)を実現できます.
枠線の間隔
枠線の間隔プロパティを使用して隣接するセル間の距離を指定できます.1つまたは2つの値を指定できます.値を指定すると、水平および垂直の間隔で使用されます.2つの値が指定されている場合、1番目の値は水平間隔を指定し、2番目の値は垂直間隔を指定します.これらの値は負の値ではありません.この例では10ポンドの間隔値を使用しました.
表の動作
枠線のcollapseプロパティは、表の枠線モデルを設定します.このプロパティのデフォルト値は独立した枠線モデルで、個別の枠線モデルはborder-spacingプロパティを異なる枠線間の間隔として使用し、この間隔は表要素を背景として使用します.
ボーダーモデルの場合、World Wide Web Consortiumでは、テーブルスタイルの競合を解決するための次のルールが定義されています.
l「非表示」枠線属性を使用する枠線は、他の枠線属性よりも優先され、「非表示」属性を使用する枠線は、他の枠線属性よりも優先されます.
l「スタイルなし」枠線を使用する優先度が最も低く、同じ場所にあるすべての要素の枠線属性が「スタイルなし」である場合、表の枠線は無視されます.(「スタイルなし」は、枠線スタイルのデフォルト値であることに注意してください.)
lスタイルが「非表示」に設定されておらず、少なくとも1つのスタイルが「スタイルなし」に設定されていない場合、幅の広い枠線の優先度は細い枠線より高い.枠線スタイルの優先度は、二重実線、単実線、破線、点線、稜線、外凸、溝線で、最も低いレベルは内凹です.
l枠線スタイルが色のみ異なる場合、セルのスタイルの優先度は行の優先度より高く、行グループ、列、列グループ、および表全体より高い.
枠線
表は他のHTML要素と同様にCSSスタイルの選択肢がたくさんあります.表とセルの枠線は良い例であり、CSSは表スタイルのニーズを満たすことができるはずです.しかし、CSSフォーマットを使用した表はブラウザによって異なる効果を示すため、広範なテストが必要です.
CSSの「ファン」ですか?HTMLテーブルのスタイルで使用したオプションは?記事のディスカッションエリアで経験を共有してください.
文章は転載して、出典は調べることができませんでした.
表を表示してスタイル化する方法はいろいろありますが、この記事ではCSSを使用して表の枠線をスタイル化する方法を紹介します.
リンク
CSS 2テーブルモデルはHTML 4.01テーブルモデルに基づく.表には、オプションのアンカーマークとセル、およびデータ行が含まれます.表モデルには、表、アンカー、データ行、データ行グループ、データ列、データ列グループ、およびセルの要素が含まれます.この文章では、表の各要素の枠線処理方法について集中的に説明します.
枠線
必要に応じて、表とセルに異なる枠線を適用できます.表全体の枠線を定義したり、個別のセルを個別に定義したりできます.CSSの枠線プロパティでは、枠線のサイズと色とタイプを指定できます.次のコードは、幅5ピクセルの黒い実線の枠線を定義します.
TABLE { 5px solid black; }l none:テーブルに枠線がないことを指定します.枠線の幅は0です.
l dotted:点線からなる表の枠線.
l dashed:破線からなる表の枠線.
l solid:実線からなる表の枠線.
l Double:二重実線からなる表の枠線.
l Groove:溝線効果ボーダー.
l ridge:リッジ効果の枠線で、溝効果とは逆です.
l inset:凹み効果ボーダー.
l outset:外凸効果の枠線で、内凹効果とは逆です.
各枠線タイプでは、背景色に枠線を描画する色を指定できます.リストAでは、枠線プロパティを使用して、表全体とアンカーマークと個別のセルをスタイル化します.
<html>
<head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10pt;
border: 5px solid red; }
TD, TH {
background: white;
border: inset 5pt;
horizontal-align: right; }
CAPTION { border: ridge 5pt blue; }
</style><body>
<table summary="TechRepublic.com - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<thabbr="salesperson" scope="col">Person</th>
<thabbr="sales" scope="col">Sales</th>
</tr></thead>
<tbody><tr>
<td>Mr. Smith</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<td colspan="2">Let's sale, sale, sale!</td>
</tr></tfoot></table></body></html>リストA
この例では、よく知られているメトリック単位(ピクセル、ポンド、行長単位など)を使用できるテーブルの枠線のオプションをいくつか示します.枠線のサイズを設定します.16進数の数値または色名を使用して枠線の色を指定できます.次の例では、枠線を定義する方法を示します.
border: 5px solid red;この文には、幅、スタイル、色のプロパティの定義が組み込まれていますが、次のように要素を個別に定義することもできます.
border-width: 5px;
border-style: solid;
border-color: red;<html><head><title>HTML Table</title></head>
<style type="text/css">
TABLE {
background: blue;
border-collapse: separate;
border-spacing: 10pt;
border-top: 15px solid red;
border-left: 15px solid red;
border-right: 5px dashed black;
border-bottom: 10px dashed blue; }
TD, TH {
background: white;
border: outset 5pt;
horizontal-align: right; }
CAPTION {
border: ridge 5pt blue;
border-top: ridge 10pt blue; }
</style><body>
<table summary="TechRepublic.com - Tables and CSS">
<caption>First Quarter Sales</caption>
<thead><tr>
<thabbr="salesperson" scope="col">Person</th>
<thabbr="sales" scope="col">Sales</th>
</tr></thead>
<tbody><tr>
<td>Mr. Smith</td>
<td>600.00</td>
</tr><tr>
<td>Mr. Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms. Williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<td colspan="2">Let's sale, sale, sale!</td>
</tr></tfoot></table></body></html>リストB
CAPTION要素全体の枠線が青5ポンドのリッジ効果として定義され、CAPTION枠線の上部が10ポンドに設定されていることに気づくかもしれません.個別の枠線設定(左、右、上、下)が後に表示されると、元の枠線設定全体が上書きされます.
それ以外に、前の例では、TABLE要素の枠線属性を割り当てることで、1つのテーブルで複数の枠線(アンカーマーク、テーブル本体、ヘッダー、個別のセルなど)を実現できます.
枠線の間隔
枠線の間隔プロパティを使用して隣接するセル間の距離を指定できます.1つまたは2つの値を指定できます.値を指定すると、水平および垂直の間隔で使用されます.2つの値が指定されている場合、1番目の値は水平間隔を指定し、2番目の値は垂直間隔を指定します.これらの値は負の値ではありません.この例では10ポンドの間隔値を使用しました.
表の動作
枠線のcollapseプロパティは、表の枠線モデルを設定します.このプロパティのデフォルト値は独立した枠線モデルで、個別の枠線モデルはborder-spacingプロパティを異なる枠線間の間隔として使用し、この間隔は表要素を背景として使用します.
ボーダーモデルの場合、World Wide Web Consortiumでは、テーブルスタイルの競合を解決するための次のルールが定義されています.
l「非表示」枠線属性を使用する枠線は、他の枠線属性よりも優先され、「非表示」属性を使用する枠線は、他の枠線属性よりも優先されます.
l「スタイルなし」枠線を使用する優先度が最も低く、同じ場所にあるすべての要素の枠線属性が「スタイルなし」である場合、表の枠線は無視されます.(「スタイルなし」は、枠線スタイルのデフォルト値であることに注意してください.)
lスタイルが「非表示」に設定されておらず、少なくとも1つのスタイルが「スタイルなし」に設定されていない場合、幅の広い枠線の優先度は細い枠線より高い.枠線スタイルの優先度は、二重実線、単実線、破線、点線、稜線、外凸、溝線で、最も低いレベルは内凹です.
l枠線スタイルが色のみ異なる場合、セルのスタイルの優先度は行の優先度より高く、行グループ、列、列グループ、および表全体より高い.
枠線
表は他のHTML要素と同様にCSSスタイルの選択肢がたくさんあります.表とセルの枠線は良い例であり、CSSは表スタイルのニーズを満たすことができるはずです.しかし、CSSフォーマットを使用した表はブラウザによって異なる効果を示すため、広範なテストが必要です.
CSSの「ファン」ですか?HTMLテーブルのスタイルで使用したオプションは?記事のディスカッションエリアで経験を共有してください.
文章は転載して、出典は調べることができませんでした.