テーブル編


このページはＨＴＭＬ講座のテーブル編です。後半戦突入です！
早速テーブル編に行って見ましょう！このテーブルは色々な要素に使えるのでしっかり覚えましょう。
ではテーブルを作って見ましょう。<table>〜</table>で表、<tr>〜</tr> で行、 <td>〜</td> でセルになります。

<table>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日程1月1日
場所あっち
というふうになります。

次はこのテーブルに見出しをつけてみましょう。見出しは <th>〜</th>　です。

<table>
<tr><th>日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち

という感じです。

次は枠線（幅）です。<table border="数字">〜</table>　で幅を決めます。

<table border="5">
<tr><th>日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち

枠線がつきます。

次は枠線に色をつけてみましょう。<table bordercolor="色">〜</table> です。

<table border="5" bordercolor="blue">
<tr><th>日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち

色がつきます。

次はテーブルの位置です。まず左です。<table align="left">〜</table> です。

<table border="5" bordercolor="blue" align="left">
<tr><th>日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち
左につきます。


つづいて右です。 <table align="right">〜</table> です。

<table border="5" bordercolor="blue" align="right">
<tr><th>日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち
右につきます。


次はテーブルのサイズを指定してみましょう。<table width="数字" height="数字">〜</table> です。

<table border="5" bordercolor="blue" width="200" height="150">
<tr><th>日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち

になります。

次はセルのサイズを変更してみましょう。<th width="数字" height="数字"> 〜 </th>　になります。

<table border="5" bordercolor="blue" width="200" height="150">
<tr><th width="40" height="200">日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
日・場所詳細
日程1月1日
場所あっち

になります。もちろん両方の　th　属性に書けばバランスがつきます。

次はテーブルに題名をつけましょう。<caption>　〜　<caption>です。

<table border="5" bordercolor="blue" width="200" height="150">
<caption>開催表</caption>
<tr><th >日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
開催表
日・場所詳細
日程1月1日
場所あっち

となります。

次はテーブルの背景に色をつけてみましょう。<table bgcolor="色" </table> です。

<table bgcolor="yellow" border="5" bordercolor="blue" width="200" height="150">
<caption>開催表</caption>
<tr><th >日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
開催表
日・場所詳細
日程1月1日
場所あっち

となります。

次は背景に画像をつけて見ましょう。<table background="ファイル名" </table> です。

<table background="bg2a03.gif" border="5" bordercolor="blue" width="200" height="150">
<caption>開催表</caption>
<tr><th >日・場所</th><th>詳細</th></tr>
<tr><td>日程</td><td>1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
開催表
日・場所詳細
日程1月1日
場所あっち

となります。

最後は結合です。<td rowspan="数字" > 〜　</td>（縦） <td colspan="数字" > 〜　</td>（横）となります。

<table background="bg2a03.gif" border="5" bordercolor="blue" width="200" height="150">
<caption>開催表</caption>
<tr><th >日・場所</th><th>詳細</th></tr>
<tr><td rowspan="2">日程</td><td colspan="2">1月1日</td></tr>
<tr><td>場所</td><td>あっち</td></tr>
</table>

で
開催表
日・場所詳細
日程1月1日
場所あっち

となります。
以上でテーブル編終わりです。様々な応用ができますので是非試してみてください。