1. 테이블 만들기
HTML에서는 테이블을 잘 사용하지 않는다고 하지만,
그래도 꼭 필요한 경우가 있고, 간단하기도해서 쓱-배우고 넘어갔다.
<table> 태그
1. 상속관계
자식코드 : <tr>
자식코드
- <th> : 컬럼명에 해당(자동으로 볼드처리)
- <td> : 콘텐츠에 해당
2. 속성
class : 컬럼에 클래스를 부여해 콘텐츠 삽입 또는 css에 활용(> 나중에 더 자세히 다룰예정)
border : table태그의 시작에 넣는 것으로 테이블에 선을 생성한다
rowsapn : 셀합치기 중 행을 합치는 것으로 세로방향의 병합
colspan : 셀합치기 중 열을 합치는 것으로 가로방향의 병함
2. 셀합치기
여기에서 셀합치기를 조금더 자세히 다뤄보자면 행을 입력하는 시작태그에 더하는 속성이다.
아래코드에서 첫전째 tr>td 태그에서 rowspan을 사용하게되었는데, 이때만 병합된 셀에 들어갈 내용을 기입하고 이후에는 별다른 기입없이 넘어가면된다.
그래서 두번째 tr>td에서는 컬럼이 5개 (최초 열에서도 병합이 일어나 4개로보이지만 원래는 5개의 열을가짐) 이지만, 기입하는 데이터가 4개로 줄어들었다.
<table border="1">
<caption>셀 합치기 연습</caption>
<thead>
<tr>
<th>날짜</th>
<th>제목1</th>
<th>제목2</th>
<th colspan="2">제목3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1월1일</td>
<td>하나</td>
<td rowspan="2">둘</td>
<td>셋</td>
<td>넷</td>
</tr>
<tr>
<td>1월 2일</td>
<td>다섯</td>
<td>여섯</td>
<td>일곱</td>
</tr>
<tr>
<td>1월 3일</td>
<td colspan="4">여덟</td>
</tr>
</tbody>
</table>3. thead, tbody, tfoot
그렇다면 이 코드에서 보이는 tbody는 무엇일까?
이건 테이블의 구역을 나누는 태그로 같은 테이블의 구조에따라 기입하는 것이다.
그 종류로는 thead, tbody, tfoot가 있고, 글로 따지면 서론, 본론, 결론지점에 해당하는 부분을 지정하여 구역을 지정해주면된다.
