HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLテーブルのスタイリング


CSSを使用して、テーブルの見栄えを良くします。


HTMLテーブル-ゼブラストライプ

テーブルの1行おきに背景色を追加すると、ゼブラストライプの効果が得られます。

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

他のすべてのテーブル行要素のスタイルを設定するには、次の:nth-child(even) ようにセレクターを使用します。

tr:nth-child(even) {
  background-color: #D6EEEE;
}

注:(odd)の代わりにを使用すると (even)、2、4、6などではなく1、3、5行などでスタイリングが発生します。


HTMLテーブル-垂直ゼブラストライプ

縦のゼブラストライプを作成するには、1行おきではなく、1列おきにスタイルを設定ます

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

:nth-child(even)次のようにテーブルデータ要素のを設定します。

td:nth-child(even), th:nth-child(even) {
  background-color: #D6EEEE;
}

注: ヘッダーと通常のテーブルセルの両方にスタイルを設定する場合は、両方の要素と要素:nth-child()セレクターを配置します。thtd



垂直と水平のゼブラストライプを組み合わせる

上記の2つの例のスタイルを組み合わせると、1行おきと1列おきにストライプができます。

透明色を使用すると、重なり合う効果が得られます。

                 
                 
                 
                 
                 

色を使用して、rgba()色の透明度を指定します。

tr:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
  background-color: rgba(150, 212, 212, 0.4);
}

水平分周器

ファーストネーム 苗字 貯蓄
ピーター グリフィン 100ドル
ロイス グリフィン 150ドル
ジョー スワンソン 300ドル

各テーブル行の下部にのみ境界線を指定すると、水平方向の仕切りのあるテーブルになります。

border-bottomプロパティをすべての 要素に追加して、tr水平分割を取得します。

tr {
  border-bottom: 1px solid #ddd;
}

ホバー可能なテーブル

:hoverセレクターを上 に使用してtr、マウスオーバーでテーブル行を強調表示します。

ファーストネーム 苗字 貯蓄
ピーター グリフィン 100ドル
ロイス グリフィン 150ドル
ジョー スワンソン 300ドル

tr:hover {background-color: #D6EEEE;}