テーブルタグ

♪ HTMLファイルを作ってみよう

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>HPのタイトルを入れます</title>
</head>
<body>

この場所が、表示されるテーブルのソースを入れる部分です。

</body>
</html>

■ テーブルタグ

テーブルタグを使うことを覚えると、綺麗なHPに仕上がります。
テーブルの基礎的なものから覚えていきましょう。

タグのソース

ブラウザ表示

<table border>
<tr>
<td> あいうえお </td>
</tr>
</table>

あいうえお

<td>～～～</td>を増やせば、横に増えて行きます。

タグのソース

ブラウザ表示

<table border>
<tr>
<td> あいうえお </td>
<td> あいうえお </td>
</tr>
</table>

あいうえお

<tr><td>～～～</td></tr>を増やせば、縦に増えて行きます。

タグのソース

ブラウザ表示

<table border>
<tr><td> あいうえお </td></tr>
<tr><td> あいうえお </td></tr>
<tr><td> あいうえお </td></tr>
</table>

あいうえお

border="数字"の数字を増やすことで、外枠の太さを指定できます。

タグのソース

ブラウザ表示

<table border="5">
<tr><td>あいうえお<br>かきくけこ</td></tr>
</table>

あいうえお
かきくけこ

bordercolor="色"で、外枠の色を指定できます。

タグのソース

ブラウザ表示

<table border="3" bordercolor="#66FFFF">
<tr><td>あいうえお<br>かきくけこ<br>さしすせそ</td></tr>
</table>

あいうえお
かきくけこ
さしすせそ

bgcolor="色"で、表内の色を指定できます。

タグのソース

ブラウザ表示

<table border bgcolor="#CCFFFF">
<tr><td>あいうえお<br>かきくけこ<br>さしすせそ</td></tr>
</table>

あいうえお
かきくけこ
さしすせそ

align="" center （中央に表示）right（右に表示) left（左に表示)

タグのソース

ブラウザ表示

<table border="1" align="center">
<tr><td> あいうえお</td></tr>
</table>

あいうえお

タグのソース

ブラウザ表示

<table border="1" align="right">
<tr><td> あいうえお</td></tr>
</table>

あいうえお

cellpadding=""　マージンの大きさを数字で調整します。

タグのソース

ブラウザ表示

<table border="1" align="center" cellpadding="5">
<tr><td> あいうえお </td></tr>
</table>

あいうえお

width=""( 横のサイズ) height="" (縦のサイズ)ピクセル数かパーセントで指定します。

タグのソース

ブラウザ表示

<table border="1" align="center" width="90%">
<tr><td> あいうえお </td></tr>
</table>

あいうえお

タグのソース

ブラウザ表示

<table border="1" align="center" width="150" height="100">
<tr><td> あいうえお </td></tr>
</table>

あいうえお

どのパソコンにも同じサイズでページを表示させる方法は、
テーブルの横幅を指定して、テーブル内でホームページを作ればできます。

横幅を指定したテーブル内でページを作ります

</td>
</tr>
</table>

サンプルページ

玄関に戻るよ