[HTML] Table 태그

Table 태그

• 표를 만드는 태그이다.
• 홈페이지의 전체구성을 만드는 데도 사용할 수 있다.
• 자동으로 닫는 태그 : x
• 각각 셀로 만드는 데 header cell 과 standard cell 로 구분한다.
• th / tr / td
  • <th>내용</th> : table header 의 약자로, 표의 제목을 쓰는 역할이다.
    • 기본값은 굵은 글씨체와 중앙 정렬이다.
  • <tr>내용</tr> : table row 의 약자로, 표의 가로줄을 만드는 역할이다.
    • 기본값은 보통 글씨체와 왼쪽 정렬이다.
  • <td>내용</td> : table data 의 약자로, 표의 셀을 만드는 역할이다.
    • 기본값은 보통 글씨체와 왼쪽 정렬이다.
• 예시

  <!-- 3x3의 테이블 만들기 -->
  <table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
  </table>

• 행 병합(rowspan)과 셀 병합(colspan)
  • 행 병합(rowspan) : td태그의 속성 값으로 사용할 수 있으며, 사용시에는 병합하고자 하는 행의 수를 기입한다.
  • 셀 병합(colspan) : td태그의 속성 값으로 사용할 수 있으며, 사용시에는 병합하고자 하는 셀의 수를 기입한다.
  • 예시

    <!-- 1-1 과 2-1 병합 및 3-2 와 3-3 병합 -->
    <table>
       <tr>
           <td rowspan="2">1</td>
           <td>2</td>
           <td>3</td>
       </tr>
       <tr>
           <!-- <td>4</td> -->
           <td>5</td>
           <td>6</td>
       </tr>
       <tr>
           <td>7</td>
           <td colspan="2">8</td>
           <!--<td>9</td>-->
       </tr>
    </table>