7. HTML - 표(테이블) 사용하기

 

태그	설명	비고
<table> <table>	테이블
<caption> </caption>	표 설명 or 제목	선택사항
<thead> </thead>	테이블의 헤더 부분	<tbody> 앞에 와야함
<tbody> </tbody>	테이블의 본문	본 내용을 담음
<tfoot> </tfoot>	테이블의 제일 하단	<tbody> 뒤에 와야함, 제일 하단 가로줄을 나타냄
<tr> </tr> <tr>안에 <td>가 들어감 <tr안에 <th>가 들어감	테이블의 행 <가로>
<td> </td> <tr>안에 들어감	테이블의 열 <세로>
<td> 속성	colspan	열 병합
<td> 속성	rowspan	행 병합
<th> </th> <tr>안에 들어감	열 또는 행의 헤더	scope 속성으로 row, col 중 선택

 

[예제] : 일주일의 1-7교시 까지 시간표 만들기

table>caption+(thead>tr>th*8)+(tbody>tr*7>th+td*7)

thead>tr>th*8 : 가로행(tr)에 헤더 8개 (요일, 월, 화, 수, 목, 금, 토, 일)
tbody>tr*7(1-7교시)>th(헤더)+td(세로칸)*7

[VS Code]

<table>
    <caption></caption>
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th></th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

[웹 페이지 결과 화면]

 

표 내용 채우기

#1. <thead> : 표의 각 열의 최상단을 나타냄 -> 요일

    <caption> 일주일 공부 계획표 </caption>
    <thead>
      <tr>
        <th>*</th>
        <th>월요일</th>
        <th>화요일</th>
        <th>수요일</th>
        <th>목요일</th>
        <th>금요일</th>
        <th>토요일</th>
        <th>일요일</th>
      </tr>
    </thead>

#2. <tbody> : 표의 내용에 해당.

<tr> 가로행

<th> 가로행의 제일 좌측을 나타냄 -> 교시

<td> 해당하는 가로 행의 각 세로 열

    <tbody>
      <tr>
        <th>1교시</th>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
        <td>F</td>
        <td>G</td>
      </tr>

<tbody> 의 <tr> 7개를 모두 채운다.

 

[웹 페이지 결과물]

[안에 값을 가진 표 만들기]

table>(tr>td{1}*4)*4

 

 

 

[결론]

태그	설명	비고
<table> <table>	테이블
<caption> </caption>	표 설명 or 제목	선택사항
<thead> </thead>	테이블의 헤더 부분	<tbody> 앞에 와야함 최상단 가로줄을 나타냄
<tbody> </tbody>	테이블의 본문	표의 내용을 담음
<tfoot> </tfoot>	테이블의 제일 하단	<tbody> 뒤에 와야함, 최하단 가로줄을 나타냄
<tr> </tr> <tr>안에 <td>가 들어감 <tr안에 <th>가 들어감	테이블의 행 <가로>	tr속에 th, td가 들어옴
<th> </th> <tr>안에 들어감	열 또는 행의 헤더(1번째)	scope 속성으로 row, col 중 선택할 수 있음. 즉, 해당 <th>가 가로 요소 or 세로 요소 중의 헤더임을 의미
<td> </td> <tr>안에 들어감	테이블의 열 <세로>	속성으로 colspan (열 병합), rowspan (행 병합) 이 있음.
colspan	열 병합	<td colspan="차지하는 col 수"> 표에 표시될 숫자 </td>
rowspan	행 병합	<td rowspan="차지하는 row 수"> 표에 표시될 숫자</td>