表の属性を学習してHTML表を最大限に活用する
HTML表属性を使用すると、HTML表をより詳細に制御できます。 テーブルをより面白くし、ページの外観を変えるために、多くの属性をテーブルに用意しています。
HTML TABLE要素の属性
HTML5では、要素はグローバル属性と他の1つの属性を使用します。 そして、それは1または空の値（すなわちborder = ""）しか持たないように変更されました。 境界線の幅を変更する場合は、border-width CSSプロパティを使用する必要があります。
有効なHTML5表の属性については、以下を参照してください。
HTML5で廃止されたHTML 4.01仕様の一部である属性もいくつかあります。
- - テーブルのTD要素とTH要素のCSSパディングプロパティを使用します。
- - テーブルのCSSプロパティのborder-spacingを使用します。
- CSSスタイルを使用するborder-color：black; テーブル上にborder-styleを指定します。
- CSSスタイルを使用するborder-color：black; テーブルの適切な要素にborder-styleを指定します。
- - 代わりに、表の構造をCAPTIONに記述するか、または表全体をFIGUREに入れ、それをFIGCAPTIONで記述する必要があります。 あるいは、説明が必要ないようにテーブルの構造を単純化することもできます。
- CSSのwidthプロパティを使用します。
HTML 4.01では廃止され、HTML5では廃止されました。
HTML 4.01の表属性の詳細については、こちらをご覧ください。
- align -代わりにCSS marginプロパティを使用します。
HTML仕様の一部ではない属性もいくつかあります。
これらの属性は、サポートしているブラウザがそれらを処理でき、有効なHTMLを気にしないことがわかっている場合に使用します。
- 代わりに、CSSのプロパティbackground-colorを使用します。
- bordercolor - 代わりにCSSプロパティのborder-colorを使用します。
- bordercolorlight - 代わりにCSSプロパティのborder-colorを使用します。
- bordercolordark - 代わりにCSSのプロパティborder-colorを使用します。
- cols - この属性に代わるものはありません。
- height - 代わりにCSSプロパティの高さを使用します。
- 代わりにCSSのプロパティマージンを使用します。
- 代わりにCSSのプロパティマージンを使用します。
- 代わりに、CSSプロパティの空白を使用します。
- 代わりに、CSSプロパティのvertical-alignを使用します。
ブラウザー固有のTABLE属性の詳細を確認してください。
HTML5 TABLE要素の属性
上記のように、HTML5のTABLE要素で有効なグローバル属性以外の属性は1つのみです。
border属性は、テーブル全体とその中のすべてのセルの周りに境界線を定義するために使用されます。 HTML5仕様に含まれるかどうかという疑問がありましたが、単純にスタイルの意味を超えて、テーブル構造に関する情報を提供したため残っていました。
境界線属性を追加するには、境界線がある場合は値を1に設定し、境界線がない場合は空にします（または属性を省略します）。 ほとんどのブラウザでは、枠線がない場合は0がサポートされ、枠線の幅をピクセル単位で宣言するその他の整数値（2,3,30,500など）もサポートされますが、これはHTML5では廃止されています。 代わりに、CSSの境界線のスタイルプロパティを使用して、境界線の幅やその他のスタイルを定義する必要があります。
境界線を持つ表を作成するには、次のように記述します。
border = "1" >
これは境界線を持つ表です
HTML5では時代遅れのHTML 4.01属性があります。 HTML 4.01文書の作成を計画している場合は、その文書を習得できます。そうでなければ、無視することができます。 これらの属性のほとんどは、上記の代替案を持っています。
HTML5 （およびHTML 4.01）で有効な要素の属性について説明します。 これはHTML 4.01で有効なTABLE属性を記述しますが、HTML5では廃止されています。 HTML 4.01文書をまだ作成している場合は、これらの属性を使用することができますが、HTML5への移行時にページの将来性を高める代替手段があります。
有効なHTML 4.01の属性
上記で説明した属性。
HTML5とHTML 4.01の唯一の違いは、整数（0,1,2,15,20,200など）を指定して境界線の幅をピクセル単位で指定できることです。
5pxの境界線を持つ表を作成するには、次のように記述します。
border = "5" >
この表には5ピクセルの境界線があります。
境界線を持つ2つのテーブルの例を参照してください。
この属性は、セルの枠線とセルの内容の間のスペースの量を定義します。 デフォルトは2ピクセルです。 コンテンツと枠線の間にスペースを入れない場合は、セルパッディングを0に設定します。
セルのパディングを20に設定するには、次のように記述します。
cellpadding = "20" >
このテーブルのセルパディングは20です。
セルの境界線は20ピクセルで区切られます。
セルパディングを使用したテーブルの例を表示する
この属性は、表のセルとセルの内容の間のスペースの量を定義します。 cellpaddingのように、デフォルトは2ピクセルに設定されているため、セルの間隔を必要としない場合は0に設定する必要があります。
セルの間隔をテーブルに追加するには、次のように記述します。
cellspacing = "20" >
この表のセル間隔は20です。
セルは20ピクセルで区切られます。
cellspacingの表を参照
この属性は、表の外側を囲むボーダーのどの部分が見えるかを識別します。 あなたは、4つの側面すべて、1つの側面、上部と下部、左と右、またはなしにテーブルをフレームすることができます。
ここでは、左側の境界線のみを持つ表のHTMLを示します。
frame = "lhs" >
この表
は
左端にフレームがあります。
下部フレームの別の例：
frame = "below" >
このテーブルの下部にフレームがあります。
フレーム付きのテーブルをチェックする
属性はフレーム属性に似ていますが、表のセルの周囲の境界線にのみ影響します。 TBODYやTFOOTのようなグループ間、列間のすべてのセルに対してルールを設定することができます。
rules = "rows" >
この4x4テーブルには
列が列でない
は
ルールの属性。
そして列の間に行がある別のもの：
rules = "cols" >
これは
テーブル
ここで
列
はです
強調表示
ルールを持つテーブルの例を次に示します
この属性は、テーブルの読み込みに問題のあるスクリーンリーダーやその他のユーザーエージェントのテーブルに関する情報を提供します。 要約属性を使用するには、表の簡単な説明を書き込んで、その属性の値として配置します。 要約は、ほとんどの標準WebブラウザのWebページには表示されません。
要約を含む単純な表を作成する方法は次のとおりです。
summary = "フィラー情報を含むサンプルテーブルです。この表の目的は、要約を示すことです。 >
列1行1
列2行1
列1行2
列2行2
要約を含む表を表示する
この属性は、テーブルの幅をピクセル単位またはコンテナ要素の割合で定義します。 幅が設定されていない場合、テーブルは内容を表示するのに必要なだけのスペースを占有します。最大幅は親要素の幅と同じです。
特定の幅のテーブルをピクセル単位で作成するには、次のように記述します。
width = "300" >
この表は、コンテナの幅の80％です。
親要素のパーセンテージである幅を持つテーブルを作成するには、次のように記述します。
<テーブル幅= "80％" >
この表は、コンテナの幅の80％です。
幅のあるテーブルの例を参照してください。
非推奨HTML 4.01 TABLE属性
HTML 4.01では廃止され、HTML5では廃止されたTABLE要素の1つの属性があります 。 この属性を使用すると、テーブルの横にあるテキストを基準にして、ページ上にテーブルを配置する場所を設定できます。 この属性はHTML 4.01では廃止されており、使用しないでください。 その代わりに、CSSプロパティまたはmargin-left：autoを使用する必要があります。 margin-right：auto; スタイル。 floatプロパティは、align属性で提供されているものに近い結果をもたらしますが、ページコンテンツの残りの表示方法に影響する可能性があります。 margin-right：auto; margin-left：auto; W3Cが推奨するものです。
align属性を使用して非推奨の例を次に示します。
align = "right" >
この表は右揃えです
テキストがその周りを左に流れます
推奨されていない、align属性を使用した例を参照してください。
また、有効な（非推奨）HTMLで同じ効果を得るには、次のように記述します。
style = "float：right;" >
この表は右揃えです
テキストがその周りを左に流れます
以下に、HTML仕様の一部ではないTABLE属性について説明します。
上記の情報は、HTML 4.01で有効なHTML要素の属性を説明していますが、HTML5では廃止されています。
以下では、現在の仕様では無効なTABLE属性について説明します。 ページが妥当性を確認し、ユーザーがこれらの要素をサポートするブラウザを使用しているかどうか気にしない場合は、これらの要素を使用できます。 しかし、それらのほとんどは現代のブラウザではサポートされていないか、より標準に準拠した選択肢があります。
これらの属性をHTMLテーブルで使用することはお勧めしません 。
属性は、CSSが広くサポートされる前に含まれていた古い属性です。 それはあなたがテーブルの背景色を変更することができます。 色名または16進コードを設定できます。 この属性は、まだ多くのブラウザで機能しますが、将来保証されているHTMLの場合は、それを使用せず、代わりにCSSを使用してください。
この属性に代わるより良い方法は、styleプロパティです。
表の背景色を変更するには、次のように記述します。
style = "background-color：#ccc;" >
この表は灰色の背景を持っています
bordercolor属性を使用すると、bgcolor属性と同様に属性の色を変更できます。 この属性はInternet Explorerでのみサポートされています。 代わりに、border-colorスタイルのプロパティを使用する必要があります。
テーブルの境界線の色を変更するには、次のように記述します。
style = "border-color：red;" >
この表には赤い枠線があります。
bordercolorlight属性とbordercolordark属性はInternet Explorerに含まれており、テーブルの周りに3D境界線を作成することができます。 しかし、IE8以降では、これはIE7標準モードとQuirksモードでのみサポートされています 。 Microsoftは、これらのプロパティはもはやサポートされていないと述べています。
短時間の間、TABLE要素のcols属性は、ブラウザがテーブルのカラム数を知るのを助けるために提案されました。 これは、大きなテーブルのレンダリングを高速化するのに役立つことを前提としていました。 しかし、それはInternet Explorerによってのみ実装され、IE8以降では、これはIE7標準モードとQuirksモードでのみサポートされています。
width属性（HTML5では廃止）が存在するため、多くの人がテーブルの高さ属性も想定していました。 しかし、テーブルは内容の幅またはCSSまたは幅属性の定義された幅に従うので、高さを制限することはできません。 代わりに、ブラウザはheight属性でテーブルの最小の高さを定義することができました。 テーブルの高さがその高さよりも高い場合、高さが高くなります。 しかし、あなたはプロパティを使用する必要があります
CSSの高さプロパティを使用すると、CSSプロパティを使用して余分なコンテンツがどのように発生するかを定義する場合、高さを制限することができます。
テーブルの最小の高さを設定するには、次のように記述します。
style = "height：30em;" >
この表は30 em以上です。
2つの属性があり、テーブルの左右（hspace）と上/下（vspace）の周りにスペースが追加されました。 代わりにstyleプロパティを使用する必要があります。
縦のスペースを20ピクセルに、横のスペースを40ピクセルに設定するには、次のように記述します。
style = "margin：20px 40px;"
この表には、20ピクセルのvspaceと40ピクセルのhspaceがあります。
属性は、表の内容が親要素またはウィンドウの端に折り返すか、水平スクロールを強制するかを定義するboolean属性です。 代わりに、CSSプロパティを使用して各テーブルセルの折り返し特性を定義する必要があります。
たくさんのテキストを含む列を折り返さないようにするには、次のように記述します。
style = "white-space：nowrap;" >これは1トンの内容の列です。 しかし、コンテナよりも広い場合でも、テキストは次の行に折り返されるべきではなく、ブラウザのウィンドウがすべてのコンテンツを見るために水平にスクロールされます。
最後に、この属性は、各セルの内容がセル内で垂直にどのように整列するかを定義します。 この無効な属性の代わりに、整列を変更する各セルでCSSプロパティを使用する必要があります。 セルの内容が他の大きなセルによって作成された空きスペースより小さい場合を除き、このスタイルの効果に気付かないでしょう。
セルを強制的に底部に合わせるには（デフォルトでは中央部ではなく）、次のように記述します。
このセルは残りのセルより長く、高さを高くする必要があります。 したがって、垂直に配置されたセルが下部に揃っていることがわかります。
style = "vertical-align：bottom;" >目次をご覧ください。
中身