04. HTML <table>, <tr>, <td>,<th>

 

<table>
    <caption>과목별 성적</caption>
    <tr>
    <th>과목</th> <th>중간시험</th> <th>기말시험</th>
    </tr>
    <tr>
    <td> HTML 웹프로그래밍 </td>
    <td> 30 </td>
    <td> 66 </td>
    </tr>
    <tr>
    <td> 알고리즘 </td>
    <td> 28 </td>
    <td> 70 </td>
    </tr>
</table>

<table>태그

HTML에서 테이블을 정의하는 태그

- m행 x n열

-> m개의  <tr>태그, 각 <tr>태그 내에는 n개의 <td>태그

 

<tr> 태그 'table row'

테이블에서 하나의 줄에 해당하는 행row을 정의하는 태그

-<td> 또는 <th> 태그를 포함해야만 사용 가능

 

<td> 태그 'table data'

테이블에서 데이터(텍스트, 이미지)가 표시되는 표준 셀을 정의

- 반드시 <tr>태그 내에서 사용

- 셀 내용 -> 왼쪽 정렬로 표시

 

<th> 태그 'table header'

테이블 내부에서 행/열의 제목을 표시하는 헤더 셀을 정의

- 사용하는 경우에는 반드시 <tr>태그 내에서 사용

- 셀 내용 -> 진하게 가운데 정렬로 표시

 

<caption> 태그

테이블 전체에 해당하는 제목을 표시

- 테이블 레이아웃에는 아무런 영향을 미치지 않음

- 반드시 <table> 시작태그의 바로 다음에 위치해야 함

>> <table>과 <caption> 태그 사이에는 다른 태그도 위치 불가

>> <tr> 또는 <td> 태그 내에서 사용하면 무시됨

- 테이블 상단에 진하게 가운데 정렬로 표시

>> CSS caption-side 속성과 text-align 속성으로 변경 가능