HTML5 - 테이블(Table) 목록 표현 방법

2025. 3. 18. 21:07

TML에서 목록을 표현하는 방법은 크게 세 가지가 있습니다: Unordered Lists(순서 없는 목록), Ordered Lists(순서 있는 목록), Description Lists(설명 목록). 이 세 가지 목록을 테이블 안에 넣고, 각 목록의 속성까지 적용한 예제를 확인해봅시다.

테이블 목록 표현 방법

테이블 목록 표현 방법

1. Unordered Lists (순서 없는 목록)

2. Ordered Lists (순서 있는 목록)

3. Description Lists (설명 목록)

4. 전체코드

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

Unordered Lists (순서 없는 목록)

<ul> 태그는 순서 없는 목록을 만들 때 사용됩니다. 각 항목은 <li> 태그로 정의합니다. type 속성을 사용해 불릿 스타일을 변경할 수 있습니다.

속성

type: 불릿 스타일을 지정 (disc, circle, square)

<table border="1">
  <tr>
    <th>Unordered List</th>
  </tr>
  <tr>
    <td>
      <ul type="square">
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
      </ul>
    </td>
  </tr>
</table>

설명

type="square"를 사용해 불릿 스타일을 사각형으로 지정했습니다.

Ordered Lists (순서 있는 목록)

<ol> 태그는 순서 있는 목록을 만들 때 사용됩니다. 각 항목은 <li> 태그로 정의합니다. type과 start 속성을 사용해 번호 스타일과 시작 번호를 변경할 수 있습니다.

속성

type: 번호 스타일을 지정 (1, A, a, I, i)
start: 시작 번호를 지정

<table border="1">
  <tr>
    <th>Ordered List</th>
  </tr>
  <tr>
    <td>
      <ol type="A" start="3">
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
      </ol>
    </td>
  </tr>
</table>

설명

type="A"를 사용해 알파벳 대문자로 번호를 매겼습니다.
start="3"을 사용해 시작 번호를 C로 지정했습니다.

Description Lists (설명 목록)

<dl> 태그는 설명 목록을 만들 때 사용됩니다. 각 항목은 <dt>(용어)와 <dd>(설명)로 정의합니다.

<table border="1">
  <tr>
    <th>Description List</th>
  </tr>
  <tr>
    <td>
      <dl>
        <dt>HTML</dt>
        <dd>웹 페이지의 구조를 정의하는 마크업 언어입니다.</dd>
        <dt>CSS</dt>
        <dd>웹 페이지의 스타일을 정의하는 스타일 시트 언어입니다.</dd>
        <dt>JavaScript</dt>
        <dd>웹 페이지의 동적 기능을 구현하는 프로그래밍 언어입니다.</dd>
      </dl>
    </td>
  </tr>
</table>

설명

<dt>는 용어를, <dd>는 해당 용어의 설명을 나타냅니다.

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML Lists in Table</title>
</head>
<body>
  <h1>HTML Lists in Table</h1>

  <!-- Unordered List -->
  <table border="1">
    <tr>
      <th>Unordered List</th>
    </tr>
    <tr>
      <td>
        <ul type="square">
          <li>첫 번째 항목</li>
          <li>두 번째 항목</li>
          <li>세 번째 항목</li>
        </ul>
      </td>
    </tr>
  </table>

  <br>

  <!-- Ordered List -->
  <table border="1">
    <tr>
      <th>Ordered List</th>
    </tr>
    <tr>
      <td>
        <ol type="A" start="3">
          <li>첫 번째 항목</li>
          <li>두 번째 항목</li>
          <li>세 번째 항목</li>
        </ol>
      </td>
    </tr>
  </table>

  <br>

  <!-- Description List -->
  <table border="1">
    <tr>
      <th>Description List</th>
    </tr>
    <tr>
      <td>
        <dl>
          <dt>HTML</dt>
          <dd>웹 페이지의 구조를 정의하는 마크업 언어입니다.</dd>
          <dt>CSS</dt>
          <dd>웹 페이지의 스타일을 정의하는 스타일 시트 언어입니다.</dd>
          <dt>JavaScript</dt>
          <dd>웹 페이지의 동적 기능을 구현하는 프로그래밍 언어입니다.</dd>
        </dl>
      </td>
    </tr>
  </table>
</body>
</html>

저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

CSS - Class 선택자 사용 (0)	2025.03.18
CSS - Type 선택자 사용 (0)	2025.03.18
JS - 바닐라js로 DOM 요소 복사하기 (0)	2025.03.17
JS - 바닐라js로 eq() 선택자 사용 방법 (0)	2025.03.17
JS - 바닐라js로 hover 기능 구현 (0)	2025.03.16

열공의 기록