初心者のためのホームページ作成動画解説付

テーブルについて

table tr td~/td /tr /table

文字の位置を設定するときはtext-alignで行いますが、 tableタグで配置(レイアウト)を作ってその中に文章を入れることもできます。(ただ、テーブルタグは基本的にはレイアウト用ではなく表のためのタグです。)
ではどういうことか見ていきましょう。
まず、書き方ですがテーブルタグは、<table><tr><td>~</td></tr></table> をひとまとまりにして記述します。
(~に文章)
<table><tr><td>初心者のためのホームページ講座</td></tr></table>
初心者のためのホームページ講座

ただ、これだけ記述しても文章しか表示されませんので、外枠を付けてみます。
<table border="1"><tr><td>初心者のためのホームページ講座</td></tr></table>
初心者のためのホームページ講座
ところで、テーブルタグは表と書きました。
trは行をtdは列を指しますので、下記のように記述すると・・・・(わかりやすいようにインデントしてます)
<table border="1">
 <tr><td>初心者のためのホームページ講座</td></tr>
 <tr><td>初心者のためのホームページ講座</td></tr>
</table>
   
初心者のためのホームページ講座
初心者のためのホームページ講座
2行分表示されます。さらに・・・・・
1つのtr(行)にtd(列)が2つあり、それが2つある下のソースは
<table border="1">
 <tr><td>初心者のためのホームページ講座</td><td>初心者のためのホームページ講座</td></tr>
 <tr><td>初心者のためのホームページ講座</td><td>初心者のためのホームページ講座</td></tr>
</table>
   
初心者のためのホームページ講座初心者のためのホームページ講座
初心者のためのホームページ講座初心者のためのホームページ講座
このように4つの欄ができることになります。
tableタグに属性cellpadding、td(列)にwidthを指定することによって、より見やすく表示させることができます。
<table border="1" cellpadding="5">
 <tr><td width="200">ホームページ作成講座</td><td width="300">ホームページ作成講座</td></tr>
 <tr><td width="300">ホームページ作成講座</td><td>ホームページ作成講座</td></tr>
</table>
   
ホームページ作成講座ホームページ作成講座
ホームページ作成講座ホームページ作成講座
ちなみに1行目の1段落目はwidthが200になっていますが、2行目の1段目でwidthを300に指定しているため、1行目も枠だけの幅は、勝手に大きいサイズ(つまりwidth=300)に合されてしまうので注意してください。
(列は一番大きいサイズに勝手になってしまいます。行もですが・・・・)


では最後に文字の位置の設定ですが、text-alignではtext-align:rightで文章を2行で書くと、右詰めになってしまいました。
そこで、tableタグを使用する場合tableを適当な幅にして「align="right"」とすると、文章2行でも右詰めではなくなります(^^)
<table border="1" cellpadding="5" align="right">
 <tr><td width="200">ホームページ作成講座は初心者用です。<br>色々と試してみてください。</td></tr>
</table>
 
ホームページ作成講座は初心者用です。
色々と試してみてください。

つまり、テーブル全体が右寄せになり、文章は既定値では左詰のため ↑ のようになります。
外枠が邪魔な場合は、border="1"を削除すればOKです。


このエントリーをはてなブックマークに追加

(゜д゜メ)ゴルァ
tableタグの本来の使い方は下記のような表のためですが・・・・
<table border="1" cellpadding="5">
 <tr><td style="background:#fcc">クラス名(組)</td><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
 <tr><td style="background:#ccf">人数(人)</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td></tr>
</table>
   
クラス名(組)ABCDE
人数(人)1011121314
テーブルタグは、ホームページ全体のレイアウトを作るのにホームページ作成初心者でもわりと扱いやすいので、意外とレイアウトで使用されることがあります。 別に悪いことではないので。。。

ただ、tableタグtrタグtdタグと多くのタグが必要なので、いつの間にか入れ子にならず、めちゃめちゃなソースになることが多々ありますので気を付けてください(^^;)
さて、テーブルタグの厄介な所は、上に記載したことともう1つあります。
1行目を段落1個、2行目を段落2個、3行目を段落3個というテーブルを作りたい時に ↓ のように記述すると、
<table border="1" width="450">
 <tr><td>AAA</td></tr><!-- 1行目 -->
 <tr><td>AAA</td><td>BBB</td></tr><!-- 2行目 -->
 <tr><td>AAA</td><td>BBB</td><td>CCC</td></tr><!-- 3行目 -->
</table>
     
AAA
AAABBB
AAABBBCCC
このようになってしまうんです(^^;)
つまり1番多い段落の幅に勝手に合されてしまうんです。
さて、どうすれば1行目を3行目の幅にすることができるかですが・・・
colspanというモノを使用します。
<table border="1" width="450">
 <tr><td colspan="3">AAA</td></tr><!-- 1行目 -->
 <tr><td colspan="2">AAA</td><td>BBB</td></tr><!-- 2行目 -->
 <tr><td>AAA</td><td colspan="2">BBB</td></tr><!-- 3行目 -->
 <tr><td>AAA</td><td>BBB</td><td>CCC</td></tr><!-- 4行目 -->
</table>
連結したい列数をtdの後に指定することによって連結させることができます。
       
AAA
AAABBB
AAABBB
AAABBBCCC
行を連結させたい場合はrowspanを使用します。
<table border="1" width="350">
 <tr><td rowspan="3">A</td><td>B-1</td></tr><!-- 1行目 -->
 <tr><td>B-2</td></tr><!-- 2行目 -->
 <tr><td>B-3</td></tr><!-- 3行目 -->
</table>
     
AB-1
B-2
B-3