[HTML] list, table 태그

ul, ol, li

예제 코드

<ul>
  <li>ul1</li>
  <li>ul2</li>
  <li>ul3</li>
</ul>

<ol>
  <li>ol1</li>
  <li>ol2</li>
  <li>ol3</li>
</ol>

실행 결과

• ul1
• ul2
• ul3

1. ol1
2. ol2
3. ol3

• ul (unordered list) :
  style에서 list-style-type을 이용해 ol처럼 사용할 수 있다.
• ol (ordered list) : 글머리 기호가 기본으로 있다.
  <ol type="i"><li>1</li></ol> type 속성을 통해 글머리 기호를 바꿀 수 있다. 1,A,a,I,i가 있다.
• li (list) : 내용을 작성하는 태그이다.
  
  

---

dl, dt, dd

예제 코드

<style>
  dt {border:2px solid pink;}
</style>

<dl>
  <dt>definition list title 1</dt>
  <dd>description 1</dd>
  
  <dt>정의 리스트 title 2</dt>
  <dd>description 2-1</dd>
  <dd>description 2-2</dd>
  
  <dt>인사</dt>
  <dd>안녕하세요.</dd>
  <dd>Hello!</dd>
</dl>

실행 결과

• dl(definition list) : 제목과 설명값 형태로 된 목록이다.
• dt (definition term)(title) : dl 안에 여러 개의 dt(제목)값을 가질 수 있다.
• dd (definition description) : 하나의 dt에 여러 개의 dd(description) 값을 가질 수 있다.

---

table, tr, td, th, caption

예제 코드

<style>
  table, th, td, caption{border:2px solid pink;}
</style>

<table>
  <caption>table caption</caption>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </tr>
  
  <tr>
    <td>4</td>
    <td>5</td>
    <td>셀6</td>
  </tr>
  
  <tr>
    <td>셀7</td>
    <td>table</td>
    <td>테이블</td>
  </tr>
</table>

실행 결과

• tr (table row) : 행 이다.
• th (table header) : 제목 셀에 사용한다. 기본값이 볼드체이다.
• td (table data) : 셀 이다.
• caption : 표 caption이다.

---

thead, tbody, tfoot

예제 코드

<style>
  table, tr, th, td{border: 3px solid pink; border-collapse: collapse;}
</style>
<table>
  <thead>
  <tr><!-- 1행-->
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </tr>
  </thead>
  
  <tbody>
  <tr><!--2행-->
  	<td>사과</td>
  	<td>포도</td>
  	<td>바나나</td>
  </tr>
  </tbody>
  
  <tfoot>
  <tr><!--3행-->
  	<td>청포도</td>
  	<td>딸기</td>
  	<td>키위</td>
  </tr>
  </tfoot>
</table>

실행 결과

• thead : 제목 영역임을 나타낸다. 브라우저에서는 보이지 않지만 화면 낭독기에서 읽어들인다.
• tbody : 본문 영역임을 나타낸다.
• tfoot : 바닥글 영역임을 나타낸다.

---

colspan, rowspan

포도 셀과 바나나 셀을 바나나 셀로
사과 셀과 청포도 셀을 청포도 셀로
딸기 셀과 키위 셀을 키위 셀로 병합한다.

예제 코드

<style>
  table, tr, th, td{
  border: 3px solid pink;
  border-collapse: collapse;
  text-align:center;
  }
</style>

<table>
  <thead>
  <tr><!-- 1행-->
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </tr>
  </thead>
  
  <tbody>
  <tr><!--2행-->
  	<td rowspan="2">청포도</td>
  	<td colspan="2">바나나</td>
  </tr>
    
  <tr><!--3행-->
  	<td colspan="2">키위</td>
  </tr>
  </tbody>
</table>

실행 결과

• rowspan : 행 병합. 합칠 셀의 개수를 <td>내부에 입력한다.
• colspan : 열 병합.
• thead, tbody, tfoot 영역간의 병합은 불가능하다. 영역 내에서만 병합이 가능하다.