【表を作る】

テーブルで表を作成

HTMLで表を作るには、<table>というタグを使用します。

<table>~</table>の間に、<tr><td>というタグを入れて表のセルを作ります。

・<table>  : これで挟まれた部分がテーブル(表)である。

・<tr>        : <table></table>間に書く。表の横の列を表す。

・<td>        :<tr></tr>間に書く。一つのセルを表す。

組み合わせて書いてみると、こんな形になります。

<table>
<tr>
<td>1つ目のセル</td>
</tr>
</table>

これで、縦横に1マスの表(1マスだけなので表とは言い難いが)の完成です。

しかし、このままでは表の枠線が無い状態になるので、ブラウザで表示してみても表になっているのかどうか分かりません。

そこで、border=”☆”(☆には数字が入り、線の太さを指定します)という属性値を<table>と組み合わせて、

<table border=”1″>のように使います。

<table border=”1″>
<tr>
<td>1マス目</td>
</tr>
</table>

表示してみると↓

1マス目

これで、表が作れていることを確認出来るようになりました。

では、セルを増やしてみましょう。

セルを横に増やす

 

テーブルは、<tr>で横の1列を作って、そこへ何マス入れるかを<td>で作るというイメージです。

横に並んだ2マスを作りたかったら、<tr></tr>間に<td></td>をもう1セット増やします。

つまり、こういうこと。

<table border=”1″>
<tr>
<td>1マス目</td>
<td>2マス目</td>
</tr>
</table>

表示してみると↓

1マス目2マス目

横に2マスの表が出来ました!

セルを縦に増やす

今度は縦に2マスの表を作ってみましょう。

縦に増やすには<tr>を追加すれば良いのです。

<table border=”1″>
<tr>
<td>上段のセル</td>
</tr>
<tr>
<td>下段のセル</td>
</tr>
</table>

表示してみると↓

上段のセル
下段のセル

縦に二段になりました!

ほら、簡単ですよね。

これを応用すれば100マス計算のような表も作ることが出来ますよ。

ただ、すごーく複雑なタグになります。

<table border=”1″>
<tr>
<td>セル</td><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
</tr>
<tr>
<td>セル</td><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
</tr>
<tr>
<td>セル</td><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
</tr>
<tr>
<td>セル</td><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
</tr>
<tr>
<td>セル</td><td>セル</td><td>セル</td><td>セル</td><td>セル</td>
</tr>
</table>

ほらね。↓

セルセルセルセルセル
セルセルセルセルセル
セルセルセルセルセル
セルセルセルセルセル
セルセルセルセルセル

5×5マスでもこのタグの量。

でもこれが、画像を並べる時やなんかに重宝したりします。

難しく考えずに使いましょう。

そのうち目が慣れますよ。

【応用編】

セルの大きさを変える

セルの大きさを指定してみましょう。<table>にcellpadding 属性を追加して半角数字でセルの大きさを指定します。

<table border=”1″ cellpadding=”10″>
<tr>
<td>少し大きくなったセル。文字の周りにゆとりが出来ました。</td>
</tr>
</table>

表示してみると↓

少し大きくなったセル。文字の周りにゆとりが出来ました。

大きさが、指定されましたね。

何も指定していないときと比べると、

文字の周りの空間が広くなっています。

セルとセルの幅を変える

今度は、セルとセルの幅を指定する方法。

<table>に cellspacing属性 を追加し、半角数字で指定します。

<table border=”1″ cellspacing=”10″>
<tr>
<td>1マス目</td>
<th>2マス目</th>
</tr>
</table>

表示してみると↓

1マス目2マス目

幅が変わりましたね。

セルの周りの空間が広くなりました。

セルの色を変える

今度はセルの色を変えてみましょう。

セルの色は、<td>に bgcolor属性 を追加して指定することができます。カラーコード、カラーネームを用いて指定しましょう。

<table border=”1″>
<tr>
<td bgcolor=”#ff6666″>赤色のセルです</td>
</tr>
<tr>
<td bgcolor=”66ff66″>緑色のセルです</td>
</tr>
</table>

表示してみると↓

赤色のセルです
緑色のセルです

応用すれば使い方は無限大!テーブルはサイト作成におえて、かなり使えるのでマスターしましょう!

これで大分テーブルに慣れてきましたね。

慣れるまでは、色んな表を作って遊んでみて下さい。

わかってくると楽しくなります。

タイトルとURLをコピーしました