HTML 표는 데이터를 행과 열 형태로 정렬하여 표현하는 요소입니다. 데이터베이스의 내용을 웹 페이지에 시각적으로 나타내거나, 목록이나 스케줄 등을 정리할 때 유용하게 사용됩니다.
<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>
</table>
표에 선을 추가하여 가독성을 높이고 디자인을 다양하게 할 수 있습니다. 선 속성은 주로 border 속성을 사용하여 설정합니다.
<table>
<style>
table {
border-collapse: collapse; /* 테두리 합치기 */
}
td, th {
border: 1px solid black;
padding: 15px;
}
</style>
<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>
</table>
위 예시에서는 border-collapse: collapse 속성을 사용하여 테두리가 서로 합쳐져 깔끔한 모양을 만들었습니다. td와 th 태그에 border: 1px solid black;을 적용하여 각 셀에 검은색 테두리를 추가했습니다.
HTML 표는 데이터를 효과적으로 표현하는 데 유용한 도구입니다. 다양한 속성을 활용하여 표의 모양과 기능을 커스터마이징할 수 있습니다. 하지만 표의 남용은 웹 페이지의 가독성을 저하시킬 수 있으므로, 적절한 상황에서 사용해야 합니다.
목록 스타일 (List Style) (0) | 2024.11.04 |
---|---|
HTML에서 border 속성 (0) | 2024.11.04 |
display: inline-block (0) | 2024.11.04 |
블록 레벨과 인라인 레벨: HTML 요소의 기본 이해 (1) | 2024.11.04 |
블록 레벨 요소와 인라인 레벨 요소 테그 정리 (0) | 2024.11.04 |