[HTML] HTML에서 목록과 표 다루기

HTML에서 목록과 표 다루기

목록 태그

목록은 웹 페이지에서 정보를 체계적으로 표현하는 데 사용되며, 주로 <ul>과 <ol> 태그를 사용합니다.

순서 없는 목록 (<ul>)

<ul> 태그를 사용하여 순서가 필요하지 않은 목록을 만듭니다. 각 항목은 <li> 태그로 표현됩니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ul>

순서 있는 목록 (<ol>)

<ol> 태그를 사용하여 순서가 있는 목록을 만듭니다. 이 역시 <li> 태그를 사용하여 항목을 표시합니다.

<ol>
  <li>첫 번째 단계</li>
  <li>두 번째 단계</li>
  <li>세 번째 단계</li>
</ol>

중첩 목록

<ul> 또는 <ol> 태그 안에 다른 <ul> 또는 <ol> 태그를 넣어 중첩 목록을 만들 수 있습니다.

<ul>
  <li>과일
    <ul>
      <li>사과</li>
      <li>바나나</li>
    </ul>
  </li>
  <li>야채
    <ul>
      <li>당근</li>
      <li>시금치</li>
    </ul>
  </li>
</ul>

표 태그

표는 데이터를 정렬된 형태로 표현할 때 사용되며, <table> 태그로 시작합니다.

기본 표 구조

• <table>: 표의 전체 영역을 정의합니다.
• <tr>: 표의 행을 정의합니다.
• <th>: 표의 헤더 셀을 정의합니다. 텍스트가 굵게 표시됩니다.
• <td>: 표의 데이터 셀을 정의합니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>25</td>
  </tr>
  <tr>
    <td>이순신</td>
    <td>45</td>
  </tr>
</table>

테이블 셀 병합

• rowspan: 여러 행에 걸쳐 셀을 병합합니다.
• colspan: 여러 열에 걸쳐 셀을 병합합니다.

<table>
  <tr>
    <th>항목</th>
    <th colspan="2">값</th>
  </tr>
  <tr>
    <td rowspan="2">A</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td colspan="2">3</td>
  </tr>
</table>

목록과 표는 웹 페이지에서 정보를 체계적으로 표현하는 데 아주 유용한 도구입니다. 이를 통해 사용자에게 명확하고 이해하기 쉬운 정보를 제공할 수 있습니다.