ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLタグ一覧 > テーブル

テーブルを作る

テーブルタグは表を作ることができます。 テーブルの中の1つ1つのマス目 である「セル」という部分に文字や画像などを入れていきます。 テーブルは横方向にセルを増やしていったり縦方向に段組していく ことができます。 テーブルに border属性を指定しないと枠線は表示されません。 border="0"と指定しても枠線は非表示になります。

■ 基本的なテーブルを作る

まずは1マスだけの基本的なテーブル(表)を作ります。 テーブルを作るには<table>タグの中に<tr>タグ と<td>タグを記述します。

テーブルの枠線を太くしたい場合はborder="数字"の値を 大きくします。

【ブラウザ表示】

セル

ソース

<table border="1"> ………テーブルの枠線の太さ
<tr> ………trはテーブル の行を表します。
<td>セル</td> ………tdはテーブル の列を表し ます。
</tr>
</table>

■ 横方向にセルを増やしていく

<td>〜</td><td>〜</td>のように <td>タグを横につなげていくことで横方向にセルを増やしていく ことができます。

【ブラウザ表示】

セル1セル2

ソース

<table border="1">
<tr>
<td>セル1</td><td>セル2</td> …横方向にセルが 増えます(1列、2列…)
</tr>
</table>

■ 縦方向にセルを段組していく

縦方向にセルを段組していくこともできます。 HTMLソースではテーブルの1行目の終わりと2行目の始めの 区切りをわかりやすくするため
</tr>

<tr>

のように1行以上のスペースを空けます。

【ブラウザ表示】

セル1
セル2

ソース

<table border="1">
<tr>
<td>セル1</td>
</tr>
ここで1行目が終了しセル2は次の行へ段組されます。
<tr>
<td>セル2</td>
</tr>
</table>

■ セルに見出しを表示する

<th>〜</th>で見出しを表示することができます。 tdとの違いはセル内の 文字がセンタリングされ太字で表示されます。

【ブラウザ表示】

見出し 見出し
セル3セル4

ソース

<table border="1">
<tr>
<th>見出し</th><th>見出し</th>
</tr>
<tr>
<td>セル3</td><td>セル4</td>
</tr>
</table>

■ その他の項目

横幅、高さを指定する
画像や背景色を指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
枠線の色やスタイルを指定する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.