• トップページ
• Blog
• HTML直打ちで表を作ってみよう

HTML直打ちで表を作ってみよう

Dreamweaverなどをすでに持っている人は特に必要ない情報だと思いますが、HTMLを直編集して表を作らなきゃ、という方のために表の書き方をメモっておきたいと思います。

罫線は別途スタイルシートで指定してあげる必要がありますが、ここでは割愛します。

1行1列の表を作ろう

<table>
 <tr>
 <td>内容</td>
 </tr>
</table>

これで1行1列の表が作れます。

基本的には以下のタグを覚えておけば基本的にはOKです。

• <table></table> 表を作るタグ
• <tr></tr> 行を作るタグ <table>と</table>の間にしか存在出来ない
• <td></td> 列を作るタグ <table>と</table>の間にある<tr></tr>の間にしか存在出来ない

1行2列の表を作るには

<table>
 <tr>
 <td>列1</td><td>列2</td>
 </tr>
</table>

2行2列の表を作るには

<table>
 <tr>
 <td>1</td><td>2</td>
 </tr>
 <tr>
 <td>3</td><td>4</td>
 </tr>
</table>

とすればOKです。

複数行をつなげた表の作り方

では1と3をつなげた表はどうやって作ればよいのでしょうか。

<table>
 <tr>
 <td rowspan="2">1</td><td>2</td>
 </tr>
 <tr>
 <td>4</td>
 </tr>
</table>

1行目1列のtdタグにrowspan=”2″という文字列を加えます。
row(行)の長さを2個分にするという意味です。

複数列をつなげた表の作り方

では1と2をつなげた表はどうやって作ればよいでしょうか。

<table>
 <tr>
 <td colspan="2">1</td>
 </tr>
 <tr>
 <td>3</td><td>4</td>
 </tr>
</table>

1行目1列のtdタグにcolspan=”2″という文字列を加えます。
これはcolumn(列)の長さを2個分にするという意味です。

例えば、以下の場合

<table>
 <tr>
 <td colspan="3">1</td>
 </tr>
 <tr>
 <td>3</td><td>4</td>
 </tr>
</table>

表の表示は崩れてしまいます。
2行目の列が2つしかないのに1行目を3つにはできないからです。

以下のように修正すれば問題なく表示されます。

<table>
 <tr>
 <td colspan="3">1</td>
 </tr>
 <tr>
 <td>3</td><td>4</td><td>5</td>
 </tr>
</table>

1行目の列の長さを3列分にして2行目も3列分要素があるから問題なく表示されます。

他にもtbody,thead,thタグなどもあるのですが、応急処置的にはこれで何とかなると思います。

atnr.net の RSS登録はこちらから