기본 사용법

<table>
  <thead>
		<tr> <!-- React에선 <th>를 <tr>로 한번 감싸야 에러 안남 -->
			<th>구분</th>
			<th>이름</th>
			<th>가격</th>
		</tr>
  </thead>
  <tbody> 
    <tr> <!-- 1행 -->
      <td>건강식품</td>
      <td>오메가3</td>
      <td>50000원</td>
    <tr>
    <tr> <!-- 2행 -->
      <td>의류</td>
      <td>샌들</td>
      <td>20000원</td>
    <tr>
    <tr> <!-- 3행 -->
      <td>간식</td>
      <td>오예스</td>
      <td>8000원</td>
    <tr>
  </tbody>
</table>

테이블을 만들 땐 <table> 사용
(헤더) 열의 제목을 만들 땐 <th> 사용
(가로) 행을 만들 땐 <tr> 사용
(세로) 열(셀)을 만들 땐 <td> 사용

HTML5부터 행 그룹을 묶는 <thead> <tbody> <tfoot> 태그가 추가됨. 각 영역들을 그룹으로 묶기 때문에 CSS 적용하기 편한 장점이 있음.

이미지 출처 : 오쌤의 니가스터디

<thead> 테이블의 헤더 <th>를 묶는 그룹 태그
<tbody> 테이블의 콘텐츠 <tr> <td>를 묶는 그룹 태그
<tfoot> 테이블의 마지막 부분 묶는 그룹 태그

테이블 관련 태그 속성

table

HTML5부터 align bgcolor border cellpadding cellspacing frame rules summary width 속성을 더 이상 지원하지 않으므로 CSS 속성을 사용해야 한다.

<table border="1">
	<!-- 생략 -->
</table>

속성명	속성값	설명	HTML5 지원
align	`left` `center` `right`	테이블의 가로 정렬	❌
bgcolor	`RGB` `HEX` `색상명`	테이블의 배경색	❌
border	`1` `0`	선(line) 유무	❌
cellpadding	픽셀	셀(td)의 내부 여백	❌
cellspacing	픽셀	셀(td) 사이의 여백	❌
width	픽셀 혹은 `%`	테이블 가로 너비	❌
frame	`void` `above` `below` `hsides` `lhs` `rhs`등	바깥 테두리	❌
rules	`none` `groups` `rows` `cols` `all`	안쪽 테두리	❌
summary	텍스트	테이블 콘텐츠의 개요	❌

td

하나의 데이터 셀을 정의할 때 사용하는 태그. 폰트 두께 400(일반), 좌측 정렬이 기본값.

속성명	속성값	설명	HTML5 지원
align	`left` `right` `center` `justify` `char`	셀 내용 수평 정렬	❌
valign	`top` `middle` `bottom` `baseline`	셀 내용 수직 정렬	❌
bgcolor	`RGB` `HEX` `색상명`	셀의 배경색	❌
colspan	숫자	병합할 열 개수	✅
rowspan	숫자	병합할 행 개수	✅
nowrap	`nowrap`	셀 콘텐츠의 줄바꿈 방지	❌
width	픽셀 혹은 `%`	셀의 가로 너비	❌
height	픽셀 혹은 `%`	셀의 세로 너비	❌
abbr	텍스트	셀 콘텐츠의 짧은 설명	❌
axis	카테고리명	셀이 포함될 카테고리	❌
headers	header id	셀과 연관된 헤더 id	✅

기본 사용법

테이블 관련 태그 속성

table

td

CSS에서 테이블 속성 지정 (추천)