「html」テーブルのtr要素、td要素、th要素のcssを適用するサンプル

2021年8月26日

書式
1.列の見出し
th[scope="col"] {xx}
2.行の見出し
th[scope="row"]{xx}
3.タイトル
caption{xx}
4.偶数行
tr:nth-child(even){xx}
5.td,thのスタイルシート
<tr> 要素は、表内でセルの行を定義します。行のセルは <td> (データセル) および <th> (見出しセル) 要素をを混在させることができます。

使用例

<style>
td,th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px;
}
td {
    text-align: center;
}
tr:nth-child(even) {
    background-color:yellow;
}
th[scope="col"] {
    background-color: #696969;
    color: #fff;
}
th[scope="row"] {
    background-color: #d7d9f2;
}
caption {
    padding: 10px;
    caption-side: top;
}
table {
    border-collapse: collapse;
    border: 2px solid rgb(200, 200, 200);
    letter-spacing: 1px;
    font-size: .8rem;
    width: 250px;
}
</style>
<table>
    <caption>情報一覧</caption>
    <tr>
        <th scope="col">名前</th>
        <th scope="col">住所</th>
        <th scope="col">メモ</th>
    </tr>
    <tr>
        <th scope="row">太郎</th>
        <td>11 even偶数css</td>
        <td>aa</td>
    </tr>
    <tr>
        <th scope="row">次郎</th>
        <td>22</td>
        <td>bb</td>
    </tr>
     <tr>
        <th scope="row">三郎</th>
        <td>even偶数css 33</td>
        <td>cc</td>
    </tr>
</table>