[TIL #3] HTML 기초의 디테일 - Table

Kayoung Kim·2021년 6월 6일
1

HTML

목록 보기
4/8
post-thumbnail

Table(표)는 데이터를 담은 표를 마크업할 때 사용한다. 엑셀에서 표 만드는 것도 헤메는데, 마크업만 하면 되는데 할 때마다 헷갈리는 녀석이다.

<table>
	<tr> *table row(가로줄)
    	<th> *table header </th>
        	<td> *table data </td>
    	</tr>
 </table>
        
    
  • <table><tr>, <th>, <td> 와 셋뚜셋뚜

  • 마크업의 기준은 가로줄! 그렇기 때문에 <thead> <tbody>로 구분해주는 것이 좋다. (왜? 처음 가로줄은 그 표의 주요 항목이기 때문에 브라우저에게 명확하게 인식시키기 위해서지! 😁)

  • 총합, 최종 결론에 해당하는 table row는 <tfoot>으로 묶는다.

  • <th scope = "col"> <th scope = "row"> 는 이 행/열의 header야! 라고 선언하는 것이다. 브라우저가 테이블 데이터를 인식하고 읽는 순서를 결정하는데 도움을 준다. (도움을 주자..)

  • colspan, rowspan은 행/열을 병합할 때 쓴다.
    <td rowspan="2"> *차지하는 칸의 수로 표시

0개의 댓글