[HTML] 표 태그

표 생성 태그

<table border = “테두리굵기(기본값:0)”>
    <!-- 행 추가 -->
    <tr>
        <th> 1행 1열 (제목 셀) </th>
        <td> 1행 2열 </td>
        <td> 1행 3열 </td>
        …
    </tr>
    <!-- 행 추가 -->
    <tr>
        <th> 2행 1열 (제목 셀) </th>
        <td> 2행 2열 </td>
        <td> 2행 3열 </td>
        …
    </tr>
</table>

#  셀 병합 태그

<!-- 같은 행에서 오른쪽 방향으로 열 병합 -->
<td colspan = "합칠개수"> 셀 내용 </td>

<!-- 같은 열에서 아래쪽 방향으로 행 병합 -->
<td rowspan = "합칠개수"> 셀 내용 </td>

 

표 제목 태그

  ① 위쪽에만 표시 가능한 표 제목 태그 : <caption>

 

<table>
	<caption> 표 제목 </caption>
	...
</table>

 

      - 코드의 위치와 관계 없이, 제목이 표의 위쪽 중앙에 표시됨

 

  ② 위쪽/아래쪽 모두 표시 가능한 표 제목 태그 : <figure>, <figcaption>

 

<figure>
    <!-- <table> 태그 위치 1 -->
    <figcaption> 표 제목 </figcaption>
    <!-- <table> 태그 위치 2 -->
</figure>

 

  - <figcaption> 태그가 <table> 태그의 위 or 아래에 입력된 것에 따라 표의 위 or 아래에 제목이 표시됨

  - 좌측 정렬로 제목이 표시되며, 표가 자동으로 들여쓰기됨

 

표 구조 정의 태그

  - 표의 구조를 제목(thead), 본문(tbody), 요약(tfoot) 부분으로 나눔

  - 표의 이해를 돕기 위해 사용함

 

<table>
    <caption> 표 제목 </caption>
    <thead>
        <tr> ~ </tr>
    </thead>
    <tbody>
        <tr> ~ </tr>
    </tbody>
    <tfoot>
        <tr> ~ </tr>
    </tfoot>
</table>

 

 

---

셀별 스타일 지정 태그

<td style = "스타일속성 : 속성값;"> 셀 내용 </td>

 

  - 스타일 속성

      1) 너비 : "width : 너비px;"

      2) 높이 : "height : 높이px;"

      3) 배경색 : "background-color : 색상;"

 

열별 스타일 지정 태그

<table>
    [<caption> ~ </caption>]
    <colgroup>
        <!-- 하나의 열에 대해 스타일 지정 -->
        <col style = "스타일속성 : 속성값;">
        <!-- 여러 개의 열에 대해 스타일 지정 -->
        <col span = "묶을개수" style = "스타일속성 : 속성값;">
    </colgroup>
    <tr> ~ </tr>
</table>

 

  - <caption> 태그 뒤에, <tr> 태그 전에 사용해야 함

  - <col> 태그 개수와 <table> 태그의 열 개수가 같아야 함