テーブルタグの使用方法 : STEP2 【ホームページの作成】

ホームページ作成の基礎から、HTMLタグやスタイルシート、JavaScriptを使ったHP作成方法、アクセスアップの秘訣を紹介。

ホームページ入門

初めてのホームページ

作成に必要なもの

レンタルサーバ選び

HPを作ってみよう

FTPの使い方

完成までの流れ

作成に入る前に

ホームページの作成

ホームページの宣言

メタタグについて

テーブルタグについて

テーブルタグの使用

全体のチェック

ホームページの宣伝

以降について

気をつけたいこと

　テーブルタグの使用方法

HTMLファイルの作成

テーブルタグを実際に使用する前に、HTMLファイルの作成をしましょう。 Windows上のどこでも良いので、「table.html」というHTMLファイルを作成してください。

「table.html」を作成できたら、次に下記のタグを入力してください。
（タイトルは好きな名前で構いません。）

<html>
<head>
<title>テーブルタグ体験</title>
</head>
<body>

</body>
</html>

タグの入力ができたら、実際にテーブルタグを使ってみましょう。

テーブルタグを使ってみよう！

それでは、実際にテーブルタグを使ってみましょう。
まず始めに、テーブルタグの基本となる部分の入力です。

<html>
<head>
<title>テーブルタグ体験</title>
</head>
<body>
<table border="1">
<tr>
<td>テーブルタグの基本</td>
</tr>
</table>
</body>
</html>

上の赤い部分がテーブルの基本となるタグになります。「border="*"」は、「*」部分の数字を変更することで、枠線の太さを変更できます。（「0」だと枠線を消せます。）
それでは、上のタグを（文字部分はお好みで）入力してみてください。

上のように、文字の回りに枠線が表示されます。この枠線部分がテーブルです。

セルの追加と行の追加

それでは次に、セルの追加と行の追加をしてみましょう。

～上略～
<table border="1">
<tr>
<td>１行目の１列目</td>
<td>１行目の２列目</td>
<td>１行目の３列目</td>
</tr>
<tr>
<td>２行目の１列目</td>
<td>２行目の２列目</td>
<td>２行目の３列目</td>
</tr>
<tr>
<td>３行目の１列目</td>
<td>３行目の２列目</td>
<td>３行目の３列目</td>
</tr>
</table>
～下略～

上の赤い部分が追加する部分になります。入力していることは先ほどと一緒なので説明は省かせて頂きます。それでは実際にタグを入力してみてください。

上のように、テーブルの「行」と「列」が追加されます。同じように、「<tr> ～ </tr>」を増やすと行、「<td> ～ </td>」を増やすと列を追加することができます。

横の幅と高さ（縦の幅）を指定する

次に、横の幅と高さ（縦の幅）を指定してみましょう。
次の指定のことも考慮して横幅（150）、高さ（50）で指定させて頂きます。

～上略～
<table border="1">
<tr>
<td width="150" height="50">１行目の１列目</td>
<td width="150">１行目の２列目</td>
<td width="150">１行目の３列目</td>
</tr>
<tr>
<td height="50">２行目の１列目</td>
<td>２行目の２列目</td>
<td>２行目の３列目</td>
</tr>
<tr>
<td height="50">３行目の１列目</td>
<td>３行目の２列目</td>
<td>３行目の３列目</td>
</tr>
</table>
～下略～

HTMLタグ【テーブル全体の幅・高さの指定】

上の赤い部分が横の幅「width="*"」と高さ「height="*"」を指定する属性タグです。
横の幅の場合には列の中の１つ、高さの場合には行の中の１つに属性タグで指定することで好みの幅・高さに変更することができます。（全てのセルに指定しても問題ありませんが、各セルの幅・高さをバラバラに指定することはできません。）

それでは、実際に上の赤い部分を追加してみてください。

上のように、セルの横幅と高さが変更されます。同じように、「*」部分の数字を変更することで、好みの幅・高さに変更することができます。
（テーブル全体の幅・高さの指定についてはタグ欄下の「詳細」をご覧ください。）

横方向・縦方向の位置を指定する

最後に、セル内に入力された文字・画像の位置の指定をしましょう。
位置については横方向と縦方向の２種類あり、各位置につき３通り、全部で９通りの位置を指定することができます。

～上略～
<table border="1">
<tr>
<td width="150" height="50" align="left" valign="top">左上</td>
<td width="150" align="center" valign="top">上中</td>
<td width="150" align="right" valign="top">右上</td>
</tr>
<tr>
<td height="50" align="left" valign="middle">左中</td>
<td align="center" valign="middle">真中</td>
<td align="right" valign="middle">右中</td>
</tr>
<tr>
<td height="50" align="left" valign="bottom">左下</td>
<td align="center" valign="bottom">下中</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>
～下略～

HTMLタグ【各位置の説明】

上の赤い部分が横方向「align="*"」と縦方向「valign="*"」を指定する属性タグです。セル内の文字・画像の位置に関しては、各セルで指定することができます。
（位置を指定するための値についての説明は、タグ欄下の「詳細」をご覧ください。）

それでは、実際に上の赤い部分を追加してみてください。

上のように、セル内に入力された文字の位置が変更されます。以上で主に使用されるテーブルタグについては終了です。この他にも、様々なテーブルに関するタグ・属性タグがありますので、ホームページの作成に慣れてきたら、少しずつ覚えていってください。それでは、次の「文法・全体のチェック」に進みましょう。

ページの上へ

前のページ

トップページ

文法・全体のチェック

Copyright (C) 2007 ホームページ作成講座 All Rights Reserved.