HTML #3 나열을 의미하는 태그, 테이블

1. Ordered List

<ol> ... </ol>

집어넣은 순서대로 번호가 붙여짐.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

50번부터 시작하게 설정가능

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

2. Unordered List

<ul> ... </ul>

정렬되지 않고 리스트 생성

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

3. 테이블

엑셀의 표 형식으로 테이블을 만듬

<table><tr><th>...</th> or <td> ... </td></tr></table>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

table로 표를 생성하고

tr은 테이블의 행을 의미한다

th로 테이블의 헤더(컬럼)을 의미한다.

td는 셀을 선택하고 td안의 값으로 표를 채워넣는다.

 

분석을해보면 tr로 한 개의 행을 생성하고 th로 헤더성격의 데이터를 채워넣는다.

tr로 한 개의 행을 더 생성하고 td로 일반적인 데이터를 채워넣는다.

 

 

데이터를 채워넣기 전에 헤더, 바디, 끝을 구분하기 위해서 영역을 설정할 수도 있다.

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

1번째 행은 테이블의 속성을 나타내는 컬럼부분이고

2~3번째 행은 데이터 값들이다.

마지막 4번째 행은 합계를 표시하는 용도로 사용하였다.

 

굳이 영역을 구분해두는 이유는 영역을 활용하여 CSS를 적용시킬 수 있기 때문이다.