[HTML5] 6. <table> 태그와 표 생성 + 이미지를 가지는 표 생성 + 셀 합치기 with rowspan & colspan

6. <table> 태그와 표 생성 + 이미지를 가지는 표 생성 + 셀 합치기 with rowspan & colspan

 

 

 

 

# 표 생성에 사용되는 태그들

- <table> :  표 전체를 담는 컨테이너

- <caption> : 표 제목

- <thead> : 헤딩 셀 그룹

- <tfoot> : 바닥 셀 그룹

- <tbody> : 데이터 셀 그룹

- <tr> : 행 (여러 <td>,<th> 포함)

- <th> : 열 제목(헤딩) 셀

- <td> : 데이터 셀

 

 

 

 

 

# 행과 열 만들기

-표는 여러 행으로 구성되고, 한 행은 여러 셀로 구성된다.

 

-  <thead>, <tbody>, <tfoot> 은 여러 개의 <tr> 을 포함할 수 있다.

 

<table>

  <thead>

    <tr><th> 이름 </th><th> HTML </th><th> CSS </th></tr>

  </thead>

  <tbody>

    <tr><td> 황기태 </td><td> 80 </td><td> 70 </td></tr>

    <tr> ... </tr>

  </tbody>

</table>

 

 

 

 

 

 

 

# 셀 합치기

합치기 전

 

 

 

 

 

- 가로로 합치기 : colspan

+ bgcolor 은 배경색을 의미함

 

 

 

 

 

 

- 세로로 합치기 : rowspan

 

 

 

 

 

 

 

# 이미지를 가지는 표 만들기