« コクヨ「ひらめき」に関する意識調査、ひらめく場所 | トップページ | 東京ガールズコレクションの来場者数と売上高 »

2007年9月 5日 (水)

divタグを使わずtableタグだけで見やすい細い枠線を描く方法

divタグを使わず、テーブルタグだけで細い枠線を描くにはcellspacingとbgColor要素を使用します。①と②を比べてみるとワク線の太さが違うのが分かると思います。

①border=1

順位 ひらめく瞬間 割合(%)
1 1人の時 44.2%
2 誰かと話している時 18.7%

<table width="450" cellspacing="0" cellpadding="1" border="1">
    <tbody><tr bgcolor="#9aff9a">
        <td width="50" align="center">順位</td>
        <td width="300" bgcolor="#9aff9a" align="center">ひらめく瞬間</td>
        <td width="100" align="center">割合(%)</td>
    </tr>
    <tr>
        <td width="50" bgcolor="#ffffff" align="center">1</td>
        <td width="300" bgcolor="#ffe4b5" align="center">1人の時</td>
        <td width="100" bgcolor="#ffffff" align="center">44.2%</td>
    </tr>
    <tr>
        <td width="50" bgcolor="#ffffff" align="center">2</td>
        <td width="300" bgcolor="#ffe4b5" align="center">誰かと話している時</td>
        <td width="100" bgcolor="#ffffff" align="center">18.7%</td>
    </tr>
</tbody></table>

②cellspacing="1",bgColor="black"

順位 ひらめく瞬間 割合(%)
1 1人の時 44.2%
2 誰かと話している時 18.7%

<table width="450" cellspacing="1" cellpadding="1" bgcolor="black">
    <tbody><tr bgcolor="#9aff9a">
        <td width="50" align="center">順位</td>
        <td width="300" bgcolor="#9aff9a" align="center">ひらめく瞬間</td>
        <td width="100" align="center">割合(%)</td>
    </tr>
    <tr>
        <td width="50" bgcolor="#ffffff" align="center">1</td>
        <td width="300" bgcolor="#ffe4b5" align="center">1人の時</td>
        <td width="100" bgcolor="#ffffff" align="center">44.2%</td>
    </tr>
    <tr>
        <td width="50" bgcolor="#ffffff" align="center">2</td>
        <td width="300" bgcolor="#ffe4b5" align="center">誰かと話している時</td>
        <td width="100" bgcolor="#ffffff" align="center">18.7%</td>
    </tr>
</tbody></table>

|

« コクヨ「ひらめき」に関する意識調査、ひらめく場所 | トップページ | 東京ガールズコレクションの来場者数と売上高 »

IT」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« コクヨ「ひらめき」に関する意識調査、ひらめく場所 | トップページ | 東京ガールズコレクションの来場者数と売上高 »