07. DOIT - 웹 문서에 다양한 내용 입력하기(표 만들기)

 

표의 구성 요소

 

· 표는 행과 열 그리고 셀로 이루어집니다. 셀은 행과 열이 만나 이루어진 곳으로 표의 내용이 들어가는 한 칸을 의미합니다. 

<표 - 행,열,셀>

 

<table>, <caption> 태그

 

· 표를 만드는 < table>, <caption> 태그

표의 시작과 끝을 알려 주는 <table>과 </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣습니다. 표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용합니다. <caption> 태그를 사용하면 제목은 표의 위쪽 중앙에 표시됩니다.

 

 

<tr>, <td>, <th>태그

 

· 행을 만드는 <tr> 태그와 셀을 만드는 <td>, <th> 태그

<table> 태그만 작성하면 표가 만들어지지 않습니다. <table> 태그 안에 행이 몇개인지, 각행에는 셀이 몇 개인지 지정해야합니다. <tr>태그는 행을 만들고 <td>태그는 행 안에 있는 셀을 만들기 때문에 <table> 태그 안에 <tr>, <td> 태그가 모두 모여야 하나의 셀을 만들 수 있습니다.

 

단, 제목 행에 셀을 만들 때는 <td> 태그 대신 <th> 태그를 사용합니다. <th> 태그를 사용한 내용은 진하게 표시되고 셀 안에서 중앙에 배열되므로 다른 내용에 비해 눈에 띕니다.

 

 

 

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

 

· 표의 구조를 지정하는 <thead>, <tbody>, <tfoot>태그

일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래쪽에 합계나 요약 내용을 표시하기도 합니다. 이런 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 놓는 것이 좋습니다. 

 

 

 

<rowspan>, <colspan >태그

 

· 행이나 열을 합치는 <rowspan>, <colspan >태그 

표는 <tr> 태그와 <th> 태그, <td>태그를 이용해서 여러 셀로 구성합니다. 이떄 여러 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있습니다. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td> 태그나 <th> 태그에서 이뤄집니다.

<td rowspan= "합칠 셀의 개수">셀의 내용</td>
<td colspan = "합칠 셀의 개수">셀의 내용</td>

 

 

 

 

 

 

□ : <td rowspan=2> 로 설정해서 행을 합침