ＨＯＭＥ

テーブルの作り方



テーブルとは表みたいなもので、 <table>と</table>で囲まれた間がテーブルになります。
<tr>と</tr>の間は行となり、<td>と</td>はその１行の列（セル）になります。
枠の太さは<table border="数字">と打つことでできます。 この数字を０にすると、枠は表示されなくなります。
作ってみるとこのようになります。

<table border="2">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
おはよう！
</td>
<td>
こんにちは！！
</td>
</tr>
</table>

↓

1 2
おはよう！ こんにちは！！


これは少し打つのは面倒ですが、テーブルではセルの中に画像や文字列などを表示することができるので、枠をなくすことによりホームページのレイアウトに使われることが多いようです。

テーブルの大きさを指定する



テーブの大きさを指定するには <table width="幅 " height="高さ ">〜と打てばいい。
これは、テーブル全体の大きさを決めるものです。
テーブル内の内容が指定した大きさに入りきらない場合は、自動的に大きくなってしまいます。
<table border="2" width="200" height="200">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
おはよう！
</td>
<td>
こんにちは！！
</td>
</tr>
</table>
↓

1 2
おはよう！ こんにちは！！


テーブルの背景を指定する



テーブの大きさを指定するには <table background="画像ファイル" or bgcolor="色">〜と打てばいい。
これはページ全体の背景の指定する方法と似てますね。
<table border="2" background="../pe-ji/back.gif">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
おはよう！
</td>
<td>
こんにちは！！
</td>
</tr>
</table>
↓

1 2
おはよう！ こんにちは！！


枠の幅を指定する



枠の幅を指定するには <table border="幅 ">〜と打てばいい。
幅の大きさはピクセル数で指定します。
<table border="5">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
おはよう！
</td>
<td>
こんにちは！！
</td>
</tr>
</table>
↓

1 2
おはよう！ こんにちは！！


枠の色を指定する



枠の色を指定するには <table border=" " bordercolor="色">〜と打てばいい。
これは枠の大きさも指定しないと色が表示されないので注意してください。
<table border="5" bordercolor="green">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
おはよう！
</td>
<td>
こんにちは！！
</td>
</tr>
</table>
↓

1 2
おはよう！ こんにちは！！


セルの大きさの指定の仕方



セルの大きさを指定するには、<td width="幅" height="高さ">とすればよい。
これを指定すると同じ行や列のセルの大きさを指定することができます。
同じ行や列のセルの大きさは同じ大きさを指定するか、一つだけ指定するようにしましょう。
<table border="2">
<tr>
<td width="200" height="100">
1
</td>
<td>
2
</td>
</tr>
<tr>
<td>
おはよう！
</td>
<td>
こんにちは！！
</td>
</tr>
</table>
↓

1 2
おはよう！ こんにちは！！

これは左上のセルの大きさだけを指定しただけですが、左下の幅と右上の高さも一緒に指定したことになります。

セル内での表示の位置を指定する



セルの中に表示させる、画像や文字の位置を指定する方法の説明です。
セル内の位置を指定するには、<td align="横方向 " valign="縦方向 ">と書きます。
横方向には、left（左揃え）center（中央揃え）right（右揃え）が入り、縦方向には、top（上）middle（真ん中）bottom（下）が入ります。
作ってみるとこんな感じです。

<table border="2" width="300" height="300">
<tr>
<td align="left" valign="top">左上</td>
<td align="center" valign="top">中上</td>
<td align="right" valign="top">右上</td>
</tr>
<tr>
<td align="left" valign="middle">左</td>
<td align="center" valign="middle">中</td>
<td align="right" valign="middle">右</td>
</tr>
<tr>
<td align="left" valign="bottom">左下</td>
<td align="center" valign="bottom">中下</td>
<td align="right" valign="bottom">右下</td>
</tr>
</table>
↓

左上 中上 右上
左 中 右
左下 中下 右下













SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送