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

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

四辺の1辺だけを表示する

楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集
TABLEタグでもっと自由にレイアウト
●テーブルの四辺の1辺だけを表示する


線の種類と太さを変える方法をマスターしたら
今回は四辺の1辺だけを表示する方法です
テーブルの周りに線を引く時、前回では以下のようにＨＴＭＬを書きました
<table style="border:solid 1pt #666666;">

<tr><td></td></tr>
</table>
でしたね
さらにこんな方法でも同じテーブルが描けるんです
<table style="border:solid #666666;
border-width:1px 1px 1px 1px;">

<tr><td></td></tr>
</table>
解説しますと
border: solid #666666; で線の種類と色を指定
border-width: 1pt 1pt 1pt 1pt; で
テーブルの四辺の1辺ずつをそれぞれ指定しているわけです
border-width：0pt0pt0pt0pt；
上辺左辺下辺右辺
時計周りに指定すると覚えたらいいですね
そもそも <table border="1" bordercolor="#666666" cellspacing="0">
だけで済む話がかなり面倒くなりましたね

でもこれを応用するとテーブルレイアウトの幅がぐぐぐっと広がるんです！
今回の方法と｢前回の線種と太さを変える｣方法を合わせるとテーブルデザインのパターンは数限りなく増えます
●上辺のみ表示する
<table style="border:solid #666666;
border-width:1px 0px 0px 0px;">

<tr><td></td></tr> </table>

●下辺のみ表示する
<table style="border:solid #666666;
border-width:0px 0px 1px 0px;">

<tr><td></td></tr> </table>

●左辺のみ表示する
<table style="border:solid #666666;
border-width:0px 0px 0px 1px;">

<tr><td></td></tr> </table>

●右辺のみ表示する
<table style="border:solid #666666;
border-width:0px 1px 0px 0px;">

<tr><td></td></tr> </table>
さらにこんなことも出来ます
●上下の線を引く
<table style="border:solid #666666;
border-width:1px 0px;">

<tr><td></td></tr> </table>

●左右の線を引く
<table style="border:solid #666666;
border-width:0px 1px;">

<tr><td></td></tr> </table>

●4本の線の太さをバラバラにする
<table style="border:solid #666666;
border-width:1px 3px 5px 7px;">

<tr><td></td></tr> </table>
今回はTABLEタグにstyleという属性を使用する例をご紹介しましたが
styleは<tr>や<td>にも使えます
※tbodyには使用が禁止されているようです
trやtdにstyleを使うことでレイアウトパターンが多様化させることができるんです

これらを使ったテーブルのレイアウト及びＨＴＭＬの具体的例は次回ご紹介いたします
次ページへ進む　4本の線のテイストをバラバラに変える　その1
前ページへ戻る　線の種類と太さを変更する
楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集ＴＯＰへ

© Rakuten Group, Inc.
X