[HTML] 표(table)

HTML 표: 데이터를 명확하게 제시하다!

안녕하세요, HTML 여행자 여러분! 🚀 웹 페이지에서 데이터나 정보를 깔끔하게 정렬하여 표현하려면 어떻게 해야 할까요? 네, 바로 '표'를 사용하면 되는데요. 오늘은 HTML에서 데이터를 표 형식으로 제시하는 방법을 알아보겠습니다.

 

1. 표란 무엇인가?

표는 행(row)과 열(column)로 구성된 격자 형태의 데이터 구조입니다. 표를 사용하면 복잡한 데이터도 체계적이고 가독성 좋게 표현할 수 있습니다.

 

2. HTML 표의 구조

HTML에서 표를 생성하는 것은 간단합니다. 주요 태그들을 알면 누구나 쉽게 표를 만들 수 있어요.

표 시작: <table>

• 기본 구조: 모든 표는 <table> 태그로 시작하며 종료합니다.

<table>
  <!-- 표 내용 -->
</table>

표의 헤더: <thead>, <tr>, <th>

• 기본 구조: 표의 제목 행을 나타냅니다. <thead> 안에 <tr>(테이블 로우)를 추가하고, 그 안에 <th>(테이블 헤더)를 넣어 헤더 정보를 제공합니다.

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
    </thead>
</table>

이름	나이	직업

표의 본문: <tbody>, <tr>, <td>

• 기본 구조: 실제 데이터를 포함하는 영역입니다. <tbody> 내부에 여러 개의 <tr>를 추가하고, 각 <tr> 안에 <td>(테이블 데이터)를 넣어 데이터를 표시합니다.

<table>
    <tbody>
        <tr>
            <td>앨리스</td>
            <td>28</td>
            <td>개발자</td>
        </tr>
        <tr>
            <td>밥</td>
            <td>32</td>
            <td>디자이너</td>
        </tr>
    </tbody>
</table>

앨리스	28	개발자
밥	32	디자이너

 

3. 보충: 병합, 경계선, 스타일링

표는 병합, 경계선 추가, CSS 스타일링 등으로 보다 직관적이고 깔끔하게 만들 수 있습니다. 이에 관한 내용은 CSS 강의나 관련 튜토리얼에서 자세히 다루겠습니다!

 

4. 요약: 주요 태그 정리

• <table>: 표의 시작과 종료
• <thead>: 표의 헤더 영역
• <tbody>: 표의 본문 영역
• <tr>: 표의 행
• <th>: 표의 헤더 셀
• <td>: 표의 데이터 셀

 

마치며

HTML의 표 태그를 이용하면 복잡한 정보도 체계적으로, 깔끔하게 표현할 수 있습니다. 데이터를 표로 제시하면 사용자가 웹 페이지의 내용을 더욱 쉽게 이해할 수 있게 됩니다. 다음 포스트에서는 다른 중요한 HTML 요소들을 함께 알아보겠습니다. 계속해서 함께 해주세요! 🎈🌟