HTML - HTML 태그 (목록, 표)

ol (ordered list : 항목을 순서 붙여서 나열)

속성

 

• start : 시작 번호 지정
• type : 순서를 붙이는 유형 (숫자, 영어, 로마숫자 -> 1, a, A, i, I 등이 있다.)

※ li (list : 각 항목을 의미함)

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

<ol type=i>
  <li>항목1</li>
  <li>항목2</li>
</ol>

 

ul (unorderd list : 항목을 순서없이 나열)

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

 

dl (description list : 딕셔너리(이름 : 값) 형태로 된 리스트)

• dt (description-term : 딕셔너리의 이름)
• dd (description-description : 딕셔너리의 값
  하나의 dt에 여러 dd가 들어갈 수 있다.

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

 

 

표

---

<table>
  <caption>표 이름</caption>
  <tr>
    <td>1열</td>
    <td>2열</td>
  </tr>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
  </tr>
</dl>

 

• table : 표의 시작/끝을 알리는 태그
• caption : 표 제목 (table 바로 아래 작성)
• tr (table row) : 행 1개 생성
• td (table data) : tr 안에 들어갈 내용 (1,2,3행.. 순서대로 들어감)
  속성
  rowspan="합칠 개수" : 행 병합
  colspan="합칠 개수" : 열 병합
• th (table head) : 제목 행 추가
• col : 열 1개 지정 (caption 태그 바로 아래 사용)
  특정 열에 배경색 넣거나 너비 변경하는 목적으로 열 지정하기 위해 사용
  열 개수 만큼 col 태그를 넣어야 한다.
• colgroup : col 태그 2개 이상 묶어 사용 (caption 태그 바로 아래 사용)
  

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

  
  
  

표의 구조 지정

---

html 문서와 유사하게 head, body, foot로 나뉘며 앞에 table의 t를 붙인다.

스타일 지정이나 JS로 조작하기 위해 구조 나눠 사용한다.

<table>
  <caption>표 이름</caption>
  <colgroup>
    <col>
    <col style="background-color:#eee;">
  </colgroup>
  <thead>
  <tr>
    <td>1열</td>
    <td>2열</td>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
  </tr>
  </tfoot>
</dl>

• thead : 제목 부분
• tbody : 본문 부분
• tfoot : 요약 부분