FC2ブログ
05.05
Fri
・テーブルをつかう


■ 枠と中の文字の間隔を調節する



前回は、テーブルにタイトルをつける方法を学びました。
今回は、枠と中の文字の間隔を設定してみましょう。


間隔を調節するときは「cellpadding」属性をつかいます。
属性値には「数字」をいれます。


数字が大きくなればなるほど、テーブルの枠と中の文字との間隔が広がるのです。


たとえばこの例をみてください。

なにも指定しない状態:



<table border="1">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>
<cellpadding="10">」をいれた場合;



<table border="1" cellpadding="10">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>
<cellpadding="20">」をいれた場合:



<table border="1" cellpadding="20">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>



このように、間隔を調節することができました。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ マス目をタテにつなげる



前回は、マス目をヨコにつなげる方法を学びました。
今回は、マス目をタテにつなげる方法を学んでいきましょう。


td」をタテにつなげるときは「rowspan」属性をつかいます。
属性値には「つなげる「マス目」の数」をいれます。


これにより、さらにテーブルレイアウトの自由度が格段に広がるのです。


たとえばこの例をみてください。

なにも指定しない状態:




(「<table border="1">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
<tr><td>▲</td><td>△</td></tr>
</table>」と入力)
<rowspan="2">」としたとき:




(「<table border="1">
<tr><td rowspan="2">●</td><td>○</td></tr>
<tr><td>■</td></tr>
<tr><td>▲</td><td>△</td></tr>
</table>」と入力)
<rowspan="3">」としたとき:



(「<table border="1">
<tr><td rowspan="3">●</td><td>○</td></tr>
<tr><td>■</td></tr>
<tr><td>△</td></tr>
</table>」と入力)



このようにタテのマス目をつなげることができました。


td」のかわりに「th」でもつかえます。
同じように「th rowspan=""」と入力します。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ マス目をヨコにつなげる



前回は、テーブル内の位置を変える方法を学びました。
今回は、マス目をヨコにつなげる方法を学んでいきましょう。


マス目をヨコにつなげるときは「colspan」属性をつかいます。


今回は今までとちがい、「table」にではなく、「td」に属性を合わせています。
属性値には「つなげる「マス目」の数」をいれます。


これによりテーブルレイアウトの自由度が格段に広がるのです。


たとえばこの例をみてください。

なにも指定しない状態:



(「<table border="1">
<tr><td>●</td><td>○</td><td>●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>」と入力)
<colspan="2">」としたとき:



(「<table border="1">
<tr><td colspan="2">●</td><td>●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>」と入力)
<colspan="3">」としたとき:


(「<table border="1">
<tr><td colspan="3">●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>」と入力)



このようにヨコのマス目をつなげることができました。


td」のかわりに「th」でもつかえます。
同じように「th colspan=""」と入力します。

次回は同じように、タテのマス目をつなげる方法です。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブルを並べる方法応用編



前回は、テーブルをヨコ・タテに並べる方法を学びました。
今回は、応用です。


前回、前々回のやり方で今度はヨコ・タテ同時に並べてみましょう。


ではいきますよ。







具体的な入力方法はこちら。


<table>
<tr>
<td>
<table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table>
</td>
<td>
<table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table>
</td>
</tr>
<tr>
<td>
<table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table>
</td>
<td>
<table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table>
</td>
</tr>
</table>



じつはここまでできたら、レイアウトする力がすでについちゃっています。
たとえば・・・


いままで学んだことを組み合わせれば、
自分オリジナルのレイアウトやデザインがつくれるのです。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブルをヨコに並べる


前回は、マス目をタテにつなげるを学びました。
今回からは、テーブルをヨコ・タテに並べる方法を学んでいきましょう。


たとえば次の例を見てください。






このようにテーブルが並んでいます。
いったいどうやって並べているのでしょう。


最も簡単な方法は、一つ目のテーブルに「align="left"」を設定します。


<table border="1" bgcolor="#ffcc99" align="left">
<tr><td>●</td><td>○</td></tr></table>


<table border="1" bgcolor="#ffcc99">
<tr><td>●</td><td>○</td></tr></table>


こんな感じですね。これでテーブルが並びます。



ただ今回は、レイアウト力をつけるために、あえて面倒な方法をもうひとつ学びます。
それは、このテーブル自体をマス目のひとつ、
つまり、一マスに入る文字と同じように考えてしまう方法です。


ということは・・・
td」のなかに、このテーブル自体を入れちゃうのです。


イメージとしては
<table><tr><td> ● ○ </td></tr></table>

という感じに「td」のなかに入ります。



今回は
● ○
がヨコにふたつなので


<table><tr><td>● ○</td><td>● ○</td></tr></table>

というイメージになります。




これをきちんと書くとこんな感じ。






<table><tr>
<td>
<table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table>
</td>
<td>
<table border="1" bgcolor="#ffcc99"><tr><td>●</td><td>○</td></tr></table>
</td>
</tr></table>




td」のなかに「<table><tr><td>~</td></tr></table>」が
まるごと入っています。


td」を増やせば、ヨコに並べるテーブルの数もどんどん増やせます。

ちなみにこのとき、テーブルの高さがバラバラになってしまうときは、
<table><tr valign="top">のように、
「valign=""」属性を赤色部分の「tr」にいれてみましょう!!


次回は同じようにテーブルをタテに増やしてみますよ!!


具体的なやり方は次回に。
comment 1 trackback 0
05.05
Fri
・文字のカスタマイズ


■ 水平線でメリハリを出す



前回は、スクロールに背景・余白を加える方法を学びました。
今回は、水平線を書く方法です。


水平線をうまくつかうと、ページがすっきり区切れてキレイに見えます。

水平線を書くのにつかうタグはこれ!
<hr>

例:

<hr>








このように線が引けました。
では、この線をカスタマイズしてみましょう!


線の立体感をなくす(通常は立体的に見えるようになっています)
<hr noshade>

例:

<hr noshade>








線に色をつける
<hr color="">

例:

<hr color="brown">








さらに線の太さを変える(通常の太さは"2")
<hr size="">

例:

<hr color="brown" size="10">








さらに線の長さを変える
<hr width="">

例:

<hr color="brown" size="10" width="200">








さらに線の位置を変える(属性値は「left」「center」「right」の3つ)
<hr align="">

例:

<hr color="brown" size="10" width="200" align="center">






comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブルの位置を指定する



前回は、テーブルの大きさを指定する方法を学びました。
今回は、テーブルの位置を設定してみましょう。


テーブルの位置を変えるときは「align」属性をつかいます。
属性値には「left」「center」「right」のいずれかをいれます。


例:
left」を入れた例:

(「<table border="1" align="left">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr></table>」
と入力)
↓ 
center」を入れた例:
 
(「<table border="1" align="center">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr></table>」
と入力)
right」を入れた例:

(「<table border="1" align="right">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr></table>」
と入力)





この「align」属性をテーブルに指定すると、テーブルのヨコに文章をもってくることもできるのです。
これは便利なのでぜひオススメ!

例:

left」を入れた例:



このように文章をヨコにもってくることができました。





(「align="left">

このように文章をヨコにもってくることができました。」と入力)

comment 0 trackback 0
05.05
Fri
・テーブルをつかう


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



前回は、タテに枠を並べる方法を学びました。
今回は、テーブルの大きさを自由に設定してみましょう。


テーブルの大きさを設定するときは「width」属性と「height」属性をつかいます。


このとき、テーブルのヨコ幅を「width」属性で、
テーブルのタテ幅を「height」属性で指定します。


width」を300にした例:



(「width="300">


」と入力)



同時に「height」を100にした例:





(「width="300"
height="100">

」と入力)



このようにテーブルの大きさを変えることができました。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ タテに枠を並べる



前回は、ヨコに枠を増やす方法を学びました。
今回は、タテに枠を増やしていきます。


枠をタテに増やす前に、前回の復習を。

前回はここまでやりましたね。

tdを3つ並べた例:

「<table border="1">
<tr><td>枠ができました</td><td>枠ができました</td><td>枠ができました</td></tr>
</table>」



枠ができました枠ができました枠ができました




では、いきますよー!
この枠をタテ2列にしてみましょう。


今度は一行にかかわる「tr」を増やしていくのです。
つまり、「tr」が2つだと2行、3つだと3行になります。

もちろんこのとき「tr」でサンドイッチした「td」もいっしょに増やします。


trを2つ並べた例:

「<table border="1">

<tr><td>枠ができました</td><td>枠ができました</td><td>枠ができました</td></tr>

<tr><td>枠ができました</td><td>枠ができました</td><td>枠ができました</td></tr>

</table>」



枠ができました枠ができました枠ができました
枠ができました枠ができました枠ができました




このように「tr」(中の「td」もいっしょに)を増やすと、
行を増やしていくことができるのです。


どうです?
おもったより簡単でしょ。


つまり、
tr」が増える→「行が増える
td」が増える→「列が増える
ということになるのです。


次回はこのテーブルでいろいろ遊んでみましょう
comment 0 trackback 0
05.05
Fri
テーブルをつかう


■ ヨコに枠を並べる



前回は、テーブルタグの基本構成を学びました。
今回は、枠の増やし方を学んでいきます。


枠をヨコに増やしてみよう。

基本構成は前回やったこの形です。
<table><tr><td>~</td></tr></table>

ここで一マスにかかわる「td」を増やしていきます。


td」を2つ並べた例:

「<table border="1">
<tr><td>枠ができました</td><td>枠ができました</td></tr>
</table>」



枠ができました枠ができました




td」を並べることで、このように枠を増やすことができるのです。


td」を3つ並べた例:

「<table border="1">
<tr><td>枠ができました</td><td>枠ができました</td><td>枠ができました</td></tr>
</table>」



枠ができました枠ができました枠ができました



なんとなく表らしくなってきましたね。

では、このマスをタテに増やすことはできないでしょうか。

つづきは次回に!
comment 0 trackback 0

 New Favorite blog Entries 最新記事 33サイト掲載中

back-to-top