これは表のタイトルです。ここは表のヘッダです。<ここまで表のセル><ここまで表の行><ここまで表>表(テーブル)を作る「table要素」Excelのような表計算ソフトを使って表を作ったことはありませんか?文章だけで説明するより、表にしたほうが説明しやすい・わかりやすいことはよくあることです。HTMLでは、「table要素」を使って表を作ります。<table>と</table>で囲った範囲に表を作ることができます。「table要素」だけでは表を作り上げることができません。表を作り上げるためには、後に説明する「tr要素」と「td要素」が必要になります。ちなみに、「table要素」の「table」は、表といった意味があります。「table要素」だけでは、表を作ることを定義しただけですので、表に必要な行や、行の中のセルがありません。表を表示することができません。表の行を作るには「tr要素」、行の中のセルを作るを作るには、「td要素」を使います。「table要素」の中の「tr要素」の数だけ行ができ、「tr要素」の中の「td要素」の数だけその行のセルが出来上がります。<tr>と</tr>で囲った範囲が行、<td>と</td>で囲った範囲がセルとなります。行数3、列数2の表を作る場合は以下のように記述します。<table>と</table>で囲った範囲に表を作ることができます。間違えやすい、忘れやすいことなので明記しますが、水平方向が行、垂直方向が列になります。Dataの略で、表のデータといった意味になります。セルの結合、「colspan属性」と「rowspan属性」Excelなどの表計算ソフトでは、セルとセルをくっつけて一つにするセルの結合ができます。それと同じように、「td要素」に「colspan属性」・「rowspan属性」を指定すると、セルの結合ができます。「colspan属性」を指定すると水平方向に、「rowspan属性」を指定すると垂直方向にセルの結合ができます。colspan="2">と記述します。rowspan="2">と記述します。「table要素」には、その表に表題を付けることができます。表に表題を付けるには、「caption要素」を使用します。<caption>と</caption>で囲った範囲が表の表題になります。「caption要素」を使用する方法は簡単で、「tabel要素」の開始タグの直後に「caption要素」を使用し、表題を付ければよいだけです。気をつけなくてはいけないのは、「tabel要素」の開始タグの直後に指定しなければいけないということです。ちなみに、「caption要素」の「caption」は表題やタイトル、見出し意味になります。「table要素」と「tr要素」、「td要素」だけで表は作ることができますが、表のヘッダ・見出しのセルを意味する「th要素」が存在します。<tr>と</tr>で行を作り、<th>と</th>で囲った範囲がヘッダセルとなります。使い方は「td要素」とほぼ同じです。行数3、列数2の表で、一行目をヘッダセルとする場合は以下のように記述します。Headerの略で、表のヘッダといった意味になります。サンプル今回説明した、「table要素」「tr要素」「td要素」「caption要素」「th要素」を使用したサンプルを用意します。このサンプルソースはbody要素内(<body>~</body>)に書いてください。サンプルソースコード<!--ただ単に表を作るだけでは、線は表示されませんので、style要素でスタイルを指定して線を表示しています。th要素の文字を太字にします。指定なし「table要素」のまとめと次回記事について今回説明した「table要素」はいかがでしたでしょうか。「table要素」はHTMLで表を作る重要な要素です。表を使うことで、見やすいHTML文章が作れると思いませんか?次回からは、HTML上でデータ入力や送信が可能な、いわゆる入力フォームを作る「form要素」の説明を3回に分けてしていきます。フォーム領域を作り、そこにテキストを表示するラベルを表示し、データを送信するだけのフォームを作ってみましょう。以上、当サイト管理人のAsterismでした。コメントをキャンセルメールアドレスが公開されることはありません。