<meta name="viewport" content="width=device-width, initial-scale=1.0">표 관련 태그
table 태그
- 웹 문서에서 자료 정리를 위해 주료 사용하는 태그
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell) 이라고 함.
table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함.
tr 태그
- Table Row의 약자로 한 행을 나타내는 태그
td 태그
- Table Data의 약자로 한 행의 한 컬럼(== cell)을 나타내는 태그
th 태그
-
Table Header의 약자로 컬럼명을 표시하는 용도의 태그는
-
기본 성질은 td와 같으나 추가적으로 굵은글씨, 가운데 정렬이 이루어짐.
caption 태그
-
테이블의 제목이나 설명 내용을 추가하는 태그
td 또는 th태그에 작성하는 속성
행 병합(rowspan) : 행(상하) 병합
열 병합(colspan) : 행(좌우) 병합
테이블 구조 설정 태그
thead : 테이블의 상단 부분 영억(컬럼명)
tbody : 테이블의 중단 부분 영역(실제 값, 내용)
tfoot : 테이블의 하단 부분 영역(합계)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
thead {
background-color: aqua;
}
tbody {
background-color: orange;
}
tfoot {
background-color: yellow;
}
tbody th, tfoot th{
background-color: orangered;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="5">하수정 컬렉션</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="5">제품리스트</th>
<th>코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능개수</th>
</tr>
<tr>
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">총합</th>
<td>1,420,000원</td>
<td>8468</td>
</tr>
</tfoot>
</table>
</body>
</html>
안녕하세요!