HTML - 14. Table

1. 첫 번째 테이블

목록을 표현했을 때 항상 <ul> or <ol>과 <li>의 조합이 필요했듯이, 테이블을 표현하기 위해 여러 태그들의 조합이 필요하다.

조합들은 <table>, <thead>, <tbody>, <tr>, <th>, <td> 등이 있다.

테이블은 항상 <table> 태그로 감싸 져 있다. <table> 태그 내에 행도 만들고, 열도 만들게 되는 것이다.

한 행을 시작할 때는 <tr>로 시작한다. tr은 table row의 줄임말이다. 각각의 셀은 <tr> 태그 내에 <tb> 태그를 사용한다. tb는 table data의 줄임말이다.

  <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>

위 코드의 결과 사진이다. 대신에 선은 css에서 추가해 준 것이다. 

 

---

2. 두 번째 테이블

두 번째 테이블에서는 테이블 열의 제목을 다뤄보겠다.

<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>

이번에는 <td>대신 <th> 태그를 사용했다. table heading의 줄임말이다. th태그를 사용했더니 가운데 정렬이 되고, 글씨 두께가 두꺼워졌다.

물론 td태그를 그대로 사용하고, css로 같은 효과를 낼 수도 있다.

<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>

위의 코드는 열에 제목을 추가한 것이다. 행에 제목을 추가할 수도 있다.

 

---

3. 테이블 선 추가하기

.border-table th, .border-table td {
  border: 1px solid black; 
}

 

---

4. 세 번째 테이블

세 번째 테이블은 가로 셀끼리도, 세로 셀끼리도 병합이 되어있다. 이러한 병합은 <td>나 <th>태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 있다.

    <table class="border-table">
      <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>

rowspan은 행 병합, colspan은 열을 병합한다.