구성요소
<table> 테이블을 만드는 태그
<thead> 표 머릿말 (굵은 글씨로 나타남)
<tbody> 표 본문
<tr> 테이블의 행을 만드는 태그(세로)
<td> 테이블의 열을 만드는 태그(가로)
<caption> 제목삽입
병합
< td>나 < th>태그에 colspan(열병합), rowspan(행병합) 을 추가해서 구현할 수 있다
<td rowspan="2"></td>
<rowspan> 셀을 세로로 병합, 속성값으로 병합하고 싶은 행의 수만큼 지정
<colspan> 셀을 가로로 병합, 속성값으로 병합하고 싶은 열의 수만큼 지정
<td colspan = "합칠 열의 개수"> 내용</td>
<cellspacing> 테이블 선간격
<cellpadding> 글자와 테이블 선 간격
<bgcolor> 배경색
<align> 정렬방식
<valign> 셀 안에서 세로위치 정렬 (top, middle, bottom)
<tfoot> 표 꼬릿말
주의사항
- 테이블은 항상
<table>태그로 감싸져 있어야 한다. - thead와 tbody를 반드시 쓸 것
- thead를 작성해야 th를 사용할 수 있다
(React가 rerender를 진행할 때, DOM tree가 예상과는 달리 진행될 수 있으므로 작성을 해야하는 것이 이유이다.) - tr 에서는 border 스타일을 적용할 수 없음
예제
< table>
< th>테이블< /th>
< th>만들기< /th>
//첫번째 줄
< tr>
< td>Row 1, column 1</ td>
< td>Row 1, column 2</ td>
< /tr>
//두번째 줄
< tr>
< td>Row 2, column 1</ td>
< td>Row 2, column 2</ td>
< /tr>
< /table>정렬
가로 정렬은 text-align 속성을 사용한다
->'left', 'right', 'center'
- text-align 설정이 없으면 기본적으로
<th>는 가운데 정렬,<td>는 왼쪽 정렬된다.
세로 정렬은 vertical-align 속성을 사용한다
-> 'top', 'middle', 'bottom'
- vertical-align 속성을 지정하지 않으면 기본적으로 가운데(세로) 정렬된다.
가로선만 있는 테이블 만들기
table tag에 border-collapse: collapse; 작성
:D