基本的な表を作る

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 基本的な表を作る

ここから、HTMLで表を作る方法について見ていきます。 表は、tableタグを用いて表します。 その中に、行を表すタグ、1つ1つのセルを表すタグなどを記述します。

基本的な表を作るHTMLタグ

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

<table border="">~</table>
表組みを作成します。
border属性で、枠線を表示するかしないかを指定します。値が1ならば枠線有り、空ならば無しになります。
<tr>~</tr>
表の横列(行)を作成します。
<th>~</th>
表の中の見出しを示すセルを作成します。
<td>~</td>
表の1つ1つのセルを作成します。

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

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

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

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つ出てきます。 ですから4行の表になっていることがお分かりでしょう。

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

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

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

NINJABUTTON