ホームページ作成講座基本的な表を作る

基本的な表を作るHTMLタグ

では最初に、基本的な表を作るためのHTMLタグを見ておきましょう。

<table border="">～</table>

表組みを作成します。

border属性で、枠線を表示するかしないかを指定します。値が1ならば枠線有り、空ならば無しになります。

<tr>～</tr>

表の横列（行）を作成します。

<th>～</th>

表の中の見出しを示すセルを作成します。

<td>～</td>

表の１つ１つのセルを作成します。

tableタグのborder属性は、枠線の表示/非表示を指定するものですが、 現在はCSSで枠線の指定を行なうのが普通なので、記述しなくても構いません。

基本的な表組みのサンプル

では、HTMLで表を作成してみることにしましょう。 HomePageフォルダの中に、tableフォルダを作成なさってください（下図）。

次にtemp.htmlを開いて「lesson1.html」というファイル名でtableフォルダの中に保存します。 そしてbody内に、以下のように記述してみましょう。

<table border="1">
<tr>
 <th>商品名</th>
 <th>値段</th>
 <th>数量</th>
 <th>金額</th>
</tr>
<tr>
 <td>クルミパン</td>
 <td>150円</td>
 <td>3</td>
 <td>450円</td>
</tr>
<tr>
 <td>サンドイッチ</td>
 <td>200円</td>
 <td>2</td>
 <td>400円</td>
</tr>
<tr>
 <td>合計</td>
 <td>－</td>
 <td>5</td>
 <td>850円</td>
</tr>
</table>

ブラウザで表示すると↓のようになります。

この表では<tr></tr>が４つ出てきます。 ですから4行の表になっていることがお分かりでしょう。

<tr></tr>の間に、thタグ若しくはtdタグが４つ入っています。 つまり1行の中に４つのセルが存在することになります。 ですから、サンプルは４列の表となります。

thタグは見出しセルとなります。 実際にtdタグ内の文字と比べて、太字になって目立つようになっているのが確認できます。

これが、一般的な表のHTMLソースです。 trタグの数が表の行数、 tr内のthタグ若しくはtdタグの数が列数となります。