常用細線表のCSS実現


技術的なものは何もありませんが、今日は古い紫竹の群れの中でこれに言及されているので、整理しておくと便利だと思います.特にweb開発をあまりしない人.私の知っている方法は全部で4種類で、もし友达が5種類目を見つけたら必ず私に教えて、追加して楽しみを分かち合います.
注意:後の2つの方法は空tdで を利用しなければならない.補白を行う.もちろんいろいろな方法で混合して使用することができます.  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title></title>

        <style>

            th{

                background: yellow;

            }

            .table1{

                empty-cells: show;

                border-collapse: separate !important;

                border-collapse: collapse;

            }

            .table2{

                background-color: #808080;

            }

            .table2 td{

                background-color: #fff;

            }

            .table3{                

                border-top: 1px solid silver; 

                border-right: 1px solid silver; 

            }

            .table3 td,.table3 th{

                border-left: 1px solid silver;

                border-bottom: 1px solid silver;

            }

            .table4 th{

                border-right: 1px solid silver;

                border-bottom: 1px solid silver;

            }

        </style>

    </head>



    <body>

        <table class="table1" border="1">

            <tr>

                <th>   </th>

                <th></th>

                <th>   </th>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td></td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td></td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td></td>

            </tr>

        </table>

        <br>

        <table class="table2" border="0" cellspacing="1">

            <tr>

                <th>   </th>

                <th></th>

                <th>   </th>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td></td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td></td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td></td>

            </tr>

        </table>

        <br>

        <table class="table3" border="0" cellspacing="0">

            <tr>

                <th>   </th>

                <th>&nbsp;</th>

                <th>   </th>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td>&nbsp;</td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td>&nbsp;</td>

            </tr>

        </table>

        <br>

        <table class="table4" border="1" cellspacing="0"  borderColorDark="#ffffff">

            <tr>

                <th>   </th>

                <th>&nbsp;</th>

                <th>   </th>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td>&nbsp;</td>

                <td>   </td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td>&nbsp;</td>

                <td>   </td>

            </tr>

            <tr>

                <td>   </td>

                <td>   </td>

                <td>&nbsp;</td>

            </tr>

        </table>

    </body>

</html>