HTML에서 표를 만드는 방법에 대해 알아보자!
<table> 과 <caption> 태그
표를 생성할 때 <table> </table> 태그를 표시하고 사이에 표와 관련된 태그를 모두 넣습니다.
만약 표에 제목을 표시하고 싶으면 <table>태그 바로 아래에 <caption>태그를 사용하면 됩니다.
<caption> 태그를 사용하면 표의 위쪽 중앙에 제목이 나타납니다.
행을 만드는 <tr> 셀을 만드는 <td>, <th>
단순히 <table> 태그만 작성하면 표가 완성되지 않습니다. table 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지를 입력해주어야 합니다. <tr> 태그는 행을 생성하고, <td> 태그는 행 안에 있는 셀을 만들어 줍니다.
즉, <table> 태그 안에는 <tr>, <td> 태그가 있어야 하나의 표를 만들 수 있습니다.
또한 표의 제목 행에 셀을 만들경우에는 <th> 태그를 이용합니다. <th> 태그를 사용하면 내용은 진하게 표시되고 셀 안에서 중앙에 배치되므로 눈에 잘 띄게 됩니다.
<thead>, <tbody>, <tfoot> 태그
일부 표에는 제목이 표시된 셀과 자료가 표시된 셀 외에 표 아래에 합계나 요약 등의 내용을 표시하기도 합니다.
이런 종류의 표는 제목과 본문 그리고 요약이 있는 부분으로 표의 구조를 나누어 작성하는 것이 좋습니다.
이럴 때 <thead>, <tbody>, <tfoot> 태그를 사용하면 됩니다.
행이나 열을 합치는 rowspan, colspan
표는 tr 태그와 th태그 td 태그를 이용하여 여러가지 셀로 구성됩니다.
경우에 따라 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있습니다. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td> 태그나 <th> 태그안에서 이루어집니다.
행을 합치려면 rowspan 속성을, 열을 합치려면 colspan 속성을 사용하면됩니다.
기본형
<td rowspan="합칠 셀의 개수"> 셀의 내용 </td>
<td colspan="합칠 열의 개수"> 셀의 내용</td>
'HTML > HTML 이론' 카테고리의 다른 글
| [HTML] 폼 삽입하기 (0) | 2023.08.15 |
|---|---|
| [HTML] 서식/목록 태그 (1) | 2023.08.13 |
| [HTML] 태그 요약 (0) | 2023.08.03 |
| [HTML] 미디어 삽입 (0) | 2023.08.03 |
| [HTML] 표 만들기 (0) | 2023.08.03 |