[생활코딩] 16강. 표 <table>, <tr>, <td>, <th>

표

 

• 데이터를 구조화 할 때 흔히 사용된다.
• 레이아웃으로도 활용될 수 있지만, 불가피한 경우를 제외하면 div, CSS 등을 이용한다.
• <th>는 데이터 그룹의 제목에 해당한다. (header cells)
• <td>는 th tag에 속하는 데이터 그룹(standard cells). 세로줄, 즉 열에 해당한다.
• <tr>은 표의 가로줄, 즉 행에 해당한다.

 

예제 1.

<table>

     <tr>

          <td>1열</td>

          <td>2열</td>

     </tr>

</table>

 

이렇게, 모든 표는 <table>로 시작해서 </table>로 끝난다.

 

그 안에는 원하는 행(가로줄, row) 개수만큼 <tr> ~ </tr>이 작성되고,

 

<tr> 안에 원하는 열(세로줄, column) 개수만큼 <td> ~ </td>가 작성된다.

     = 표의 한 칸, 한 칸, 그러한 박스를 구성하는 건 곧 <td> 다!

 

 

 

예제 2.

예제 1과 달라진 점은, 첫 번째 <tr> 안에 들어간 tag가 <td>가 아닌 <th>라는 것 뿐이다!

데이터의 title 역할을 해 주는 tag는 <th>이다!!  → 굵은 글씨(bold)로 표시된다!

 

(무울론, CSS를 추가로 학습하게 되면, 굵은 글씨로 보이는 이 특성을 얼마든지 다르게 바꿀 수 있다!)

 

 

 

 

예제 3.

달라진 점: rowspan이라는 속성이 추가됐다.

 

n개의 행이 하나의 박스로 병합되었다. = rowspan 속성을 사용했다.

row(행) + span(묶다, 통합하다)

 

rowspan="n"

n개의 행을 하나로 묶는다.

병합되어서 굳이 다음 행의 같은 열에는 어떠한 데이터를 적을 필요가 없기 때문에 거기서는 <td>를 생략한다.

그래서 모든 <tr> 안의 <td> 개수가 동일하지 않을 수 있다.

 

 

 

 

 

예제 4.

달라진 점: colspan 속성이 사용되었다.

 

n개의 열이 하나의 박스로 통합되었다. = colspan 속성을 사용했다.

column(열) + span(묶다, 통합하다)

 

colspan="n"

n개의 열을 하나로 묶는다.

병합되어서 굳이 다음 열에 어떠한 데이터가 작성될 필요가 없기 때문에 <td>를 생략한다.

그래서 모든 안의 개수가 동일하지 않을 수 있다.