テーブルタグ

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

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

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

</body>
</html>

■ テーブルタグ

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

タグのソース

ブラウザ表示

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

あいうえお

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

タグのソース

ブラウザ表示

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

あいうえお
かきくけこ

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

タグのソース

ブラウザ表示

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

あいうえお

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

タグのソース

ブラウザ表示

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

あいうえお

<td>の中にrowspan="数字"を入れることで、下のようなテーブルが作れます。

タグのソース

ブラウザ表示

内容	内容
	内容
	内容

<td>の中にcolspan="数字"を入れることで、下のようなテーブルが作れます。
valign="top"を入れると、上から表示されるようになります。

タグのソース

ブラウザ表示

内容
内容	内容	内容
内容

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

タグのソース

ブラウザ表示

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

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

bgcolor="色"で、表内の色を指定できます。
background="画像ファイル名"で、テーブル内の背景に画像を指定できます。

タグのソース

ブラウザ表示

<table border="1" 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>

あいうえお

スポンサードリンク

玄関に戻るよ