목록과 표

여러 항목을 늘어놓는 두 가지

항목이 여럿일 때는 문단을 반복하지 않고 목록이나 표를 사용합니다. 둘을 가르는 기준은 항목마다 값이 여럿인가입니다.

• 목록 — 항목 하나가 한 덩어리입니다. 차례가 있으면 번호 목록입니다.
• 표 — 항목마다 값이 여럿이고, 같은 자리끼리 견줄 수 있습니다.

목록

차례가 없으면 ul, 있으면 ol 입니다. 항목은 둘 다 li 입니다.

<h2>준비물</h2>
<ul>
  <li>신분증</li>
  <li>도장</li>
</ul>

<h2>신청 차례</h2>
<ol>
  <li>서류를 작성합니다.</li>
  <li>창구에 제출합니다.</li>
  <li>접수증을 받습니다.</li>
</ol>

점과 번호는 브라우저가 붙입니다. 모양을 바꾸려면 CSS 의 list-style 을 사용합니다.

목록 안의 목록

li 안에 목록을 다시 넣으면 단계가 생깁니다. 이때 안쪽 목록은 li 안에 넣어야 합니다. li 와 li 사이에 두면 짜임이 어긋납니다.

<ul>
  <li>문서
    <ul>
      <li>신청서</li>
      <li>동의서</li>
    </ul>
  </li>
  <li>도장</li>
</ul>

표

표는 table 안에 줄(tr)을 두고, 줄 안에 칸을 둡니다. 머리 칸은 th, 보통 칸은 td 입니다.

<table>
  <caption>부서별 담당자</caption>
  <tr>
    <th>부서</th>
    <th>담당</th>
  </tr>
  <tr>
    <td>영업부</td>
    <td>홍길동</td>
  </tr>
  <tr>
    <td>개발부</td>
    <td>김철수</td>
  </tr>
</table>

caption 은 표의 이름입니다. th 는 굵게 가운데 정렬로 나오는데, 그보다 중요한 것은 이 칸이 머리라는 뜻을 담는다는 점입니다. 화면 읽기 프로그램이 그것을 읽어 "부서: 영업부" 처럼 알려 줍니다.

칸 합치기

colspan 은 가로로, rowspan 은 세로로 칸을 합칩니다. 합친 만큼 그 줄의 칸 수가 줄어듭니다.

<table border="1">
  <tr>
    <th colspan="2">상반기</th>
  </tr>
  <tr>
    <td>1분기</td>
    <td>2분기</td>
  </tr>
</table>

border 속성은 선을 그리지만 지금은 사용하지 않습니다. 여기서는 칸이 합쳐진 것을 눈으로 보려고 넣었습니다. 선과 여백은 2.7 에서 CSS 로 정합니다.

세 가지

• 표로 화면을 배치합니다. 예전에는 그렇게 했지만 지금은 하지 않습니다. 표는 자료를 담는 자리이고, 배치는 3부에서 다룹니다. 표로 배치하면 좁은 화면에서 줄바꿈을 다룰 수 없고, 화면 읽기 프로그램이 자료로 읽어 버립니다.
• 모든 칸을 td 로 적습니다. 머리 칸은 th 입니다. 굵게 보이는 것보다 뜻을 담는 것이 중요합니다.
• 줄마다 칸 수가 다릅니다. 합친 칸을 셈에 넣지 않아 생깁니다. 표가 어긋나 보이면 각 줄의 칸 수부터 세어 보십시오.

직접 해보기

정리

• 차례가 없으면 ul, 있으면 ol 입니다. 항목은 li 입니다.
• 목록 안에 목록을 넣을 때는 li 안에 넣습니다.
• 표는 table · tr · th · td 로 이루어집니다.
• 표는 자료를 담는 자리입니다. 화면 배치에 사용하지 않습니다.