table의 기본 마크업 구조
ㄴ table > tr > td
<table>
<tr>
<td>연도</td>
<td>제목</td>
<td>감독</td>
<td>관객수</td>
</tr>
<tr>
<td>2015</td>
<td>어벤저스</td>
<td>조스 웨던</td>
<td>20명</td>
</tr>
</table>
caption으로 테이블에 제목 넣기
<caption>테이블 연대기</caption>
rowspan으로 table안의 상하 값이 겹칠 때 병합해준다.
<위. 아래 병합>
<table>
<tr>
<td>연도</td>
<td>제목</td>
<td>감독</td>
<td>관객수</td>
</tr>
<tr>
<td>2015</td>
<td>어벤저스</td>
<td rowspan="2">조스 웨던</td>
<td>20명</td>
</tr>
<tr>
<td>2015</td>
<td>어벤저스</td>
<td>20명</td>
</tr>
</table>
colspan으로 table의 좌우 값이 겹칠 때 병합해준다.
< 좌. 우 병합>
<tr>
<td colspan="3">총 관객 수</td>
<td>8명</td>
</tr>
th 태그로 제목행 나타내기
* 제목행에 해당되는 부분에는 <th> 태그를 사용한다.
<tr>
<th>연도</th>
<th>제목</th>
<th>감독</th>
<th>관객수</th>
</tr>
scope 속성 추가 : 웹 접근성 고려하기
스크린 리더기가 읽기 쉽도록 scope 속성을 추가해준다.
<tr>
<th scope="col">연도</th>
<th scope="col">제목</th>
<th scope="col">감독</th>
<th scope="col">관객수</th>
</tr>
colspan, rowspan을 사용해서 병합 테이블 만들기
1을 colspan, rowspan 각각 2를 줘서 병합하고 싶은 상황
2,5,6 을 마크업상 삭제해주어야 깔끔하게 병합이 가능하다.
<table>
<tr>
<td colspan="2" rowspan="2">1</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>7</td>
<td rowspan="3">8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td colspan="2">13</td>
<td>15</td>
</tr>
</table>
위의 코드로 colspan, rowspan 병합해준 테이블
table css
table {
border: 4px dolid #999;
/* 기본적으로는 컨텐츠 크기만큼 잡히므로, 부모의 너비로 가득 차도록 초기화*/
width: 100%;
/* 각각의 셀이 나누어진다 */
border-collapse: separate;
border-collapse: collapse; /*간격을 없앰*/
/* collapse: separate 일 때만 spacing 개념이 존재한다. */
border-spacing: 20px;
}
1. table의 width
ㄴ 기본적으로는 컨텐츠 크기에 맞게 가로 너비가 존재함
ㄴ 100%를 주면 부모 컨테이너 크기에 맞게 가로 너비가 조절된다.
2. border-collapse
ㄴ 기본값은 separate, 각각의 셀마다 간격을 둔다.
ㄴ 가장 많이 주는 값은 collapse, 셀 간격을 없앤다.
3. border-spacing
ㄴ border-collapse의 값이 separate일 때만 개념이 존재한다.
ㄴ 셀 간의 간격을 뜻한다.
table border의 주도권
table th,
table td {
/*border 굵기에 따라 주도가 바뀐다.*/
border-top: 4px solid red;
border-right: 4px solid blue;
border-left: 4px solid purple;
border-bottom: 4px solid deeppink;
}
ㄴ 만약, border-top의 굵기가 6px이라면 가장 상단에 주도된다.
caption, th 초기화
caption {
text-align: unset;
/* caption-side: bottom; */
}
table th {
font-weight: unset;
}
ㄴ caption은 text- align이 존재하므로 unset으로 초기화
* caption-side 는 캡션의 위치 설정이다. (표 위아래양옆 배치 가능)
ㄴ th는 폰트 굵기 존재하므로 unset 초기화
table-layout
셀 width 조정 : 컨텐츠가 늘어감에 따라 한꺼번에 늘어나는 셀
table {
width: 100%;
border-collapse: collapse;
border-spacing: unset;
table-layout: auto;
}
ㄴ table-layout 기본값은 auto, 자동으로 컨텐츠 너비에 맞게 너비가 계산된다.
ㄴ table-layount를 fixed로 주면 내부 컨텐츠 크기와 관계 없이 너비가 맞춰져있다.
(좌) table-layout: auto / (우) table-layout: fixed
colgroup
캡션 아래에 colgroup 태그를 통해 열들을 묶어준다.
<table class="table">
<caption class="table-caption">테이블 연대기</caption>
<colgroup>
<col class="col">
</colgroup>
<css>
.table .col {
background-color: orange;
width: 140px;
}
2, 3번째 열은 또 colgroup을 선언해주면 된다.
<colgroup>
<col class="col type_small">
<col class="col type_medium">
<col class="col type_large">
</colgroup>
<css>
.table .col.type_small{
background-color: orange;
width: 140px;
}
.table .col.type_medium{
background-color: green;
width: 200px;
}
.table .col.type_large{
background-color: dodgerblue;
width: 200px;
}
테이블 제목에 position: sticky 주기
.table thead {
background-color: white;
position: sticky;
}
