728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>선택자 1</title>
<meta charset="UTF-8">
<style>
/*
'부모/선조 선택자' '선택자' {
...
}
*/
tr th{
background-color: black;
}
tr th{
color: white;
}
thead > tr > td {
background-color: dodgerblue;
}
thead > tr > td {
color : white
}
tfoot > tr > td {
background-color: gray;
}
tfoot > tr > td {
color: white;
}
tbody > tr > td {
color: black;
}
</style>
</head>
<body>
<table border="1">
<!-- border 테두리 속성 -->
<caption>표 제목</caption>
<!-- CAPTION : 표의 제목 (선택) -->
<thead>
<!-- THEAD : 표의 테이터가 아닌 열 이름 등을 담을 때 사용. (선택사항) -->
<tr>
<!-- TR : Table Row, 하나의 행 -->
<th rowspan="2">코드</th>
<!-- TH : Table Heading, 열 이름을 담는 셀(칸) -->
<th rowspan="2">이름</th>
<th colspan="2">인구(만)</th>
<th rowspan="2">면적(km<sup>2</sup>)</th>
</tr>
<tr>
<td>2021</td>
<td>2022</td>
</tr>
</thead>
<tbody>
<!-- TBODY : 표의 데이터를 담을 때 사용.(필수) -->
<tr>
<th>KR</th>
<th>대한민국</th>
<td >5078</td>
<td >5178</td>
<td >100210</td>
</tr>
<tr>
<th>US</th>
<th>미국</th>
<td >32850</td>
<td >32950</td>
<td >9834000</td>
</tr>
<tr>
<th>JP</th>
<th>일본</th>
<td>12480</td>
<td>12580</td>
<td>377975</td>
</tr>
<tr>
<th>DE</th>
<th>독일</th>
<td>8224</td>
<td>8324</td>
<td>357588</td>
</tr>
<tr>
<th>FR</th>
<th>프랑스</th>
<td>6639</td>
<td>6739</td>
<td>543940</td>
</tr>
<tr>
<th>GB</th>
<th>영국</th>
<td>6622</td>
<td>6722</td>
<td>243610</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">평균</th>
<!-- COLSPAN 속성 : 가로(가로) 방향으로 통합시킬 셀 개수(본 셀 포함)-->
<td>11982.16667</td>
<td>12082.16667</td>
<td>1909553.833</td>
</tr>
<!-- TFOOT : 표의 데이터에 대한 통계(평균, 합 들) 등을 담ㅇ르 때 사용. (선택) -->
</tfoot>
</table>
</body>
</html>
728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| style활용(회원가입+약관선택) (0) | 2022.12.21 |
|---|---|
| style활용(약관선택) (0) | 2022.12.21 |
| 디스플레이 (0) | 2022.12.19 |
| 의사 클래스 (0) | 2022.12.19 |
| 테두리 (0) | 2022.12.19 |