テーブル

See the Pen 【テーブル】 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. <caption>と<thead>と<tbody>で構成されている基本的な<table>になります。
2. cssを使用し1行目と、2行目以降の<td>を含んでいる行には交互に背景色を設定しています。
3. 交互に背景色を設定するために、tr:nth-of-type(2n)のセレクタを使用し反映させています。
4. 画面幅が小さくなった場合、テーブルのレイアウト崩れを防ぐため、テーブルを囲っているエリア内で横スクロールが出来るようにしてあります。

See the Pen 【テーブル】シンプル2 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. <th>に::afterを使用し、三角形を配置しています。

See the Pen 【テーブル】レスポンシブ対応 by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 基本的な<table>構成になっており、<caption>と<thead>と<tbody>と<tfoot>が使用されています。
2. 作例のコードではブラウザ幅が600px以下になるとSP想定のレイアウトに切り替わります。
3. SP表示時は、<td>タグ内のdata-label属性に設定した値を、cssの::beforeを使用し生成しています。
4. セル内の横並びにはdisplay: flex;を指定し、justify-content: space-between;を組み合わせ左右に配置しています。

See the Pen 【テーブル】ソート by 早稲田電子IT教育センター (@wit-it) on CodePen.

1. 基本的な<table>構成になっており、<caption>と<thead>と<tbody>が使用されています。
2. 列のソート操作は、<thead>の<th>要素内にある各列のボタンを押すと、それぞれの列の数値を元に昇順表示、降順表示と切り替わります。
3. <button> 要素を使うことで、マウス・キーボード操作の両方に対応できます。
4. 表示用の文字と並び替え用の値は data-value 属性で分離しており、JavaScriptは行の並び替え処理のみに使用しています。