FPウェブシュフ

CSSの:nth-child()でテーブルを2色、3色、7色に色分けしてみた

CSSの:nth-child 擬似クラスは繰り返しパターンをスタイルシートで表現するのに便利。カラフルな表組みを作るのにもってこいだと思うので、使ってみました。

※:nth-child()については「CSS3で偶数行・奇数行など「n番目」を限定装飾する [ホームページ作成] All About」が分かりやすかったです。大変お世話になりました。

しましまストライプテーブル

stripe stripe
緑 緑
薄緑 薄緑
緑 緑
薄緑 薄緑
緑 緑
薄緑 薄緑
緑 緑
薄緑 薄緑

HTML

<table class="stripe">
<thead>
<tr>
<th>stripe</th>
<th>stripe</th>
</tr>
</thead>
<tbody>
<tr>
<td>緑</td>
<td>緑</td>
</tr>
<tr>
<td>薄緑</td>
<td>薄緑</td>
</tr>
<tr>
<td>緑</td>
<td>緑</td>
</tr>
<tr>
<td>薄緑</td>
<td>薄緑</td>
</tr>
<tr>
<td>緑</td>
<td>緑</td>
</tr>
<tr>
<td>薄緑</td>
<td>薄緑</td>
</tr>
<tr>
<td>緑</td>
<td>緑</td>
</tr>
<tr>
<td>薄緑</td>
<td>薄緑</td>
</tr>
</tbody>
</table>

CSS

table{
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
    color: #000000;
    line-height: 2;
    margin: 0 0 24px;
    width: 100%;
}
td,th,td {
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
    text-align:center;
}
table.stripe thead tr{
    background:black;
    color:white;
}
table.stripe tbody tr:nth-child(2n){
    background:lightgreen;
}
table.stripe tbody tr:nth-child(2n+1){
    background:darkgreen;
}

3色トリコロールテーブル

トリコロール トリコロール
青 青
白 白
赤 赤
青 青
白 白
赤 赤
青 青
白 白
赤 赤

HTML

<table class="tri">
<thead>
<tr>
<th>トリコロール</th>
<th>トリコロール</th>
</tr>
</thead>
<tbody>
<tr>
<td>青</td>
<td>青</td>
</tr>
<tr>
<td>白</td>
<td>白</td>
</tr>
<tr>
<td>赤</td>
<td>赤</td>
</tr>
<tr>
<td>青</td>
<td>青</td>
</tr>
<tr>
<td>白</td>
<td>白</td>
</tr>
<tr>
<td>赤</td>
<td>赤</td>
</tr>
<tr>
<td>青</td>
<td>青</td>
</tr>
<tr>
<td>白</td>
<td>白</td>
</tr>
<tr>
<td>赤</td>
<td>赤</td>
</tr>
</tbody>
</table>

CSS

table{
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
    color: #000000;
    line-height: 2;
    margin: 0 0 24px;
    width: 100%;
}
td,th,td {
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
    text-align:center;
}
table.tri thead tr{
    background:black;
    color:white;
}
table.tri tbody tr:nth-child(3n+1){
    background:blue;
}
table.tri tbody tr:nth-child(3n+2){
    background:white;
}
table.tri tbody tr:nth-child(3n){
    background:red;
}

虹色テーブル

虹色 虹色
赤 赤
オレンジ オレンジ
黄 黄
緑 緑
青 青
藍 藍
紫 紫
赤 赤
オレンジ オレンジ
黄 黄
緑 緑
青 青
藍 藍
紫 紫

HTML

<table class="niji">
<thead>
<tr>
<th>虹色</th>
<th>虹色</th>
</tr>
</thead>
<tbody>
<tr>
<td>赤</td>
<td>赤</td>
</tr>
<tr>
<td>オレンジ</td>
<td>オレンジ</td>
</tr>
<tr>
<td>黄</td>
<td>黄</td>
</tr>
<tr>
<td>緑</td>
<td>緑</td>
</tr>
<tr>
<td>青</td>
<td>青</td>
</tr>
<tr>
<td>藍</td>
<td>藍</td>
</tr>
<tr>
<td>紫</td>
<td>紫</td>
</tr>
<tr>
<td>赤</td>
<td>赤</td>
</tr>
<tr>
<td>オレンジ</td>
<td>オレンジ</td>
</tr>
<tr>
<td>黄</td>
<td>黄</td>
</tr>
<tr>
<td>緑</td>
<td>緑</td>
</tr>
<tr>
<td>青</td>
<td>青</td>
</tr>
<tr>
<td>藍</td>
<td>藍</td>
</tr>
<tr>
<td>紫</td>
<td>紫</td>
</tr>
</tbody>
</table>

CSS

table{
    border-bottom: 1px solid #ededed;
    border-right: 1px solid #ededed;
    color: #000000;
    line-height: 2;
    margin: 0 0 24px;
    width: 100%;
}
td,th,td {
    border-top: 1px solid #ededed;
    border-left: 1px solid #ededed;
    text-align:center;
}
table.niji thead tr{
    background:black;
    color:white;
}
table.niji tbody tr:nth-child(7n+1){
    background:red;
}
table.niji tbody tr:nth-child(7n+2){
    background:orange;
}
table.niji tbody tr:nth-child(7n+3){
    background:yellow;
}
table.niji tbody tr:nth-child(7n+4){
    background:green;
}
table.niji tbody tr:nth-child(7n+5){
    background:blue;
}
table.niji tbody tr:nth-child(7n+6){
    background:#003961;
}
table.niji tbody tr:nth-child(7n){
    background:purple;
}

色分けするとテーブルが見やすい

当ブログにも、しましまストライプテーブルを導入しました。

淡い色のストライプは、表が見やすくなっていいですね。

皆さんも如何ですか。

投稿日

カテゴリー:

投稿者:

webshufu

　最終更新日:

タグ: