WordPress Blog(QooQ)に使っているCSSたち(3)〜表(table)〜

公開日:2021-01-12 更新日:2021-01-12

HTML/CSS QooQ WordPress

t f B! P L

WordPress Blog(QooQ)に使っているCSSたち(1)〜CSS追加方法と全体像〜」の続き

表(table)

表の部分について


CSSは以下の通り

/*表*/
table {
    width: 100%;
    border-collapse: collapse;
}
table, td, th{
    padding: 10px 0;
    text-align: center;
    border: 1px solid #212121;
}
tr:nth-child(even) {
  background: #bdbdbd;
}

HTML例は以下の通り

<table>
    <tr>
        <th>項目1</th>
        <th>項目2</th>
        <th>項目3</th>
		<th>項目4</th>
    </tr>
    <tr>
        <td>A</td>
        <td>ほげほげ</td>
        <td>ふがふが</td>
		<td>げろげろ</td>
    </tr>
    <tr>
        <td>B</td>
        <td>ぼけぼけ</td>
        <td>ぷかぷか</td>
		<td>けろけろ</td>
    </tr>
    <tr>
        <td>C</td>
        <td>ぽけぽけ</td>
        <td>ぶかぶか</td>
		<td>げこげこ</td>
    </tr>
</table>

表示例は以下の通り

項目1 項目2 項目3 項目4
A ほげほげ ふがふが げろげろ
B ぼけぼけ ぷかぷか けろけろ
C ぽけぽけ ぶかぶか げこげこ

「border-collapse: collapse」と指定することで、表の線が一本となる
(デフォルトは二重線)

「tr:nth-child(even)」で偶数行に装飾をすることができる


参考:【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ

About me

ゆかき(♀)

駆け出しインフラエンジニア
"技術力と画力と文章力をあげたい"

営業職からSEへ転身した人
#AP応用情報 #HTML5Lv1 #第2種電気工事士 #DCP(Data Center Practitioner) #LPIC Lv2 #VCP6.5 #CCNP #Oracle Bronze #HSKLv5 #TOEIC860

Line stamp

僭越ながら販売中

Green cat & Orange cat

Amazon