HTML [table tag]

HTML table tag

table tag

• HTML 내 table을 작성하는 태그

• <table> </table>

  • 아래 속성을 사용한다.
  • border="n" : 테이블의 테두리 종류
  • bordercolor="color" : 테이블 테두리 색상

• 아래의 태그들로 구성된다.

  • 항목

    • <td> </td>
    • 태그 안의 내용을 항목을 사용.
    • 아래의 속성들도 사용된다.
      • 수직 병합
        • <td rowspan="n"> </td>
        • n 만큼의 행이 병합된다.
      • 수평 병합
        • <td colspan="n"> </td>
        • n 만큼의 열이 병합된다.
      • 정렬
        • align="place"
      • 배경색
        • bgcolor="color"

  • 헤드항목

    • <th> </th>
    • 태그 안의 내용을 헤드 항목으로 사용하며, 진한 글씨로 표기된다.

  • 행 (table row)

    • <tr> </tr>
    • 태그 안의 항목들이 하나의 행임을 나타낸다.

  • 테이블 헤드

    • <thead> </thead>
    • 태그 안의 내용이 테이블 최상단에 표시된다.

  • 테이블 바디

    • <tbody> </tbody>
    • 태그 안의 내용이 테이블 중간에 표시된다.

  • 테이블 픗

    • <tfoot> </tfoot>
    • 태그 안의 내용이 테이블 최하단에 표시된다.

• 예시

    <table border="2" bordercolor="blue">
      <thead>
        <tr>
          <th colspan="2" width="150">번호</th>
          <th width="150">이름</th>
          <th width="150">가격</th>
          <th width="150">구매 가능 여부</th>
          <th width="200">비고</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2" align="center">1</td>
          <td>젤다의 전설</td>
          <td>74,800</td>
          <td align="center">O</td>
          <td>보유 중</td>
        </tr>
        <tr>
          <td colspan="2" align="center">2</td>
          <td>동물의 숲</td>
          <td rowspan="2">64,800</td>
          <td align="center" bgcolor="yellow">X</td>
          <td>4월부터 구매 가능</td>
        </tr>
        <tr>
          <td align="center">3-1</td>
          <td align="center">3-2</td>
          <td>포켓몬 소드&실드</td>
          <td align="center">O</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2" align="center">4</td>
          <td>마인크래프트</td>
          <td>37,900</td>
          <td align="center" bgcolor="yellow">X</td>
          <td>품절</td>
        </tr>
        <tr>
          <td colspan="2" align="center">5</td>
          <td>마리오 오딧세이</td>
          <td>64,800</td>
          <td align="center">O</td>
          <td>보유 중</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6" align="center">동물의 숲 하고 싶다</td>
        </tr>
      </tfoot>
    </table>