100万ポイント山分け!1日5回検索で1ポイントもらえる
>>
人気記事ランキング
ブログを作成
楽天市場
674628
ホーム
|
日記
|
プロフィール
【フォローする】
【ログイン】
☆ Sanctuary ☆ Smile for you
TABLEタグ(2)
||
フリーページ一覧表へ戻る
||
TABLEタグ(1)へ
||
TABLEタグ(3)へ
||
テーブルタグ <table> の使い方を覚えよう!! (2)
table タグはページの作成に欠かせないものです。
table タグを使うと写真や文章などを縦横に整理して並べたりすることができます。
それでは table タグの便利な使い方を見てみましょう。。
● セル内のフォントサイズやフォントカラーを一括指定するには?
まず、TABLEタグ(1)のページで作成したものを振り返ってみましょう。
<table bgcolor="lightblue" border="0" width="360">
<tr>
<th width="180" bgcolor="yellow" align="center">
<font size="3">ミャー子</font></td>
<th width="180" bgcolor="yellow" align="center">
<font size="3">なな</font></td>
</tr>
<tr>
<td width="180"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子"></td>
<td width="180"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな"></td>
</tr>
<tr>
<td width="180" align="left">
<font size="2">ミャー子がお散歩中。。</font></td>
<td width="180" align="left">
<font size="2">ななが外で日向ぼっこして<br>います。</font></td>
</tr>
</table>
↓こんな感じでしたね。
ミャー子
なな
ミャー子がお散歩中。。
ななが外で日向ぼっこして
います。
( ・o・)b font タグを減らしてちょっとすっきりさせてみましょう!!
そのためには、table タグの style 属性に font-size を指定してあげます。
ここでは font-size:10pt; としておきましょう。
pt というのは、フォントサイズを表す単位だと思ってください。
<table bgcolor="lightblue" border="0" width="360"
style="font-size:10pt;"
>
<tr>
<th width="180" bgcolor="yellow" align="center">ミャー子</td>
<th width="180" bgcolor="yellow" align="center">なな</td>
</tr>
<tr>
<td width="180"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子"></td>
<td width="180"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな"></td>
</tr>
<tr>
<td width="180" align="left">ミャー子がお散歩中。。</td>
<td width="180" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>
↓こんな感じになります。見た目はほぼ同じです。
ミャー子
なな
ミャー子がお散歩中。。
ななが外で日向ぼっこして
います。
( ・o・)b 今度は、
・すべての行をを白に変えて、( tr bgcolor="white" )
・文字色を青に、( color:blue )
・背景色を緑に、( table bgcolor="green" ) してみましょう!!
<table
bgcolor="green"
border="0" width="360" style="font-size:10pt;
color:blue;"
>
<tr
bgcolor="white"
>
<th width="180" align="center">ミャー子</td>
<th width="180" align="center">なな</td>
</tr>
<tr
bgcolor="white"
>
<td width="180"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/47.jpg" width="180" height="135" alt="ミャー子"></td>
<td width="180"><img src="http://plaza.rakuten.co.jp/img/user/98/02/1639802/50.jpg" width="180" height="135" alt="なな"></td>
</tr>
<tr
bgcolor="white"
>
<td width="180" align="left">ミャー子がお散歩中。。</td>
<td width="180" align="left">
ななが外で日向ぼっこして<br>います。</td></tr>
</table>
↓こんな感じになります。
ミャー子
なな
ミャー子がお散歩中。。
ななが外で日向ぼっこして
います。
( ^o^)b 雰囲気も変わり、なかなかいい感じになりましたね!
こんな風にして、みんなも背景色や文字色を変えてみてくださいね。
table tag (2)
ジャンル別一覧
出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒
ペット
趣味・ゲーム
映画・TV
音楽
読書・コミック
旅行・海外情報
園芸
スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル
人気のクチコミテーマ
福山雅治について
福山雅治サインポスター掲示2『FUK…
(2024-01-22 04:00:09)
クラシック、今日は何の日!?
鼻が詰まってるので花粉症に良いとさ…
(2024-09-21 22:11:23)
洋楽
■苦み走った男ばかりのバンドメンバ…
(2024-10-19 20:42:22)
© Rakuten Group, Inc.
X