본문 바로가기
Frontend/HTML

6. 표 태그

by 예린lynn 2024. 7. 3.
728x90

 

<table>

  • 표를 정의하는 가장 바깥쪽 태그

<caption>

  • 표의 제목 설정
  • 표의 위쪽 중앙에 제목 표시

행, 셀

  • <tr> : 표의 행(row)
  • <td>: 표의 데이터 셀(data cell)을 정의. <tr> 태그 안에 위치
  • <th>: 제목 행의 셀. <tr> 안에 위치하며, 주로 표의 첫 번째 행에 사용

  • <col>: 테이블의 열 1개 정의
  • <colgroup>: 열들을 그룹화하여 스타일 적용
  • <col>, <colgroup> 태그는 반드시 <caption> 태그 다음에 사용

 

머리글과 본문

  • <thead>: 표의 머리글
  • <tbody>: 표의 본문
  • <tfoot>: 표의 바닥글. 일반적으로 표의 요약 정보나 총계를 포함하는 행

셀 병합

  • <colspan>: 셀을 가로로 병합
  • <rowspan>: 셀을 세로로 병합
  • <td colspan="합칠 셀의 개수">셀의 내용</td>
  • <td rowspan="합칠 셀의 개수">셀의 내용</td>
<table>
    <thead>
        <tr>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>내용 1</td>
            <td>내용 2</td>
        </tr>
        <tr>
            <td>내용 3</td>
            <td>내용 4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>바닥글 1</td>
            <td>바닥글 2</td>
        </tr>
    </tfoot>
</table>

 

 

728x90

'Frontend > HTML' 카테고리의 다른 글

8. image, audio, video 활용  (0) 2024.07.03
7. input 태그  (0) 2024.07.03
5. 목록 태그 (ol, ul, dl)  (0) 2024.07.03
4. <div>, <span>  (0) 2024.07.03
3. Style 속성  (0) 2024.07.02