四辺の1辺だけを表示する
楽天ブログ＆アフィリエイトで使えるＨＴＭＬ小技集
TABLEタグでもっと自由にレイアウト
TABLEタグでもっと自由にレイアウト
●テーブルの四辺の1辺だけを表示する
線の種類と太さを変える方法をマスターしたら
今回は四辺の1辺だけを表示する方法です
線の種類と太さを変える方法をマスターしたら
今回は四辺の1辺だけを表示する方法です
テーブルの周りに線を引く時、前回では以下のようにＨＴＭＬを書きました
<table style="border:solid 1pt #666666;"
>
<tr><td></td></tr>
</table>
<tr><td></td></tr>
</table>
でしたね
さらにこんな方法でも同じテーブルが描けるんです
<table style="border:solid #666666;
border-width:1px 1px 1px 1px;" >
<tr><td></td></tr>
</table>
border-width:1px 1px 1px 1px;" >
<tr><td></td></tr>
</table>
解説しますと
border: solid #666666; で線の種類と色を指定
border-width: 1pt 1pt 1pt 1pt; で
テーブルの四辺の 1辺ずつをそれぞれ指定 しているわけです
border: solid #666666; で線の種類と色を指定
border-width: 1pt 1pt 1pt 1pt; で
テーブルの四辺の 1辺ずつをそれぞれ指定 しているわけです
border-width
：
0pt
0pt
0pt
0pt
；
上辺
左辺
下辺
右辺
時計周りに指定する
と覚えたらいいですね
そもそも
<table border="1" bordercolor="#666666" cellspacing="0">
だけで済む話がかなり面倒くなりましたね
でもこれを 応用するとテーブルレイアウトの幅がぐぐぐっと広がる んです！
今回の方法と｢前回の線種と太さを変える｣方法を合わせるとテーブルデザインのパターンは数限りなく増えます
だけで済む話がかなり面倒くなりましたね
でもこれを 応用するとテーブルレイアウトの幅がぐぐぐっと広がる んです！
今回の方法と｢前回の線種と太さを変える｣方法を合わせるとテーブルデザインのパターンは数限りなく増えます
●
上辺のみ表示する
<table style="border:solid #666666;
border-width:1px 0px 0px 0px;" >
<tr><td></td></tr> </table>
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>
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>
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>
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>
border-width:1px 0px;" >
<tr><td></td></tr> </table>
● 左右の線を引く
<table style="border:solid #666666;
border-width:0px 1px;" >
<tr><td></td></tr> </table>
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>
border-width:1px 3px 5px 7px;" >
<tr><td></td></tr> </table>
今回はTABLEタグにstyleという属性を使用する例をご紹介しましたが
styleは<tr>や<td>にも使えます
※tbodyには使用が禁止されているようです
trやtdにstyleを使うことでレイアウトパターンが多様化させることができるんです
これらを使ったテーブルのレイアウト及びＨＴＭＬの具体的例は次回ご紹介いたします
styleは<tr>や<td>にも使えます
※tbodyには使用が禁止されているようです
trやtdにstyleを使うことでレイアウトパターンが多様化させることができるんです
これらを使ったテーブルのレイアウト及びＨＴＭＬの具体的例は次回ご紹介いたします
© Rakuten Group, Inc.
