テーブル設定

01テーブルの位置と名前

thead	<tr1><th1>	<tr2><th2>	<tr3><th3>	<tr4><th4>
tbody tr 1st	<td1>	<td2>	<td3>	<td4>
tbody tr 2nd	<td1>	<td2>	<td3>	<td4>

02いろいろなスタイル

シンプルなテーブル

<th>を使ってカテゴリーの部分が太くなるようにしています。

北海道	沖縄
北	南
寒い	暑い

HTML

<table>
    <tr>
        <th>北海道</th>
        <th>沖縄</th>
    </tr>
    <tr>
        <td>北</td>
        <td>南</td>
    </tr>
    <tr>
        <td>寒い</td>
        <td>暑い</td>
    </tr>
 </table>

色を変える

<th>や<tr>などにCSSで色を指定します。

北海道	沖縄
北	南
寒い	暑い

CSS

table th{
    color: red;
        }

北海道	沖縄
北	南
寒い	暑い

CSS

table th{
    color: red;
    background-color: #ffe5e5;
        }

線の色や太さ、スタイルなどを変える

borderを使ってCSSで色を指定します。

北海道	沖縄
北	南
寒い	暑い

CSS

table{
    border: solid 3px brown;
    }
table th{
    border: dashed 1px brown;
        }
table td{
    border: dashed 1px brown;
        }

指定した列を変える

テーブルタグを使ってCSSで色を指定します。

　

北海道	沖縄
北	南
寒い	暑い
大きい島	小さい島
北国	南国

CSS

北海道だけを変える
.table th:first-of-type{
              background: #b3e6ff;
              }
              
 沖縄だけを変える
.table th:nth-of-type(2){
              background: #ffbf80;
              }
              
  指定した列だけを変える
.table tr:nth-of-type(4){
              background: #d1ffd1;
              }

偶数、奇数などに色分け

偶数

　

北海道	沖縄
北	南
寒い	暑い
大きい島	小さい島
北国	南国

CSS

 偶数の列の色を変える
.table tr:nth-child (even) {
            background-color: #ffffcc;
            }

奇数

　

北海道	沖縄
北	南
寒い	暑い
大きい島	小さい島
北国	南国

CSS

奇数の列の色を変える
.table tr:nth-child (even) {
            background-color: #ffffcc;
            }

borderの種類

EXAMPLE	CSS
01	solid
02	double
03	dashed
04	dotted
05	outset
06	inset
07	ridge
08	groove
09	none

---