テーブルを使いこなそう

トップ > Webページ作成入門 > テーブルを使いこなそう

目次

最も基本的なテーブル

テーブル(表)を作成するには主に次のタグを用います。

HTML
<table border=1>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>

これをブラウザで表示すると次のようになります。

表示

項目を連結するには

<td colspan=n> を用いると、右方向に n 個のセルを連結することができます。

HTML
<table border=1>
<tr><td colspan=2>●</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

表示

<td rowspan=n> を用いると、縦方向に n 個のセルを連結することができます。

HTML
<table border=1>
<tr><td rowspan=2>●</td><td>■</td><td>▲</td></tr>
<tr><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

表示

テーブルの枠線を細くするには

border-collapse を用いることで、テーブルの枠線を細くすることができます。

HTML
<table border=1 style="border-collapse:collapse;">
<tr ><td>●</td><td>■</td><td>▲</td></tr>
<tr><td>○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

表示

色付きのテーブル

background-color で、テーブルに色をつけることができます。

HTML
<table border=1>
<tr style="background-color:yellow"><td>●</td><td>■</td><td>▲</td></tr>
<tr><td style="background-color:#ffcccc">○</td><td>□</td><td>△</td></tr>
</table>

これをブラウザで表示すると次のようになります。

表示

Copyright (C) 1997-2016 杜甫々
初版:1997年3月30日、最終更新:2016年5月1日
http://www.tohoho-web.com/wwwbeg4.htm