표 분석해보기
- 전체 테두리 2px 설정
- 각 테두리는 1px 설정
- 1행 thead 태그, 2행 ~ 6행 tbody태그, 7행 tfoot태그
- 굵은 글씨는 th태그, 나머지 td태그 배경색 설정
표 만들기
table 태그 만들고 border 넣어줘서 선 보이게
thead, tbody, tfoot 태그 만들기
안에 tr 태그로 행 나누고 굵은 글씨 th 일반 글씨 td
열 병합, 행 병합, 높이 설정
<body>
<table border="1">
<thead>
<tr> <!-- 1행 -->
<th colspan="5" height="30">하수정 컬렉션</th>
</tr>
</thead>
<tbody>
<tr> <!-- 2행 -->
<th rowspan="5">제품리스트</th>
<th height="30">코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능개수</th>
</tr>
<tr> <!-- 3행 -->
<td height="30">01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr> <!-- 4행 -->
<td height="30">01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr> <!-- 5행 -->
<td height="30">01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr> <!-- 6행 -->
<td height="30">01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
</tbody>
<tfoot>
<tr> <!-- 7행 -->
<th colspan="3" height="30">총합</th>
<td>1,420,000원</td>
<td>8468</td>
</tr>
</tfoot>
</table>
</body>
head 태그 안에 style 태그 넣어서 굵은 테두리, 배경색 설정하기
<head>
<style>
table {
border: 2px solid black;
}
thead {
background-color: aqua;
}
tbody th, tfoot th {
background-color: red;
}
tbody td {
background-color: orange;
}
tfoot td {
background-color: yellow;
}
</style>
</head>
표를 만들면서 있었던 문제
- title 속성 style 태그에서 table border 속성을 넣었는데 가장 바깥쪽 테두리만 생기는 문제 발생, style 태그에서 설정했을 때 table 바깥에 선 생기는 걸 보고 모든 th와 td 태그에 border 속성을 넣음
해결방법
- style 속성이 너무 길어지는 관계로 body 태그 안에 있던 table 태그에 border="1"을 넣어서 모든 테두리에 선 만들어 해결
느낀점
어디서 어떻게 속성을 주느냐에 따라 결과가 달라진다는 것을 잘 인지하고 실수를 줄여야겠다.
