--.--
--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

12.03
Fri
今回はテーブル内のセルを結合する方法をご紹介します。

(例)入力ソース
<table border="1">
<tr>
<td colspan=3>○</td>
</tr>
<tr><td>×</td><td>○</td><td>×</td></tr>
<tr><td>○</td><td>×</td><td>×</td></tr>
</table>

(表示結果)

××
××


(例)入力ソース
<table border="1">
<tr>
<td colspan=3>○</td>
</tr>
<tr><td>×</td>
<td rowspan=2>○</td>
<td>×</td></tr>
<tr><td>×</td><td>×</td></tr>
</table>

(表示結果)

××
××


widthheightの属性を使用する事でテーブルの大きさを指定する事ができます。

(例)入力ソース
<Table border="1" width="100%" height="300"><Tr><Td ColSpan="3" Align="Center">タイトル</Td></Tr><Tr>
<Td Valign="top">●コンテンツ
●コンテンツ
●コンテンツ
</Td><Td>●コンテンツ
●コンテンツ
</Td><td>●コンテンツ
●コンテンツ
●コンテンツ
</td></Tr><Tr><Td ColSpan="3" align="center">タイトル</Td></Tr></Table>

(表示結果)

タイトル
●コンテンツ
●コンテンツ
●コンテンツ
●コンテンツ
●コンテンツ
●コンテンツ
●コンテンツ
●コンテンツ
タイトル






スポンサーサイト
comment 0 trackback 0
05.05
Fri
・応用編


■ 色々なテーブル枠



前回は、カラフルなデザインを作る3を学びました。
今回は、テーブルの枠自体をスタイルシートで変えて遊んでみます。


前回も書きましたが、スタイルシートは「習うより慣れよう!」です。

ということで、じゃんじゃん例題を載せていきますので、
実際に遊んでおぼえてみましょう!



まずは、最もシンプルな形から。

ここに文章や画像をいれます




入力ソースはこちら。
<table width="300" height="50" style="border:1px solid #ff6600;">
<tr><td>ここに文章や画像をいれます</td></tr></table>




border:1px」は、枠の太さを表し、数字を大きくすると枠が太くなります。
いままでと違い、数字に単位(px)がついている点に注目ですね。

#ff6600」は枠自体の色。おなじみのRGBカラー色名で好きな色にできます。

solid」は、線状の枠を指定する値です。



ちなみに「background-color:#ffcc99;」をプラスすると・・・

このように背景をつけることができました。

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:1px solid #ff6600;backgroundcolor:#ffcc99;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







dashed」をつかって枠を点線に。

「border:1px」のとき


ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:1px dashed #339933;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







「border:3px」「background-color:#ccffcc;」のとき

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:3px dashed #339933;background-color:#ccffcc;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







double」をつかって枠を2重に。(「border:2px」以下だと2重になりません)

「border:3px」のとき


ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:3px double #3300ff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







「border:4px」「background-color:#ccccff;」のとき
(外側の枠が太くなりました)

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:4px double #3300ff;background-color:#ccccff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







dotted」をつかって枠をかわいく。

「border:3px」のとき


ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:3px dotted #6600ff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>







「border:4px」「background-color:#ccccff;」のとき

ここに文章や画像をいれます



入力ソースはこちら。
<table width="300" height="50" style="border:4px dotted #6600ff;background-color:#ffccff;">
<tr><td>ここに文章や画像をいれます</td></tr></table>




このように色々な枠をつくることができました。

次回は、この枠をつかって、さらに遊んでみます!
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブルの枠の色を変える2



前回は、枠に色をつける方法を学びました。
今回は、枠に別々に色をつける方法を学んでいきましょう。


今回は、「bordercolordark」「bordercolorlight」属性をつかいます。
これで暗い部分・明るい部分にわけて色付けができるのです。


この属性は「table」はもちろん、「tr」「td」にも設定できます。


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

table」に
bordercolordark」を設定:




(「<table border="3" bordercolordark="red">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
さらに・・・
bordercolorlight」を設定:




(「<table border="3" bordercolordark="red" bordercolorlight="#ff9900">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
(「tr」に設定した例:



(「<table border="3">
<tr bordercolordark="003300"
bordercolorlight="#009900"><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
td」に設定した例:


(「<table border="3">
<tr><td bordercolordark="#333399"
bordercolorlight="#33ff99">●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)



このように暗い部分と明るい部分に色をわけてつけていくことができました。
bordercolordark」だけを設定すると、けっこうカッコイイですね。

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


■テーブルの枠の色を変える



前回は、テーブルの色を変える方法を学びました。
今回は、テーブルの枠に色をつける方法を学んでいきましょう。


枠に色をつけるときは、「bordercolor」属性をつかいます。


この属性は「table」はもちろん、「tr」「td」にも設定できます。


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

table」に色を設定:



(「<table border="1" bordercolor="red">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
さらに「tr」に色を設定:



(「<table border="1" bordercolor="red">
<tr bordercolor="blue"><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
さらに「td」に色を設定:



(「<table border="1" bordercolor="red">
<tr bordercolor="blue"><td>●</td><td>○</td></tr>
<tr><td bordercolor="green">□</td><td>■</td></tr>
</table>」と入力)



このように好きな部分に色をつけていくことができます。


ここで、枠の幅を変える属性「cellspacing」をつかい、
属性値を「0」にしてみると・・・

table」に色を設定:



(「<table border="1" bordercolor="red" cellspacing="0">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)



枠を塗りつぶすことができました。


次回は、枠部分に色をつける方法の続編です。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブルの色を変える



前回は、枠と文字の間隔を調節する方法を学びました。
今回は、テーブルに色をつける方法を学んでいきましょう。


テーブルに色をつけるときは、「bgcolor」属性をつかいます。


この属性は「table」はもちろん、「tr」「td」にも設定できます。


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

まずは「table」に色を設定:




(「<table border="1" bgcolor="ffcc99">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
さらに「tr」に色を設定:




(「<table border="1" bgcolor="ffcc99">
<tr bgcolor="ff9999"><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
さらに「td」に色を設定:




(「<table border="1" bgcolor="ffcc99">
<tr bgcolor="ff9999"><td>●</td><td>○</td></tr>
<tr><td bgcolor="ff9933">□</td><td>■</td></tr>
</table>」と入力)




このように好きな部分に色をつけていくことができます。

たとえば、マス目のなかの色を全部変えて、枠だけ目立たせるとか。
いろいろ応用ができます。

次回はテーブルの枠部分だけに色をつける方法です。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブル内の位置を変える3


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


テーブル内の位置を変えるときは「align」属性と「valign」属性をつかいます。
今回はヨコの位置を変える「align」属性をつかってみましょう。


属性値には「left」「center」「right」をいれます。



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


align="left"」としたとき:




●文章や画像をいれる
□文章や画像をいれる
▲文章や画像をいれる

(「<table border="1">
<tr><td align="left">●文章や画像をいれる</td></tr>
<tr><td align="left">□文章や画像をいれる</td></tr>
<tr><td align="left">▲文章や画像をいれる</td></tr>
</table>」と入力)

align="center"」としたとき:






(「<table border="1">
<tr><td ailgn="center">●</td></tr>
<tr><td align="center">□</td></tr>
<tr><td align="center">▲</td></tr>
</table>」と入力)

align="right"」としたとき:






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



↑解りやすいようにテーブルの大きさを変更しています。

このように文字のタテの位置を変えることができました。
次回はヨコ・タテの位置を同時に変えてみます。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブル内の位置を変える


前回は、テーブルの位置を指定する方法を学びました。
今回は、テーブル内の位置を変える方法を学んでいきましょう。


テーブル内の位置を変えるときは「align」属性と「valign」属性をつかいます。
今回はヨコの位置を変える「align」属性をつかってみましょう。


属性値には「left」「center」「right」をいれます。


たとえばこの例をみてください。
align="left"」としたとき:




(「<table border="1">
<tr><td align="left">●</td></tr>
<tr><td align="left">□</td></tr>
<tr><td align="left">▲</td></tr>
</table>」と入力)
align="right"」としたとき:




(「<table border="1">
<tr><td align="center">●</td></tr>
<tr><td align="center">□</td></tr>
<tr><td align="center">▲</td></tr>
</table>」と入力)
align="right"」としたとき:




(「<table border="1">
<tr><td align="right">●</td></tr>
<tr><td align="right">□</td></tr>
<tr><td align="right">▲</td></tr>
</table>」と入力)
「別々の位置にしたとき:



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



解りやすいようにテーブルの幅を変えています。


このように文字の位置を変えることができました。
次回はタテの位置を同時に変えてみます。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブル内の位置を変える2


前回は、テーブル内の位置を変える方法を学びました。
今回は、テーブル内のタテ位置を変える方法を学んでいきましょう。


今回はタテの位置を変える「valign」属性をつかってみましょう。


属性値には「top」「middle」「bottom」をいれます。


たとえばこの例をみてください。
valign="top"」としたとき:




(「<table border="1">
<tr><td valign="top">●</td></tr>
<tr><td valign="top">□</td></tr>
<tr><td valign="top">▲</td></tr>
</table>」と入力)
valign="middle"」としたとき:




(「<table border="1">
<tr><td valign="middle">●</td></tr>
<tr><td valign="middle">□</td></tr>
<tr><td valign="middle">▲</td></tr>
</table>」と入力)
valign="bottom"」としたとき:




(「<table border="1">
<tr><td valign="bottom">●</td></tr>
<tr><td valign="bottom">□</td></tr>
<tr><td valign="bottom">▲</td></tr>
</table>」と入力)
「別々の位置にしたとき:



(「<table border="1">
<tr><td valign="top">●</td></tr>
<tr><td valign="middle">□</td></tr>
<tr><td valign="bottom">▲</td></tr>
</table>」と入力)



このように文字のタテの位置を変えることができました。
次回はヨコ・タテの位置を同時に変えてみます

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


■ テーブルにタイトルをつける



前回は、テーブルに見出しをつける方法を学びました。
今回は、テーブルにタイトルをつけてみましょう。


つかうタグは
<caption>~</caption>
です。


これをつかうと、テーブルの上にタイトルをつけることができるのです。


例:

「<table border="1">
<caption>動物の分類</caption>
<tr><th>哺乳類</th><th>魚類</th><th>鳥類</th></tr>

<tr><td>ライオン</td><td>マグロ</td><td>ワシ</td></tr>

<tr><td>ゾウ</td><td>カツオ</td><td>タカ</td></tr>

</table>」




動物の分類
哺乳類魚類鳥類
ライオンマグロワシ
ゾウカツオタカ





これで、全体が何の表なのかがわかるようになりましたね。
comment 0 trackback 0
05.05
Fri
・テーブルをつかう


■ テーブルに見出しをつける



前回は、テーブルを並べる応用編を学びました。
今回は、テーブルに見出しをつけてみましょう。


つかうタグは
<th>~</th>
です。


これをつかうと、マス目のなかに太字で見出しをいれることができるのです。


つかい方は、「th」を「td」のかわりに基本構成にいれます。
<table><tr><th></th></tr></table>

例:


「<table border="1">

<tr><th>哺乳類</th><th>魚類</th><th>鳥類</th></tr>

<tr><td>ライオン</td><td>マグロ</td><td>ワシ</td></tr>

<tr><td>ゾウ</td><td>カツオ</td><td>タカ</td></tr>

</table>」




哺乳類魚類鳥類
ライオンマグロワシ
ゾウカツオタカ




(※見出し部分がわかりやすいようにマス目のサイズを変更しています)


どうです?
分類がわかりやすくなったでしょ。


では、次回はテーブルにタイトルをつけてみましょう。
comment 0 trackback 0

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

back-to-top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。