💿 Table

💾 리스트와 테이블의 차이

리스트는 여러 요소들을 나열한 목록이라면,
테이블은 여러 종류의 데이터의 집합이라 할 수 있다.
예를 들면, 장보러 가서 살 물건이나 오늘 할 일은 리스트로 작성될 것이고
이름 직업 나이 등이 들어가는 인명부는 테이블로 작성해서 관리해야 할 것이다.

💾 HTML에서의 Table

테이블은 항상 table 태그로 감싸져 있다!

테이블과 관련된 태그 : table,thead,tbody,tr,th,td 등

  <table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>

한 행을 시작할 때는 tr(table row) 태그로 시작한다.
각각의 셀은 tr 태그 내에서 td(table data) 태그를 사용한다.

<table>
  <tr>
    <th>Dog</th>
    <th>Cat</th>
  </tr>
  <tr>
    <td>Canine</td>
    <td>Feline</td>
  </tr>
  <tr>
    <td>Bark</td>
    <td>Meow</td>
  </tr>
  <tr>
    <td>Puppy</td>
    <td>Kitten</td>
  </tr>
</table>

<table>
  <tr>
    <th></th>
    <th>Dog</th>
    <th>Cat</th>
  </tr>
  <tr>
    <th>종</th>   
    <td>Canine</td>
    <td>Feline</td>
  </tr>
  <tr>
    <th>짖는소리</th>
    <td>Bark</td>
    <td>Meow</td>
  </tr>
  <tr>
    <th>Immature</th>
    <td>Puppy</td>
    <td>Kitten</td>
  </tr>
</table>

th(Table Heading) 태그를 통해 각 행과 열의 제목을 나타낼 수도 있다.

    <table class="borderTable">
      <tr>
        <th></th>
        <th>내용</th>
        <th>장소</th>
      </tr>
      <tr>
        <th>1시</th>
        <td>HTML이란</td>
        <td>101호</td>
      </tr>
       <tr>
        <th>2시</th>
        <td rowspan="2">HTML실습</td>
        <td>102호</td>
      </tr>
       <tr>
        <th>3시</th>
        <td>103호</td>
      </tr>
      <tr>
        <th>4시</th>
        <td>CSS란</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>5시</th>
        <td>CSS실습</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>6시</th>
        <td colspan="2">수업 없습니다.</td>
      </tr>
    </table>

td 태그 또는 tr 태그에 colspan, rowspan 속성을 추가해 병합을 구현할 수 있다.