테이블
- 테이블이란 여러 종류의 데이터를 보기 좋게 정리하여 보여주는 표를 의미
- 행, 열, 셀로 구성
| <table> | 표를 만들겠다고 선언 |
| <caption> | 표의 제목 (웹 접근성 향상) |
| <tr> | 행 |
| <th> | 제목을 나타내는 열 |
| <td> | 데이터를 나타내는 열 |
| <col> | 하나의 열을 그룹화 |
| <colgroup> | span 속성과 함께 사용해 2개 이상의 열을 그룹화 |
| <thead> |
헤더 영역에 해당하는 행을 그룹화 |
| <tfoot> | 푸터 영역에 해당하는 행을 그룹화 ,합계를 나타낼 때 많이 사용되며 생략 가능 (선택적) |
| <tbody> | 본문 영역에 해당하는 행을 그룹화 |
🌐 웹 표준 시대에는 회원가입, 게시판, 설문조사 등에 사용된다.
* Table MDN: https://developer.mozilla.org/ko/docs/Web/HTML/Element/table
1. table 태그
- 표를 생성할 때 table 태그 사용
- 표 관련 태그는 모두 table 태그 안에서 사용
2. caption 태그
- HTML에서 표를 생성할 때 웹 접근성을 향상하는 방법의 하나로 표 제목을 지정한다.
- table 태그 안에 첫 번째로 작성해야 한다.
3. tr 태그
- tr 태그는 표에서 행을 생성
- tr 태그 하나는 행 하나를 생성하므로 행을 여러 개 만들고 싶다면 tr 태그를 여러 번 사용하면 된다.
4. th, td 태그
- 표에서 열을 생성할 때 사용
- th 태그는 표에서 제목을 나타내는 열을 생성할 때 사용
- td 태그는 표에서 데이터를 나타내는 열을 사용할 때 사용
5.rowspan과 colspan 속성 (셀병합)
행을 의미하는 tr 태그 안에 열을 의미하는 th, td를 사용하면 행과 열이 만나 셀이 생성된다. 이렇게 생성된 셀은 병합할 수 있다.
- colspan : 열과 열 병합 (옆과 옆)
- rowspan : 행과 행 병합 (위아래)
- 속성값으로 병합하고 싶은 셀의 개수를 적는다.
- 단, 병합한 셀의 개수만큼 다음 행 또는 열은 비워야 한다.
* 나중에 합쳐지더라도 처음에 구조 다 만들어 놓고 하기
| colspan="합칠 열 개수" | 열과 열 병합 (옆과 옆) |
| rowspan="합칠 행 개수" | 행과 행 병합 (위아래) |
[코드 예시]
<table>
<caption>귀여운 동물들</caption>
<tr>
<th colspan="4">
animals
</th>
</tr>
<tr>
<td>동물</td>
<td>분류(과)</td>
<td>크기</td>
<td>분포지</td>
</tr>
<tr>
<td>다람쥐</td>
<td>청설모과</td>
<td>12~17cm</td>
<td>아시아</td>
</tr>
<tr>
<td>쿼카</td>
<td>캥거루과</td>
<td>40~54cm</td>
<td rowspan="2">오스트레일리아</td>
</tr>
<tr>
<td>웜뱃</td>
<td>웜뱃과</td>
<td>70~120cm</td>
</tr>
<tr>
<td>카피바라</td>
<td>쥐목 카피바라과</td>
<td>100~130cm</td>
<td>남미</td>
</tr>
</table>
6. thead, tfoot, tbody 태그 (행을 그룹화)
표에서도 행을 묶어 그룹화할 수 있다. 그때 사용하는 태그들이다.
- thead : 헤더 영역에 해당하는 행
- tfoot : 푸터 영역에 해당하는 행
- tbody : 본문에 해당하는 행
- thead-tfoot-tbody 순서로 사용
- thead와 tfoot 태그는 한 번만 사용 가능
- thead 태그로 그룹화한 행은 th 태그로 열을 생성
🌐 왜 사용할까?
가장 큰 이유는 웹 접근성을 향상하는 데 있다. 일반적으로 스크린 리더기는 모든 표 데이터를 읽어 내용을 전달한다. 그런데 thead와 tfoot 태그가 사용된 표라면 tbody 태그의 데이터를 읽기 전에 thead 태그의 헤더 정보와 tfoot 태그의 푸터 정보를 먼저 전달해서 지금 접근하는 표가 어떤 데이터를 담고 있는지 표 내용을 모두 읽기 전에 먼저 파악할 수 있다.
7. col과 colgroup 태그
표에서 열을 그룹화할 때 사용하는 태그
- col : 하나의 열을 그룹화
- colgroup : span 속성과 함께 사용해 2개 이상의 열을 그룹화
- 보통 열 전체를 그룹화해서 통일된 스타일을 적용하는 목적으로 많이 사용
- caption 태그를 사용했다면 다음에 사용해야하고, tr 태그보다는 먼저 사용해야 한다.
- 반드시 두 태그의 개수와 사용한 열 개수가 일치해야 한다.
[형식]
<col>
<colgroup span="그룹화할 열의 개수">
8. scope 속성
표를 생성할 때 사용할 수 있는 속성 중에서 순전히 웹 접근성 향상 목적으로 사용
- 제목의 범위가 불명확할 때 사용하여 웹 접근성이 향상된다.
- scop 속성은 제목을 나타내는 셀의 범위를 지정
- 그래서 표에서 제목을 나타내는 th 태그에서만 사용
- col, colgroup, rowgroup, row를 값으로 넣을 수 있다.
<table>
<caption>이용료 비교</caption>
<tr>
<th scope="col">구분</th>
<th scope="col">1개월 이용</th>
<th scope="col">3개월 이용</th>
</tr>
<tr>
<th scope="row">넷플릭스</td>
<td>8,900원</td>
<td>22,000원</td>
</tr>
<tr>
<th scope="row">왓챠</td>
<td>8,500원</td>
<td>20,000원</td>
</tr>
</table> >
테이블의 border
- border에 스타일을 따로 주지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 된다.
- CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다.
- 테이블의 테두리가 두 줄씩 나타나는 이유는 <table>태그, <th>태그, <td>태그 모두 자신만의 테두리를 가지고 있기 때문이다.
- 두 줄로 표현되는 테두리를 한 줄로 설정하려면 border-collapse 속성을 사용해야 한다.
- border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있다.
table의 CSS 스타일링
[표의 너비 조절]
width
[표의 테두리 설정]
1) border-style :
none - 테두리 표시x, 제일 낮은 우선순위
hidden - 테두리 표시 x, 제일 높은 우선순위
dotted - 둥근 점 여러 개
dashed - 직사각형 여러 개
solid - 하나의 직선
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/border-style
2) border-color :
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/border-color
3) border-width :
- thin, medium, thick
- px, rem, em 등
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/border-width
4) border-collapse :
separate : 분리된 테두리 (기본값)
collapse : 상쇄된 테두리
MDN : https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse
5) border-spacing
- 표 칸의 테두리 간격 지정, border-collapse가 separate여야 적용된다.
- 한 개의 <length> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정한다.
- 두 개의 <length> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정한다.
MDN : https://developer.mozilla.org/ko/docs/Web/CSS/border-spacing
6) 각 칸의 콘텐츠를 꾸밀 때 사용
- margin : 바깥 여백 공간
top, right, bottom, left
MDN : https://developer.mozilla.org/ko/docs/Web/CSS/margin
- padding : 안쪽 여백 공간
top, right, bottom, left
MDN : https://developer.mozilla.org/ko/docs/Web/CSS/padding
7) 각 칸의 텍스트와 콘텐츠를 정렬할 때 사용
text-align : 블록 요소나 표의 칸 상자의 가로 정렬을 설정
start, end, center, justify
MDN : https://developer.mozilla.org/ko/docs/Web/CSS/text-align
verical-align : inline 또는 table-cell box에서의 수직 정렬을 지정
baseline, sub, super, text-top, text-bottom, middle
MDN : https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align
* HTML5 전까지는 <body>에 boder와 background-color 등을 지정했지만, HTML5부터는 CSS로 제어해준다.
'기술 > HTML' 카테고리의 다른 글
| [HTML] block / inline / inline-block (0) | 2022.10.08 |
|---|---|
| [HTML] 목록 태그 (0) | 2022.10.07 |
| [HTML] 폼 (0) | 2022.10.07 |
| [HTML] 하이퍼링크, 이미지 (0) | 2022.10.07 |
| [HTML] 멀티미디어 (0) | 2022.09.28 |