HTML 기본 강의: 테이블과 목록 태그 사용법

이번 글에서는 HTML에서 데이터를 효율적으로 표시하는 방법인
"테이블"과 "목록" 태그에 대해 알아보겠습니다.
이 두 태그는 정보를 정리하고, 시각적으로 잘 표현할 수 있게 도와줍니다.

목차

• 1. <table> 태그란?
• 2. <table> 태그 기본 사용법
• 3. <ul>와 <ol> 태그
• 4. 결론

1. <table> 태그란?

<table> 태그는 "표(table)"를 만들 때 사용됩니다. 데이터를 행(row)과 열(column)로 나누어 "정리된 형태로 표시"할 수 있게 해주는 태그입니다.

<table> 태그 내부에는 "<tr> (행), <td> (데이터 셀), <th> (헤더 셀)" 등의 태그가 포함되어 데이터를 구성합니다.

2. <table> 태그 기본 사용법

<table> 태그의 기본 구조는 다음과 같습니다:

<table>
  <tr>
    <th>헤더 1</th>
    <th>헤더 2</th>
  </tr>
  <tr>
    <td>데이터 1</td>
    <td>데이터 2</td>
  </tr>
  <tr>
    <td>데이터 3</td>
    <td>데이터 4</td>
  </tr>
</table>

위 코드에서 <tr>은 "행(row)"을 나타내며, <th>는 "헤더 셀", <td>는 "데이터 셀"을 나타냅니다. 테이블은 이런 기본적인 구조로 여러 개의 행과 열을 포함할 수 있습니다.

3. <ul>와 <ol> 태그

<ul> 태그는 "순서 없는 목록"을 만들 때 사용됩니다. 각 항목은 <li> (목록 항목) 태그로 구분됩니다.

<ol> 태그는 "순서 있는 목록"을 만들 때 사용되며, 항목들이 순서대로 나열됩니다.

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

위 코드에서는 <ul>로 **순서 없는 목록**을, <ol>로 **순서 있는 목록**을 만들어 항목을 나열할 수 있습니다.

4. 결론

<table> 태그는 데이터를 효율적으로 표시하는데 유용하며, "행과 열로 데이터를 나누어 보기 좋게 정리"할 수 있습니다. 또한, <ul>와 <ol> 태그를 사용하면 "목록 항목을 명확하게 구분"할 수 있습니다. 웹 페이지에서 정보를 정리할 때, 이 두 태그를 잘 활용하면 "가독성"과 "사용자 경험"을 크게 향상시킬 수 있습니다.

이번 글에서는 "테이블과 목록을 다루는 태그"에 대해 배웠습니다. 이를 통해 데이터와 정보를 보다 "체계적으로 정리"하고, "명확하게 표시"할 수 있게 되었습니다.

© 2025 busyforu. All rights reserved.