ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS でテーブルを使用する 2 つの方法 (例)

CSS でテーブルを使用する 2 つの方法 (例)

不言オリジナル: 2018-08-06 16:53:162891ブラウズ

この記事では、CSS でテーブルを使用する 2 つの方法 (例) を紹介します。必要な方は参考にしていただければ幸いです。

1. 普通のテーブル

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>CSS 表格。</title>
    <style>
        table {            
       
        width: 50%;            
        border-collapse: collapse; 
            /*border-collapse 属性设置是否将表格边框折叠为单一边框*/
        }

        table, th, td {            
        border: 1px solid blue;        
        }

        th {            
        height: 50px;            
        background-color: green;            
        color: white;        
        }

        td {            
        text-align: center;            
        padding: 5px; /*表格内边距*/
        }
    </style></head><body><table>
    <tr>
        <th>Firsetname</th>
        <th>Lastname</th>
    </tr>
    <tr>
        <td>jack1</td>
        <td>jack2</td>
    </tr>
    <tr>
        <td>jack3</td>
        <td>jack4</td>
    </tr>
    </table>
    </body>
    </html>

2. 美しいテーブル

CSS でテーブルを使用する 2 つの方法 (例)

関連記事