4.表を作ってみる


表を作るにはテーブルタグを使います。
テーブルタグは非常によく使います。
表を作ることもさることながら、細かなレイアウトの設定が可能になります。
ここでは基本的な機能しか説明しませんが、完全に把握できれば応用も容易に出来ます。
利用度が一番高く、一番複雑なテーブルタグをマスターしましょう。


<table border> <tr> <td>文はここ</td><td>文はここ</td> <tr> <td>文はここ</td><td>文はここ</td> </table> ↑これが基本的なテーブルタグの骨組みです。下のようになります。
文はここ文はここ
文はここ文はここ
表が出来ました。行、列を増やすのは簡単で、 <table border> <tr> <td>文はここ</td><td>文はここ</td> <tr> <td>文はここ</td><td>文はここ</td> <tr> <td>文はここ</td><td>文はここ</td> <tr> <td>文はここ</td><td>文はここ</td> </table> ↑のようにすると、
文はここ文はここ
文はここ文はここ
文はここ文はここ
文はここ文はここ


<table border> <tr> <td>文はここ</td><td>文はここよ〜ん</td><td>文はここ</td><td>文はここ</td> <tr> <td>文はここ</td><td>文はここ</td><td>文はここ</td><td>文はここ</td> </table> ↑のようにすると、
文はここ文はここよ〜ん文はここ文はここ
文はここ文はここ文はここ文はここ
となります。

ちなみに、 <table border> <tr> <td>文はここ</td><td>文はここ</td><td>文はここ</td><td>文はここ</td> <tr> <td>文はここ</td> </table> ↑のように書くと、
文はここ文はここ文はここ文はここ
文はここ
このような表が制作されます。
文章を書いたり行列の数を増減したり色々試してみて、ぜひ基本的な骨組みをマスターしてください。


<td></td> の部分を <th></th> に変えるとその部分を目立たせることが可能です。 <table border> <tr> <td>文はここよ〜ん</td><td>文はここ</td> <tr> <th>文はここ</th><td>文はここ。。。</td> </table>
文はここよ〜ん文はここ
文はここ文はここ。。。

変えた部分がセンタリングされ、太字になりました。

<table border width=ピクセル、％ height=ピクセル、％> こうすることでテーブル全体の大きさを変えられます。 <table border width=100 height=100> <tr><td>文はここ</td><td>文はここ</td> <tr><th>文はここ</th><td>文はここ</td> </table>
文はここ文はここ
文はここ文はここ
<table border width=100% height=10%> <tr><td>文はここ</td><td>文はここ</td> <tr><th>文はここ</th><td>文はここ</td> </table>
文はここ文はここ
文はここ文はここ

パーセントで設定すると、画像の時と同じように「この画面に対して何パーセントで表示する」という意味になります。


<td></td>、<th></th> も大きさの指定が出来ます。
この場合、パーセントで設定すると「テーブル全体に対して何パーセント」という意味になります。
<table border width=300 height=200> <tr><td width=30% height=150>文はここ</td><td>文はここ</td> <tr><th>文はここ</th><td>文はここ</td> </table> ↑幅はテーブル全体の30％、高さはピクセルで150に設定しました。下の様になります。
文はここ文はここ
文はここ文はここ


ここで注意ですが、 <table border width=300 height=200> <tr><td width=30%>文はここ</td><td width=90%>文はここ</td> <tr><th>文はここ</th><td>文はここ</td> </table> ↑ width=30% width=90% のように合計で100％を超える設定は出来ません。

テーブルを太くすることが出来ます。 <table border cellspacing=自然数> <tr><td>文はここ</td> </table>
文はここ
これは１０に設定した表です。

テーブル内の文字間を広くします。 <table border cellpadding=自然数> <tr><td>文はここ</td> </table>
文はここ
これは１０に設定した表です。

枠の高さを変えることが出来ます。 <table border=整数> <tr><td>文はここ</td> </table>
文はここ
これは１０に設定した表です。
０に設定することで枠線を消すことが出来ます。
つまり、border=0　というのを駆使すれば枠を表示することなくレイアウトすることが出来ます。
<table border=0 width=400 height=200> <tr><td width=30%>文はここ</td><td>文はここ</td> <tr><th>文はここ</th><td>文はここ</td> </table>
文はここ文はここ
文はここ文はここ

↑このようになるのです。


テーブルの横に文を入れることが出来ます。
画像の時と同じですね。
<table border align=right、left> <tr><td>文はここ</td><td>文はここ</td> <tr><th>文はここ</th><td>文はここ</td> </table> ここに文章を書くのよ <br clear=all>
文はここ文はここ
文はここ文はここ
align=left　に設定しました。


文はここ文はここ
文はここ文はここ
align=right　に設定しました。
テーブル内に色をつけることが出来ます。 <table border bgcolor="#c0c0c0"> <tr><td>文はここ</td><td>文はここ</td> </table>
文はここ文はここ
<table border> <tr><td bgcolor="#c0c0c0">文はここ</td><td>文はここ</td> </table>
文はここ文はここ
<table border> <tr><td>文はここ</td><td bgcolor="#c0c0c0">文はここ</td> </table>
文はここ文はここ


次のようにすると、色のついた枠で表を作ることが出来ます。 <table border=0 bgcolor="#00cc00"> <tr><td bgcolor="#ffffff">文はここ</td><td bgcolor="#ffffff">文はここ</td> </table>
文はここ文はここ
テーブル内に背景画像をつけることが出来ます。 <table border background="test.jpg"> <tr><td>文はここ</td><td>文はここ</td> </table>
文はここ文はここ
<table border> <tr><td background="test.jpg">文はここ</td><td>文はここ</td> </table>
文はここ文はここ


テーブル内の段落の設定です。 <table border> <tr> <td align=left valign=top>1行1列目</td> <td align=left valign=top>1行2列目</td> <td align=left valign=top>1行3列目</td> <tr> <td align=center valign=middle>2行1列目</td> <td align=center valign=middle>2行2列目</td> <td align=center valign=middle>2行3列目</td> <tr> <td align=right valign=bottom>3行1列目</td> <td align=right valign=bottom>3行2列目</td> <td align=right valign=bottom>3行3列目</td> </table>
1行1列目 1行2列目 1行3列目
2行1列目 2行2列目 2行3列目
3行1列目 3行2列目 3行3列目


ブチ抜きを作ります。

<table border> <tr> <td colspan=2>横２段ブチ抜きです</td> <tr> <td>2行1列目</td> <td>2行2列目</td> <tr> <td>3行1列目</td> <td>3行2列目</td> </table>
横２段ブチ抜きです
2行1列目 2行2列目
3行1列目 3行2列目
<table border> <tr> <td colspan=2>横２段ブチ抜きです</td> <tr> <td>2行1列目</td> <td>2行2列目</td> <tr> <td colspan=2>横２段ブチ抜きです</td> </table>
横２段ブチ抜きです
2行1列目 2行2列目
横２段ブチ抜きです


<table border> <tr> <td rowspan=2>縦２段ブチ抜きです</td> <td>1行2列目</td> <td>1行3列目</td> <tr> <td>2行2列目</td> <td>2行3列目</td> </table>
縦２段ブチ抜きです 1行2列目 1行3列目
2行2列目 2行3列目
<table border> <tr> <td rowspan=2>縦２段ブチ抜き</td> <td>1行2列目</td> <td rowspan=2>縦２段ブチ抜き</td> <tr> <td>2行2列目</td> </table>
縦２段ブチ抜き 1行2列目 縦２段ブチ抜き
2行2列目




次は５へゴ→






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