テーブルに関する要素

ニコニコ大百科:HTMLタグ一覧 HTMLタグの一覧 テーブルに関する要素

テーブルに関する要素一覧

• テーブルを作成する<table><tbody><tr><td>
• 見出しセルとデータセルを作成する<th>
• 表にタイトルを付ける<caption>
• セルを結合する<td colspan="【横に結合するセル数】" rowspan="【縦に結合するセル数】">
• 表の幅を指定する<table width="【px単位】">
• 表の行をグループ化する<thead><tbody><tfoot>
• 表の列をグループ化する<colgroup span="【列数】">
• 表の列の属性をまとめて指定する<col span="【列数】">

クリックするとジャンプします

テーブルを作成する

↑

---

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

	1列目	2列目	3列目	4列目	5列目
1行目
2行目
3行目						・・・
4行目
5行目
			・ ・ ・

HTMLでExcelのような表を作ることが出来ます。作り方は以下の通りです。

• 縦何行・横何列の表を作るか決める
• table要素の中にtbody要素を入れたもの（<table><tbody>～</tbody></table>）を用意する
• 必要な行数（縦）と同じ数のtr要素（<tr>～</tr>） を <tbody>～</tbody> の間に入れる
• 各々の<tr>～</tr>の間に、必要な列数（横）と同じ数のtd要素（<td>～</td>）を入れる

この時、各行の中の列数、すなわち各tr要素の中のtd要素の数は同じでなければいけません。（セルを結合させたい場合はセルを結合するの項を参照）

tbody要素の詳しい説明は行をグループ化するの項を参照

<table> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> </tr> <tr> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> </tr> <tr> <td>K</td> <td>L</td> <td>M</td> <td>N</td> <td>O</td> </tr> <tr> <td>P</td> <td>Q</td> <td>R</td> <td>S</td> <td>T</td> </tr> <tr> <td>U</td> <td>V</td> <td>W</td> <td>X</td> <td>Y</td> </tr> </tbody> </table>

1列目 2列目 3列目 4列目 5列目 1行目 A B C D E 2行目 F G H I J 3行目 K L M N O ・・・ 4行目 P Q R S T 5行目 U V W X Y ・ ・ ・

色分けされているようにn番目のtr要素は上からn行目に対応し、その中のk番目のtd要素はn行目左からk列目のデータセルに対応します。例えば右上図でTが入っているデータセルは、4つめのtr要素の中の5番目のtd要素です。

下は縦3行・横4列の表の作成例です。

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　　<td>公用語</td> 　</tr> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　　<td>英語</td> 　</tr> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　　<td>日本語</td> 　</tr> </tbody> </table>	国名 地域 通貨 公用語 アメリカ 北アメリカ USドル 英語 日本 アジア 円 日本語

大百科自体のCSSによって、td要素には padding:5px、border:1px solid #D1D1D1   が、table要素には border-collapse:collapse が指定されています。

詳細は各々のCSSプロパティの項をご覧ください。

見出しセルとデータセルを作成する

↑

---

td要素の代わりに、th要素（<th>～</th>）を用いて見出しセルを作る事ができます。

th要素の中身は一般的に太字・中央寄せで表示されます。

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

th要素は行ごとの見出しとしても使えます。

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

大百科自体のCSSによって、th要素には background-color:#F1F1F1  、padding:2px、border:1px solid #D1D1D   が指定されています。

詳細は各々のCSSプロパティの項をご覧ください。

表にタイトルを付ける

↑

---

<table>タグの直後にcaption要素（<caption>【表のタイトル】</caption>）を追加する事で、表にタイトルを付ける事が出来ます。

一般的にタイトルは表の上部に中央揃えで表示されます。caption要素は１つのテーブルに１つしか記述できません。

ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

表タイトルのセンタリングを解除するにはtext-alignプロパティを使用してください。詳細はCSSのtext-alignプロパティの項をご覧ください。

セルを結合する

↑

---

td要素もしくはth要素にcolspan属性（colspan="【横（右）方向に結合するセル数】"）を追加する事で横方向に結合するセル数を、rowspan属性（rowspan="【縦（下）方向に結合するセル数】"）を追加する事で縦方向に結合するセル数を指定する事が出来ます。

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th colspan="3">各国通貨の一覧</th> 　</tr> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td rowspan="2">北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>カナダ</th> 　　<td>カナダドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル カナダ カナダドル 日本 アジア 円

またcolspan属性とrowspan属性は同時に使用する事も出来ます。

ソースコード	表示結果
<table> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>フランス</th> 　　<td rowspan="3" colspan="2">ヨーロッパ・ユーロ</td> 　</tr> 　<tr> 　　<th>ドイツ</th> 　</tr> 　<tr> 　　<th>イタリア</th> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 フランス ヨーロッパ・ユーロ ドイツ イタリア 日本 アジア 円

表の幅を指定する

↑

---

tableタグにwidth属性（width=<【表の幅（px単位）】>）を追加する事で、表全体の幅を指定する事が出来ます。

セル内に文字が無い場合は、表の幅がセルの幅に均等に割り振られます。文字がある場合は縦列の中の最長文字に因って割り振られます。

ソースコード	表示結果
<table style="width:300px;"> <tbody> 　<tr> 　　<th>国名</th> 　　<th>地域</th> 　　<th>通貨</th> 　</tr> 　<tr> 　　<th>アメリカ</th> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<th>日本</th> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	国名 地域 通貨 アメリカ 北アメリカ USドル 日本 アジア 円

width属性はCSSのwidthプロパティで代用することができます。非推奨要素ではありませんが、見た目に関する設定にはできるだけCSSを用いてください。

またテーブルの高さはデフォルトでは内容の高さに合わせて自動調整されます。指定したい場合はCSSのheightプロパティを使用してください。

詳細は各々のCSSプロパティの項をご覧ください。

表の行をグループ化する

↑

---

thead要素（<thead>～</thead>）、tbody要素（<tbody>～</tbody>）、tfoot要素（<tfoot>～</tfoot>）を用いて表の行をそれぞれヘッダ、ボディ、フッタにグループ分けすることが出来ます。

thead要素、tfoot要素は１つの表に１つずつまでしか記述できません。tbody要素はいくつでも記述できます。

これらの要素だけでは意味を持ちませんが、スタイルシートなどの属性を各要素毎に指定できるようになります。

なお正規の記述順は上からthead要素、tfoot要素、tbody要素です。caption要素はthead要素の内容の上に来ます。thead、tfoot要素は省略する事が出来ますが、tbody要素だけはどんなテーブルにも最低１つは記述しなければいけません。

※style="background-color:red;"は背景色を赤色に、limeは緑色に、blueは青色にします。詳細はCSSのbackground-colorプロパティの項をご覧ください。
ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <thead style="background-color:red;"> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　</tr> </thead> <tfoot style="background-color:blue;"> 　<tr> 　　<td colspan="3">米・加・日比較</td> 　</tr> </tfoot> <tbody style="background-color:lime;"> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>カナダ</td> 　　<td>北アメリカ</td> 　　<td>カナダドル</td> 　</tr> </tbody> <tbody> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 米・加・日比較 アメリカ 北アメリカ USドル カナダ 北アメリカ カナダドル 日本 アジア 円

表の列をグループ化する

↑

---

colgroup要素を用いて表の列をグループ分けすることが出来ます。span属性（span=<【グループ化する列の数】>）を用いてグループ化する列の数を指定します。span属性を使用した場合、<colgroup>～<colgroup>の間に何も入れることは出来ません。

この要素だけでは意味を持ちませんが、style属性などをまとめて指定できるようになります。

※style="background-color:lime;"は背景色を緑色に、blueは青色にします。詳細はCSSのbackground-colorプロパティの項をご覧ください。
ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <colgroup style="background-color:lime;" span="1"></colgroup> <colgroup style="background-color:blue;" span="2"></colgroup> <thead> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　</tr> </thead> <tbody> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>カナダ</td> 　　<td>北アメリカ</td> 　　<td>カナダドル</td> 　</tr> </tbody> <tbody> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル カナダ 北アメリカ カナダドル 日本 アジア 円

表の列の属性をまとめて指定する

↑

---

col要素を用いて表の列をグループ分けすることが出来ます。span属性（span=<【属性をまとめて指定する縦列の数】>）を用いて属性をまとめて指定する縦列の数を指定します。

col要素は必ずcolgroup要素（<colgroup>～<colgroup>）の間に記述してください。この場合、colgroup要素にspan属性を指定することはできません。

colgroup要素とcol要素の違いは主に、colgroup要素は表の縦列をグループ化するのに対し、col要素はHTMLの意味上でまとまりにする訳では無いという点です。ぶっちゃけたいした違いはありません。 これ以上の詳しい違いは外部サイト をご覧ください。

※style="background-color:red;"は背景色を赤色にします。詳細はCSSのbackground-colorプロパティの項をご覧ください。
ソースコード	表示結果
<table> <caption>各国通貨の一覧</caption> <colgroup><col style="background-color:red;" span="2" /></colgroup> <thead> 　<tr> 　　<td>国名</td> 　　<td>地域</td> 　　<td>通貨</td> 　</tr> </thead> <tbody> 　<tr> 　　<td>アメリカ</td> 　　<td>北アメリカ</td> 　　<td>USドル</td> 　</tr> 　<tr> 　　<td>カナダ</td> 　　<td>北アメリカ</td> 　　<td>カナダドル</td> 　</tr> </tbody> <tbody> 　<tr> 　　<td>日本</td> 　　<td>アジア</td> 　　<td>円</td> 　</tr> </tbody> </table>	各国通貨の一覧 国名 地域 通貨 アメリカ 北アメリカ USドル カナダ 北アメリカ カナダドル 日本 アジア 円

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。