HTML,CSS

HTMLにおけるテーブルついて

テーブルを作成する場合は<table>タグを使用します。<table>タグの要素の内容として、テーブル行の定義は<tr>で行い、さらに、1行の間に含まれる列を<th>または<td>で定義します。尚、HTML５では、CSSでレイアウトを調整しない限り罫線は表示されません。

<tr>

<tr>はテーブル行を意味します。<tr>の要素の内容として含まれる<th>または<td>が、横一列に並びます。<table>には、最低1つ以上の<tr>を含めます。

<td>と<th>

<th>と<td>はテーブル列のセルを意味するタグです。<td>が一般的なセル（データセル）で、<th>が見出しです。<th>は太文字で、セルに対して中央揃えでテキストが配置されます。（CSSでのスタイルを変更可能です）

例

見出し1	見出し2	見出し3
データ1	データ2	データ3

HTML

<table>
<tr><th>見出し1</th><th>見出し2</th><th>見出し3</th></tr>
<tr><td>データ1</td><td>データ2</td><td>データ3</td></tr>
</table>

CSS

table {
border-collapse: collapse;
}

rowspan属性

rowspan属性は、同じ列の隣接するセルを縦に結合する属性です。属性値は結合するセルの数にします。

オプション	DVD作成
	キャンドル
	ビデオ撮影

HTML

<table>
<tr>
<th rowspan="3">オプション</th>
<td>DVD作成</td>
</tr>
<tr>
<td>キャンドル</td>
</tr>
<tr>
<td>ビデオ撮影</td>
</tr>
</table>

colspan属性

colspan属性は横に結合したいときに使います。

colspan属性
1	2	3

HTML

<table>
<tr>
<td colspan="3">colspan属性</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

table-layoutプロパティ

table-layoutプロパティを使うと、<table>にwidthプロパティが指定されている場合に、各列の幅を自動(auto)にするか、均等(fixed)にするかを変更できます。

table-layout:auto;

項目	説明
挙式会場	チャペル
披露宴	料理、飲み物、花嫁衣裳、引き出物
料金	100,000円

table-layout:fixed;

項目	説明
挙式会場	チャペル
披露宴	料理、飲み物、花嫁衣裳、引き出物
料金	100,000円

テーブルにキャプションを追加する

<caption>

<caption>は <table>内でのみ使えるタグです。<table>の最初の子要素として、<tr>などよりも先に記述する必要があります。

標準プラン

標準プランをご紹介します。実際の内容はお客様に合わせて提案いたします。

項目	説明
挙式会場	チャペル
披露宴	料理、飲み物、花嫁衣裳、引き出物
料金	100,000円

HTML

<table>
<caption>
<strong>標準プラン</strong><p>標準プランをご紹介します。実際の内容はお客様に合わせて提案いたします。</p>
</caption>
....
</table>

キャプションをテーブルの下に配置する

<caption>タグは <table>開始タグのすぐ次に書かなければならず、通常はテーブルの上にキャプションが表示されます。 しかし、CSSを使えばテーブルの下に配置することもできます。 caption-sideプロパティで、topかbottomかを指定します。

標準プラン

標準プランをご紹介します。実際の内容はお客様に合わせて提案いたします。

項目	説明
挙式会場	チャペル
披露宴	料理、飲み物、花嫁衣裳、引き出物
料金	100,000円

CSS

table {
caption-side:bottom;
}

やっぱりプロの人から直接学びたいという方はこちら。| Click here if you want to learn directly from professionals

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー