253838

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

七鍵＠楽天

コメント新着

うしまる＠ @ Re:タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技(08/21) タグの検索でぐぐってたらコチラに辿り着…

k.kyouka @ すきやき占い『しいたけ』の重要度27% 『しいたけ』…

なな@ Re:迷っています(11/01) レオ　がいいですよ☆★

マロン@ かわいいキュート

ｆｏｏｌｉｓｈ☆ｆｏｏ @ Re[1]:お久しぶりです。(07/15) ＞実演を踏まえてテストをしておりました…

バックナンバー

Aug , 2026
Jul , 2026

Jun , 2026

フリーページ

HTMLタグに挑戦

< 新しい記事

新着記事一覧(全310件)

過去の記事 >

Aug 16, 2004

タグを覚えよう【第１０回目】　-　テーブルってなに？（二回目）

(6)

テーマ：タグに挑戦！(102)

カテゴリ：タグ教室

前回テーブルについての基本的なことを紹介しましたが、
今日はもう少し踏み込んで勉強しましょう(〃⌒▽⌒)
とは言いましても、表（ひょう）機能としてのテーブルはもう説明しません。
あくまでデザインに使えそうな機能に特化して説明を進めていきます。

前回は枠の中で特定の位置に文書や画像を配置する方法を紹介しました。
「align」や「valign」を使うってことでしたよね(〃⌒▽⌒)
今回はもっと有効に、この「align」や「valign」を使用するために、
テーブルの枠自体の大きさを指定する方法をまず勉強しましょう。

例）

<tr><td width="150" height="150" align="left" valign="bottom">左下</td>
<td width="150" height="150" align="right" valign="top">右上</td></tr>
</table>

表示結果）

左下

右上

線を消した表示結果）

左下

右上

「align」や「valign」の使い方はもうばっちりですよね(〃⌒▽⌒)
今回新しく「TD」タグに指定した「width」と「height」ですが、これもどこかで見たことないですか？
以前「IMG」タグで画像の幅と高さを指定する際に使いましたよね。
同じようにテーブルの一マスの幅を指定する場合には「TD」に「width」を、
テーブルの一マスの高さを指定する場合には「TD」に「height」をそれぞれ指定します。
テーブルの一マスの幅と高さを指定することにより、

ってわけで、今日のお勉強は終わりです。
もう少し物足りないって方のために、テーブルを使用した小技を少し紹介しておきますね(〃⌒▽⌒)
どうぞご自由にお使いください。

例）
<table cellspacing="0"><tr>

<td bgcolor="#ffdddd" width="300"></td>
<td bgcolor="#ffcccc" width="20" height="20"></td>
</tr><tr>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffffff"><br>

ようこそ私のＨＰへ(〃⌒▽⌒)

<br></td>
<td bgcolor="#ffdddd"></td>
</tr><tr>
<td bgcolor="#ffcccc" height="20"></td>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffcccc"></td>
</tr></table>

表示結果）

ようこそ私のＨＰへ(〃⌒▽⌒)

例）
<table cellspacing="0"><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd" width="300"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr><tr>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffffff"><br>

ようこそ私のＨＰへ(〃⌒▽⌒)

<br></td>
<td bgcolor="#ffdddd"></td>
</tr><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr></table>

表示結果）

★	*	★
*	ようこそ私のＨＰへ(〃⌒▽⌒)	*
★	*	★

例）
<table cellspacing="3" border="3" bordercolor="#ff9999"><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd" width="300"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr><tr>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffffff"><br>

ようこそ私のＨＰへ(〃⌒▽⌒)

<br></td>
<td bgcolor="#ffdddd"></td>
</tr><tr>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
<td bgcolor="#ffdddd"></td>
<td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td>
</tr></table>

表示結果）

★	*	★
*	ようこそ私のＨＰへ(〃⌒▽⌒)	*
★	*	★

どうでしょう？
少しずつ変えるだけでもテーブルって面白いでしょ(〃⌒▽⌒)
上記の例は色や幅をちょこちょこ変えていろいろアレンジしてみて下さいね。

明日の予定は・・・
例によって未定です(´･ω･`)
未定ですが休みませんのでまたぜひ来てくださいね(ﾟ▽^*)ﾉ⌒☆

お気に入りの記事を「いいね！」で応援しよう

最終更新日 Aug 16, 2004 11:44:12 AM
コメント(6) | コメントを書く

[タグ教室] カテゴリの最新記事

■コメント

Re:タグを覚えよう【第１０回目】　-　テーブルってなに？（二回目）(08/16)

りんごほっぺさん

色々丁寧に教えてくださってありがとう。さっそく参考にして、自分のＨＰをいじってみます。
(Aug 16, 2004 12:47:42 PM)

返事を書く

はじめまして。

ｆｏｏｌｉｓｈ☆ｆｏｏさん

非常にシンプルで分かりやすいタグの解説でしたので、お気に入り日記に登録させていただきました。
色々とお勉強させていただきたいと思いますので、どうぞ宜しくお願いいたします。<(_ _)> (Aug 16, 2004 06:59:43 PM)

返事を書く

質問です

ゆりん☆ さん

今日の講義は、目から鱗でした！
アフィリのテンプレってこうなってたんですね。

cellspacingって、セルとセルの隙間スペースの事でしょうか？
例題３なのですが、1行目の<tr>1列目と3列目の<TD>
2行目<tr>2列目の<td>････と
交互に＃ff9999の縁取りが入ってるのは何故ですか？

何時もあつかましく、いっぱい質問するのに、
親切にお答え下さって、ありがとうございます。
(Aug 16, 2004 09:04:08 PM)

返事を書く

Re[1]:タグを覚えよう【第１０回目】　-　テーブルってなに？（二回目）(08/16)

＃七鍵さん

りんごほっぺさん

いらっしゃいませー。
参考になってなりよりです(〃⌒▽⌒)
またお越しくださいませm（_ _）m

(Aug 16, 2004 10:56:02 PM)

返事を書く

Re:はじめまして。(08/16)

＃七鍵さん

ｆｏｏｌｉｓｈ☆ｆｏｏさん

はじめましてー。
登録ありがとうです(〃⌒▽⌒)
これからもがんばりますので
こちらこそどうぞよろしくーm（_ _）m

(Aug 16, 2004 11:02:43 PM)

返事を書く

Re:質問です(08/16)

＃七鍵さん

ゆりん☆さん

>cellspacingって、セルとセルの隙間スペースの事でしょうか？
そうですよー(〃⌒▽⌒)
セル間とテーブル枠に対しての間隔です。
>例題３なのですが、1行目の<tr>1列目と3列目の<TD>
>2行目<tr>2列目の<td>････と
>交互に＃ff9999の縁取りが入ってるのは何故ですか？
IEは不思議なもので・・・
セルの中に何かあれば、TABLEタグで指定した線の色でセルを囲むんですよ（セルの線に色の指定がなければ）。
なんで、例３のような現象が勝手に起こってしまうわけです。
他にはOperaというブラウザが同じような挙動をするのですが、セルの枠に色まではつきませんね。

結論）
IEでborderが１以上のときでも、セルの中に何もなければセルに縁取りはされません

ってことです。

質問に遠慮はいりませんよ(〃⌒▽⌒)
質問に答えるのが趣味ですから（笑

(Aug 16, 2004 11:20:36 PM)

返事を書く

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! -- / --

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

Design a Mobile Site

スマートフォン版を閲覧 | PC版を閲覧