tabel 태그란?
정보를 행과 열로 나눠 보여주는 태그
caption : 표의 제목 태그
tr : 표의 행을 담당하는 태그
th : 표의 데이터 중 제목을 담당하는 셀태그
td : 표의 데이터 중 일반 데이터를 담당하는 셀태그
table 태그의 속성 (css로 대체할 수 있으므로 웹표준에는 맞지 않음)
border : table과 cell태그틀의 테두리를 지정하는 속성
width : 표의 가로폭을 지정하는 속성
cellpadding : 셀 테두리의 안쪽 여백
cellspacing : 셀들간의 여백 조절 - 테두리 바깥쪽 여백
<table border="1" width="500" cellpadding="10" cellspacing="10">
border="1"
width="500"
cellpadding="10"
cellspacing="10"
th, td {
border: 1px solid black;
}
셀들 사이 여백 없애기 (cellspacing 대체하는 css)
table {
border-spacing: 0;
}
셀간의 선겹침 허용하기
table {
border-spacing: 0;
border-collapse: collapse;
}
cellpadding을 대체
th, td {
border: 1px solid black;
padding: 10px;
}
테이블 사이즈 지정
table {
border-spacing: 0;
border-collapse: collapse;
width: 500px;
}
width: 500px;
th, td (셀태그) 속성
width : 셀의 가로폭을 지정하는 속성
height : 셀의 세로 높이를 지정하는 속성
align : 셀 콘텐츠의 가로 정렬 - left, center, right 등
valign : 셀 콘텐츠의 세로 정렬 - top, middle, bottom 등
(웹표준에 맞지 않음)
셀들의 가로폭 지정하기
th, td {
border: 1px solid black;
width: 100px;
}
셀들의 세로폭 지정하기
th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
콘텐츠 가로 정렬하기
th, td {
border: 1px solid black;
width: 100px;
height: 50px;
text-align: center;
}
콘텐츠 세로 정렬하기
th, td {
border: 1px solid black;
width: 100px;
height: 50px;
text-align: center;
vertical-align: top;
}
셀 병합하기
<table border="1">
<caption>같은 행 셀병합</caption>
<tr>
<th colspan="3">제목셀</th>
</tr>
<tr>
<td>일반셀</td>
<td>일반셀</td>
<td>일반셀</td>
</tr>
</table>
<table border="1">
<caption>다른 행 셀병합</caption>
<tr>
<th rowspan="2">제목셀</th>
<th>제목셀</th>
<th>제목셀</th>
</tr>
<tr>
<td>일반셀</td>
<td>일반셀</td>
</tr>
</table>
행구조와 열구조 태그
행구조태그
제목셀이 여러 행이거나 결론이 여러 행일 때 사용한다.
<thead> : 테이블의 제목셀이 여러 행으로 되어 있을 때 묶는 그룹 태그
<tbody> : 테이블의 일반적인 데이터들을 묶는 그룹 태그
<tfoot> : 테이블의 마지막 결론 행들을 묶는 그룹 태그
<table border="1">
<caption>강남역 커피전문점 매출</caption>
<thead>
<tr>
<th>커피점</th>
<th>스타벅스 강남R점</th>
<th>스타벅스 몬테소리점</th>
<th>커피빈 강남에스점</th>
<th>커피빈 강남역GT타워점</th>
</tr>
<tr>
<th>위치</th>
<th>강남역 1,2번출구</th>
<th>강남역 9,10번출구</th>
<th>강남역 10번출구</th>
<th>강남역 9,10번출구</th>
</tr>
</thead>
<tbody>
<tr>
<th>1분기</th>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<th>2분기</th>
<td>70</td>
<td>70</td>
<td>70</td>
<td>70</td>
</tr>
<tr>
<th>3분기</th>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<th>4분기</th>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>320</td>
<td>320</td>
<td>320</td>
<td>320</td>
</tr>
<tr>
<th>평균</th>
<td>80</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
</tfoot>
</table>
이렇게 구분하여 작성할 경우 css를 다루기 쉬워진다.
<style>
thead {background-color: pink;}
tbody {background-color: beige;}
tfoot {background-color: lightblue;}
</style>
열구조태그
<colgroup> : 열 그룹을 묶기 위한 태그
<col span="열수"> : 한 그룹으로 묶을 열수를 지정
caption 아래에 colgroup 작성하기
<colgroup>
<col span="1" class="col01">
<col span="2" class="col02">
<col span="2" class="col03">
</colgroup>
<style>
.col01 {background-color: pink;}
.col02 {background-color: beige;}
.col03 {background-color: lightblue;}
</style>
