HTML/이론

04_HTML 목록 및 표

Chae A 2024. 10. 2. 11:51

• 순서를 만드는 <ol>, <li>태그

- 순서 목록(ordered list)이란 말 그대로 각 항목을 순서대로 나열한 것입니다.

- 순서 목록은<ol>과 <li>태그를 사용하여 만듭니다. ol은 ordered list의 줄임말이고, li는 list의 줄임말입니다.

- <ol>과 </ol>태그를 두고, 그 사이에<li>와 </li>태그를 삽입합니다.

기본형

<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

 

• 순서 없는 목록을 만드는 <ul>, <li>태그

- 순서 없는 목록(unordered list)은 항목의 순서가 중요하지 않을 때 사용합니다.

- 순서 없는 목록은<ul>과 <li>태그를 사용하여 만듭니다. ul은  unordered list 의 줄임말이고, li는 list의 줄임말입니다. 

- <ul>과 </ul>태그를 두고, 그 사이에<li>와 </li>태그를 삽입합니다.

- 순서 없는 목록은 항목 앞에 작은 원이나 사각형을 붙여서 구분하는데, 이런 작은 그림을 불릿(bullet)이라고 합니다.

기본형

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

 

• 설명목록을 만드는 <dl>, <dt>, <dd>태그

- 설명 목록(description list)이란 이름(name)과 값(value) 형태로 구성된 목록을 말합니다.

- 설명 목록은 이름(단어명)부분을 지정하는 <dt>태그와 값(설명) 부분을 지정하는<dd>태그로 구성됩니다.

- <dl>과 </dl>태그 사이에는 <dt>태그와 <dd>태그 한 쌍을 넣습니다.

- <dt>태그 하나에 <dd>태그 여러 개 사용할 수도 있습니다.

기본형

<dl>
  <dt>이름</dt>
  <dd>값</dd>
</dl>

 

표의 구성요소

- 표(table)는 행(row)과 열(column) 그리고 셀(cell)로 이루어집니다.

- 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미합니다.

Tip 영어로 행은 row, 열은 column이란 것을 기억

 

• 표를 만드는 <table>, <caption>태그

- 표의 시작과 끝을 알려주는 <table>과 </table>태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣습니다.

- 표에 제목을 붙이고 싶다면 <table>태그 바로 아랫줄에 <caption>태그를 사용합니다.

- <caption>태그를 사용하면 제목은 표 위쪽 중앙에 표시되지만 생략할 수 있습니다.

기본형

<table>
  <caption>표 제목</caption>
</table>

 

 

• 행을 만드는 <tr>태그와 셀을 만드는 <td>, <th>태그

- <table>태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 지정해야 합니다.

- <tr>태그는 행을 만들고 <td>태그는 행 안에 있는 셀을 만들기 때문에 <table>태그 안에 <tr>,<td>태그가 모두 도여야 하나의 셀을 만들 수 있습니다.

- 표의 제목 행에 셀을 만들 때는 <td>태그 대신 <th>태그를 사용합니다.

- <th>태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열되므로 다른 내용에 비해 눈에 띕니다.

기본형

<table>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
  </tr>
   <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>
Tip  <tr>태그는 행을 지정하고 <td> 태그 는 셀을 지정합니다.

 

• 표의 구조를 지정하는 <thead>, <tbody>, <tfoot>태그

- 일부 표에서는 제목이나 자료가 표시된 셀 이외에 맨 아래쪽에 합계나 요약 내용을 표시하기도 합니다.

- 이런 표는 제목과 본문 그리고 요약 부분으로 표의 구조를 나누어 놓는 것이 좋습니다. 이때 <thead>와 <tbody>, <tfoot>태그를 사용합니다.

- 태그 이름른 표를 뜻하는 table의 't'와 제목(head), 본문(body), 요약(foot)을 각 합친 말입니다.

- 특히 이 방법은 내용이 긴 표를 여러장 인쇄할 때도 각 장마다 표의 제목과 요약 부분이 자동으로 인쇄되므로 편리합니다.

 

Tip 표의 구조는 웹 브라우저 화면에서 보이지 않지만, 화면 낭독기나 자바스크립트 등에서 읽을 수 있습니다.

 

• 행이나 열을 합치는 rowspan, colspan 속성 

- 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td>태그나 <th>태그에서 이루어집니다.

- 행을 합칠려면 rowspan 속성을 사용하고, 열을 합칠려면 colspan 속성을 활용하면 됩니다.

기본형

<td rowspan="합칠 셀의 개수">내용</td>
<td colspan="합칠 셀의 개수">내용</td>
Tip 셀을 합칠 경우에는 먼저 종이에 펜으로 직접 표를 그려보고 어느 부분을 어떻게 합칠 것인지 미리 확인하면 실수를 줄일 수 있습니다.

 

 

• 열을 묶어 주는 <col>, <colgroup>태그

- 표에서 특정 열에 배경색을 넣거나 너비를 바꾸려면 원하는 열을 선택할 수 있어야합니다. 그럴때 사용하는 태그가 <col>태그와 <colgroup>태그 입니다.

- <col>태그는 열을 1개만 지정할 때 사용하고, <colgroup>태그는 <col>태그를 2개 이상 묶어서 사용합니다.

- <col>, <colgroup>태그는 반드시 <caption>태그 다음에 사용해야합니다. 즉, 표의 내용이 시작되기 전 열의 상태를 알려주는 것입니다.

- <col>태그를 사용할 때는 <colgroup>태그 안에 <col>태그를 포함해 표 전체 열의 개수만큼 <col>태그를 넣어야합니다.

- 스타일 속성을 지정하지 않은 열이 있을 경우에는 각각 <col>태그를 작성해야 합니다.

Tip <colgroup>태그에는 닫는 태그 </colgroup>이 있지만 <col>태그에는 닫는 태그가 없습니다.

기본형

<colgroup>
  <col>
  <col>
  ....
</colgroup>