HTMLテーブルいろいろ
トップ
>
小技集
> (HTML、Webページ関連)HTMLテーブルいろいろ
コード・スニペットとして使えます。
htmlに欠かせないのがtableタグです。書き方次第でいろいろなテーブルを作成できます。
まずは枠線が細いテーブルです。使用頻度が高いのに、ついつい書き方を忘れてしまいます(苦笑)。
<table width="100" cellpadding="0" cellspacing="0"><tr><td height="100" bgcolor="#188A00"> <table width="100%" cellpadding="1" cellspacing="1"> <tr> <td bgcolor="#C6F76B" height="24"> </td> <td bgcolor="#C6F76B"> </td> <td bgcolor="#C6F76B"> </td> </tr> <tr> <td bgcolor="#ffffff" height="24"> </td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> </tr> <tr> <td bgcolor="#ffffff" height="24"> </td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> </tr> <tr> <td bgcolor="#ffffff" height="24"> </td> <td bgcolor="#ffffff"> </td> <td bgcolor="#ffffff"> </td> </tr> </table> </td></tr></table>
次は点線のテーブルです。
<table style="border:dotted thin #188A00;"> <tr> <td width="100" height="100"> </td> </tr> </table>
次は二重線のテーブルです。
<table style="border:3px double #188A00;" cellpadding="5" cellspacing="0"> <tr> <td width="100" height="100"> </td> </tr> </table>
最後は角が丸いテーブルです。
四つの角はそれぞれ画像になっています。下記のhtmlソースを使用する場合は、作成したい角丸テーブルにあった色や曲率の画像を四つ用意し、htmlソースの画像のパスを、実際に画像があるパスに変更する必要があります。
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20" width="20" style="background-image:url(/img/lt.gif)"></td> <td width="60" bgcolor="#C6F76B"> </td> <td height="20" width="20" style="background-image:url(/img/rt.gif)"></td> </tr> <tr> <td height="60" bgcolor="#C6F76B"> </td> <td bgcolor="#C6F76B"> </td> <td bgcolor="#C6F76B"> </td> </tr> <tr> <td height="20" width="20" style="background-image:url(/img/lb.gif)"></td> <td bgcolor="#C6F76B"> </td> <td height="20" width="20" style="background-image:url(/img/rb.gif)"></td> </tr> </table>
トップ
>
小技集
> (HTML、Webページ関連)HTMLテーブルいろいろ
トップ
|
このサイトについて
|
管理者へメール
|
サイトマップ
www
una.soragoto.net
Copyright(c) 2009 - 2012 una All Rights Reserved.