HTML table 태그

table 태그 (표 관련 태그) : 블록 요소

table 태그의 기본 구성

<table border="1" width="100%">
    <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>

결과 화면

1	2	3
4	5	6
7	8	9

결과 화면을 보면 우리가 아는 table과 약간 다를 것이다.
HTML에서 table에 border="1" 이라는 속성을 주면 두 줄로 생성이 된다.
이거는 css 편에서 알아보도록 하자.

table 태그의 구성 요소를 쉽게 설명한 이미지

<table></table> 태그

• 의미 및 특징
  • 표를 정의 할 때 사용하는 태그이며, 행 (Row)과 열(Column)의 2차원 정보로 구성
  • 자식 요소로 반드시 tr 태그를 정의해 주어야 하며 table -> tr -> td 순으로 마크업해야 한다.
• 속성
  • border : 테두리 두께
  • cellspacing : 테두리 간격 사이의 너비
  • cellpadding : 셀 내부의 간격
  • align : 테이블의 정렬 속성
  • width 와 height : 테이블의 너비와 높이
  • bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

<tr></tr> 태그

• 의미 및 특징
  • table 태그의 자식 요소로 표에서 행 (Row)을 정의할 때 사용

<td></td> 태그

• 의미 및 특징
  • tr 태그의 자식 요소로 표에서 열 (Column)을 정의할 때 사용
• 속성
  • colspan : 해당 칸이 점유하는 열의 수 지정
  • rowspan : 해당 칸의 점유하는 행의 수 지정

예시 코드

<p>colspan</p>
<table border="1" width="100%">
    <tr>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<p>rowspan</p>
<table border="1" width="100%">
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

결과 화면

colspan

1
2	3	4

rowspan

1	2	3
	4	5

<th></th> 태그

• 의미 및 특징
  • 제목 역할을 하는 셀을 정의할 때 사용
  • td 태그와는 달리 글씨가 굵고 가운데 정렬이 기본 스타일 속성
• 속성
  • colspan : 해당 칸이 점유하는 열의 수 지정
  • rowspan : 해당 칸의 점유하는 행의 수 지정
  • scope : 열 (Column) 제목이나 행 (Row) 제목 셀 th에 정의
    
    • 브라우저에서는 th 요소에 scope 속성을 명시해도 아무런 시각적 효과도 나타나지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용될 수 있다.
    • 열 (Column)의 제목일 경우 <th scope="col">로 정의
    • 행 (Row)의 제목일 경우 <th scope="row">로 정의

예시 코드

<table border="1" width="100%">
    <tr>
        <th scope="col">교과목</th>
        <th scope="col">점수</th>
    </tr>
    <tr>
        <th scope="row">수학</th>
        <td>95</td>
    </tr>
    <tr>
        <th scope="row">영어</th>
        <td>45</td>
    </tr>
</table>

결과 화면

교과목	점수
수학	95
영어	45

<thead></thead>, <tbody></tbody>, <tfoot></tfoot> 태그

• 의미 및 특징
  • HTML table에서 콘텐츠들을 그룹으로 묶을 때 사용
  • thead, tbody, tfoot 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있다.
  • thead와 tfoot는 없는 경우도 있다.
    - table 태그를 사용시 브라우저가 자동으로 tbody는 삽입을 해주는 거 같다.

<colgroup></colgroup> 태그

• 의미 및 특징
  • table의 열을 그룹으로 묶을 때 사용
  • 자식 요소 <col></col> 태그와 함께 사용할 수도 있다.

<caption></caption> 태그

• 의미 및 특징
  • 표의 설명 또는 제목을 정의할 때 사용

 

table의 모든 태그를 활용한 코드

<table width="100%" border="1">
    <caption>
        학교 성적에 대한 표
    </caption>
    <colgroup>
        <col style="width: 30%; background: skyblue" />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th scope="col">교과목</th>
            <th scope="col">점수</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">수학</th>
            <td>90</td>
        </tr>
        <tr>
            <th scope="row">영어</th>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>평균</th>
            <td>80</td>
        </tr>
    </tfoot>
</table>

결과 화면

학교 성적에 대한 표

교과목	점수
수학	90
영어	70
평균	80