6.1 table 및 tr 요소
HTML에서의 테이블은 데이터를 표 형식으로 정리하는 데 사용돼. 테이블을 만들 때 주로 사용하는 태그에는 <table>, <tr>, 그리고 <td>가 있어. 각각을 자세히 살펴보자.
<table>
<table> 태그는 전체 테이블의 컨테이너야. 이 안에 테이블의 행이 들어가고, 각 행은 <tr> 태그로 정의돼.
사용 예시:
<table>
<!-- 테이블의 행과 셀이 여기에 추가될 거야 -->
</table>
<tr> 태그 (table row)
<tr> 태그는 테이블의 행을 나타내. <tr> 태그 안에 테이블의 셀이 위치하고, 각 셀은 <td> 또는 <th> 태그로 정의돼.
사용 예시:
<table>
<tr>
<!-- 행의 셀이 여기에 추가될 거야 -->
</tr>
</table>
6.2 td 및 th 요소
<td> 태그 (table data)
<td> 태그는 테이블 행에서 데이터 셀을 정의하는 데 사용돼. 이 셀들은 테이블 데이터를 포함하고 있으며,
사용 예시:
<table>
<tr>
<td>셀 1</td>
<td>셀 2</td>
<td>셀 3</td>
</tr>
</table>
<th> 태그 (table head)
<th> 태그는 테이블 헤더 셀을 나타내는 데 사용돼. <th> 안의 텍스트는 일반적으로 굵게 표시되고 가운데 정렬 돼.
사용 예시:
<table>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
</tr>
</table>
테이블 예시:
<table>
<tr>
<th>이름</th> <th>나이</th> <th>도시</th>
</tr>
<tr>
<td>이반</td> <td>30</td> <td>토론토</td>
</tr>
<tr>
<td>마리아</td> <td>25</td> <td>프랑크푸르트</td>
</tr>
<tr>
<td>니나</td> <td>35</td> <td>파리</td>
</tr>
</table>
6.3 테이블 스타일링
테이블은 CSS를 사용해서 반드시 스타일링해야 해 — 이게 데이터를 훨씬 더 보기 쉽게 만들어주거든.
예를 들어, 각 셀에 테두리를 추가하려고 했다면: 칭찬할 만하지만, 왜냐하면 모든 셀에 테두리가 있으니 이제 각 셀 사이에 두 개의 테두리가 생기는 셈이지 — 각 셀의 테두리가 하나씩. 🤦♂️
테두리를 깔끔하게 정리하고 싶다면, CSS를 사용해 인접한 테두리를 합쳐야 해. 이를 위한 특별한 속성이 있어 — border-collapse.
우리의 테이블을 잘 스타일링한 예시가 여기 있어:
table {
width: 50%; /* 테이블의 너비를 설정 */
border-collapse: collapse; /* 셀 사이의 이중 경계를 제거 */
}
th, td {
border: 1px solid black; /* 셀에 경계선을 설정 */
padding: 8px; /* 셀 안에 여백을 추가 */
text-align: left; /* 텍스트를 왼쪽 정렬 */
}
th {
background-color: #f2f2f2; /* 헤더의 배경색을 설정 */
}
여기서 볼 수 있는 건:
- 각 셀에 검은색 1픽셀 두께의 경계가 있어
- 셀 사이의 이중 경계가 제거됐어
- 각 셀에 내부 여백이 있어서 텍스트가 경계에 닿지 않아
- 헤더 셀에 별도의 배경색이 있어
멋지지!
GO TO FULL VERSION