• モモネコ情報局（本家）へ行く

テーブルタグを使おう！

テーブルタグを使うと、ホームページがより綺麗に見えるようになります。
基本的なタグから覚えていきましょう♪

テーブルダグの原形(?)

以下のテキストも<p>～</p>の間に書いてください。
<table border="1"> <tr> <td>本文<br>本文2</td> </tr> </table>
↑のが原形です。（これを基準に考えます）
↑の「border="1"」の1はテーブルの枠の太さです。好きな数字に換えてください。（標準1）
サンプルはこちら

テーブルを増やそう！

以下のタグは横にテーブルを増やした形です。
<table border="1"> <tr> <td>本文<br>本文2</td> <td>本文<br>本文2</td> </tr> </table>
↑のtdの間を増やすと、横に増えていきます。
サンプルはこちら

以下のタグは縦にテーブルを増やした形です。
<table border="1"> <tr> <td>本文<br>本文2</td> </tr> <tr> <td>本文<br>本文2</td> </tr> </table>
↑のtrとtdの間を増やすと、縦に増えていきます。
サンプルはこちら

テーブルを連結！

言葉で説明をするよりもサンプルを見たほうがわかります。

縦に連結をする場合
<table border="1"> <tr> <td rowspan="3">内容</td> <td>内容</td> <td rowspan="3">内容</td> </tr> <tr> <td>内容</td> </tr> <tr> <td>内容</td> </tr> </table>
rowspanの数字は連結させたいテーブルの個数です。
サンプルはこちら

横に連結をする場合
<table border="1"> <tr> <td colspan="3">内容</td> </tr> <tr> <td>内容</td> <td>内容</td> <td>内容</td> </tr> <tr> <td colspan="3">内容</td> </tr> </table>
colspanの数字は連結させたいテーブルの個数です。
サンプルはこちら

テーブルの位置と大きさ・文字の位置

テーブルの位置を変えるには以下のようにします。
<table border="1" align="left"> <tr><td>文字</td></tr> </table>
<table border="1" align="center"> <tr><td>文字</td></tr> </table>
<table border="1" align="right"> <tr><td>文字</td></tr> </table>
↑から順番に左側・中央・右側です。
サンプルはこちら

また画像のように、テーブルの大きさを指定することが可能です。
<table border="1" width="150" height="100"> <tr><td>文字</td></tr> </table>
画像タグ説明ページ

テーブル内の文字の位置

テーブル内の文字が中央にこないようにするためのタグです。
<table border="1" width="300" height="200"> <tr><td valign="top">文字文字文字</td></tr> </table>
<table border="1" width="300" height="200"> <tr><td valign="bottom">文字文字文字</td></tr> </table>
↑ table ではなく td のところに入れるので注意！
サンプルはこちら

テーブルに色を

テーブルの枠に色を付けてみましょう。
<table border="1" bordercolor="#0000ff"> <tr><td>文字文字文字文字文字</td></tr> </table>
↑の#0000ffの部分をカラーコードを見ながら、好きな色に変えることができます。
サンプルはこちら

次に背景に色を付けてみましょう。
<table border="1" bgcolor="#ffcccc"> <tr><td>文字文字文字文字文字</td></tr> </table>
↑の#ffccccの部分をカラーコードを見ながら、好きな色に変えることができます。
サンプルはこちら

なにか質問があれば

なにか質問があれば、「掲示板」で質問を受け付けます。