000000 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

ブログ*小鳥ぶらり鹿児島の旅*

線種と太さを変える

楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集
TABLEタグでもっと自由にレイアウト
●線の種類と太さを変える

まずは基本編
これさえ分かれば後はどうにだって応用がきくんです！
あとはご自分の好みに合わせてアレンジしちゃってください♪
テーブルを囲む線を引く時
<table border="1" cellspacing="0">

<tr><td></td></tr>
</table>
としますね
これと同じテーブルになる書き方が
<table style="border:solid 1pt #666666;">

<tr><td></td></tr>
</table>
属性 styleを使用します
コロンセミコロン
↓↓
border：solid1pt#666666；
∥∥∥
線の種類線の太さ線の色
※注意！solid 1pt #666666の前はコロン（：）後はセミコロン（；）
solidは線の種類、1ptは線の太さを表しています

ということはつまり……
solidや1ptを変えることでニュアンスの違ったテーブルが描けるということですね！
以下8例挙げておきます
●一重線●ニ重線●点線●波縫い
soliddoubledotteddashed
※上段の4種類の線はすべて太さ2pxです
●内線●外線●谷線●山線
insetoutsetgrooveridge
※下段の4種類の線はすべて太さ12pxです
●一重線
<table style="border: solid 2pt #666666;">
●ニ重線
<table style="border: double 2pt #666666;">
●点線
<table style="border: dotted 2pt #666666;">
●波縫い線
<table style="border: dashed 2pt #666666;">
●内線
<table style="border: inset 12pt #666666;">
●外線
<table style="border: outset 12pt #666666;">
●谷線
<table style="border: groove 12pt #666666;">
●山線
<table style="border: ridge 12pt #666666;">
※線種をちゃんと変えたのにうまく表示されない！というトラブルがあります
その時は線の太さを変えてみてください
線を太く変更すると指定した線種が表示されます

さて次回はテーブルの四辺の1辺だけを表示する方法です
今回の｢線種と太さを変更する方法｣と合わせるとレイアウトの幅がぐぐっと広がりますよ！
次ページへ進む　テーブルの四辺の1辺だけを表示する方法
楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集ＴＯＰへ

© Rakuten Group, Inc.
X