表の修飾

表の罫線、背景色、配置等についてい実習した。

商品名	用途	価格	数量	在庫
バジル	料理全般・ハーブティー	500円	120g	○
ローズマリー	肉料理	1000円	200g	○
オレガノ	イタリア料理	480円	80g	×
タイム	肉料理	450円	100g	○

CSS

table{
　border-collapse : collapse;　　　　枠線を重ねて表示
　border : 2px solid black;　　　　表の外枠線
　width : 600px;　　　　表の幅
}
tr{　　　　行
　border : 1px solid black;
}
td{　　　　セル
　border : 1px solid black;
　padding : 5px;　　　　セル内の間隔
}
th{　　　　タイトルセル
　border-bottom : 3px double black;　　　　下線二重線
　border-left : 1px solid black;
　border-right : 1px solid black;
　padding : 5px;　　　　セル内の間隔
　background-color : aqua;　　　　背景色
}
tr td:nth-child(3),tr td:nth-child(4){　　　　3列目と4列目
　text-align : right;　　　　右寄せ
　width : 70px;　　　　列幅
}
tr td:nth-child(5){　　　　5列目
　text-align : center;　　　中央揃え
}
tr:nth-child(2n+1){　　　　奇数行
　background-color : #d6f1f5;　　　　背景色
}

「:nth-child()」はCSS3で定義された疑似クラスで、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。

例えば「tr td:nth-child(3)」は行内の左から3列目のセルを指定します。