목차
intro- table을 만들기 전에..
1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있어야 해
2.1 Table을 Semantic하게 만드는 요소 1
2.2 Table을 Semantic하게 만드는 요소 2
2.3 Table을 Semantic하게 만드는 요소 3
3. 헷갈리는 표 병합. 이것만 생각하자
4. 열 그룹을 묶기 위해 존재하는 <colgroup>태그
5. 이 밖의 이런저런 팁들
table을 만들기 전에...
<table>은 표가 들어갈 '컨테이너'요소다.
그렇기 때문에 당신이 일단 표를 만들기로 마음을 먹었다면
- table태그를 열고,
- 테이블을 만드는 여러 자식요소들을 담아주고,
- table을 닫아주면 된다.
일단 table을 열고 시작하자.
1. tabel을 만드는 핵심 요소들 - 다른건 몰라도 이건 있어야 해
<caption>
<caption>은 이 표가 어떤 표인지 나타내주는 제목이라고 생각하면 쉽다. 위의 그림에서는 '2월 판매 기록'이다.
그렇기 때문에 <table>요소의 첫 번 째 자식으로 사용한다.
그리 어렵지 않다.
<tr>,<td> - 테이블을 만드는 가장 핵심적인 태그
자, <table> 안에 <caption>까지 넣어줬다면 이제 본격적으로 표를 만들어야겠지?
지금은 <tr>, <td> 딱 두 태그만 이용해서 가장 기초적이며 핵심을 이해해보겠다.
(tr = table row, td= table data 의 약자)
table이 헷갈리는 이유
테이블의 특징 중 하나는 그 안의 데이터값을 넣을 때 기본적으로 row(행)으로 작성해야 한다는 거다.
바로 이 점이 테이블을 처음 배울 때 헷갈리는 점인데, 일단 왜 헷갈리는지 이해를 하고 접근하면 그리 어렵지 않다.
자, 우리가 이런 형태의 표를 만든다고 생각해보자.
그리고 Group A 밑에 있는 데이터를 작성한다고 생각해보자.
인간의 사고방식으로는 Group A 밑으로
카타르, 에콰도르, 세네갈, 네덜란드 순서로 적는게 자연스럽다.
하지만 table에서는 다르다.
앞서 말했듯이 기본적으로 row(행)으로 작성을 하기 때문에,
HTML에서는
카타르 다음 같은 행에 위치한 잉글랜드 아르헨티나 프랑스 - 순서로 작성해줘야 한다.
그래서 HTML에서 table을 작성할 때는 머릿속에서 계속해서 왼쪽에서 오른쪽으로 데이터를 넣어주는 상상을 해야한다!
다시 돌아오면,
기본적으로 <tr>태그를 사용해 1행을 열어 준 다음
1행의 각 열마다 들어갈 각각의 <td>를 넣어주고, 행이 끝났다는 </tr> 로 닫아준다.
<tr>
<td></td>
<td></td>
<td></td>
</tr>
HTML에서는 수직으로 작성하면서도 계속 머릿속에서는 왼쪽에서 오른쪽으로... 라고 상상하자.
마치 이렇게...
<tr>
<td></td> <td></td> <td></td>
</tr>
종합
그럼 지금까지 배운 caption, tr, td를 종합해보았을 때, 위와 같은 표를 만들기 위해 이렇게 마크업 해볼 수 있다.
<table>
<caption>
2022 카타르 월드컵
<p>본선 조추첨 결과</p>
</caption>
<tr>
<td>GroupA</td>
<td>GroupB</td>
<td>GroupC</td>
<td>GroupD</td>
</tr>
<tr>
<td>카타르</td>
<td>잉글랜드</td>
<td>아르헨티나</td>
<td>프랑스</td>
</tr>
<tr>
<td>에콰도르</td>
<td>이란</td>
<td>사우디아라비아</td>
<td>대륙PO-1</td>
</tr>
<tr>
<td>세네갈</td>
<td>미국</td>
<td>멕시코</td>
<td>덴마크</td>
</tr>
<tr>
<td>네덜란드</td>
<td>유럽PO</td>
<td>폴란드</td>
<td>튀니지</td>
</tr>
</table>
자 여기까지 잘 왔다.
사실 이게 table의 핵심이다. 표에 선을 추가하거나 예쁘게 꾸미는 것은 CSS의 역할로 넘겨두자.
테이블 만들기 끝! 쉽죠?
2.1 Table을 Semantic하게 만드는 요소 1
참 쉽지만, 우리는 이제 조금 더 욕심이 난다.
HTML에서 가장 중요한 것 중에 하나가 Semantic. 즉 목적에 맞는 '의미'를 부여해주는 것이기 때문이다.
그럼 여기서 우리는 더 Semantic한 table을 만들기 위해 무엇을 해줄 수 있을까?
<th> = table head
앞서 표를 살펴보면, Group A부터 D까지는
그 밑에 들어가는 모든 나라이름들과는 속성이 좀 다르다.
Group은 각각 데이터들의 '제목', '머리'가 되어주는 부분이기 때문이다.
이 데이터들은 <td> 대신 <th>를 사용해줌으로써, 제목이 되는 부분이라는 의미를 부여해줄 수 있다.
Group A~D에 <td> 대신 <th>를 사용해서 코드를 작성해보자.
<table>
<caption>
2022 카타르 월드컵
<p>본선 조추첨 결과</p>
</caption>
<tr>
<th>GroupA</th>
<th>GroupB</th>
<th>GroupC</th>
<th>GroupD</th>
</tr>
<tr>
<td>카타르</td>
<td>잉글랜드</td>
<td>아르헨티나</td>
<td>프랑스</td>
</tr>
<tr>
<td>에콰도르</td>
<td>이란</td>
<td>사우디아라비아</td>
<td>대륙PO-1</td>
</tr>
<tr>
<td>세네갈</td>
<td>미국</td>
<td>멕시코</td>
<td>덴마크</td>
</tr>
<tr>
<td>네덜란드</td>
<td>유럽PO</td>
<td>폴란드</td>
<td>튀니지</td>
</tr>
</table>
2.2 Table을 Semantic하게 만드는 요소 2
<scope>
<scope>태그를 통해 <th>요소가 어느 방향으로 연결되어있는 건지도 설정해줄 수 있다.
쉽게 예를 들어, Group A는 열 방향으로 위치한 데이터들의 제목이기 때문에,
GroupA를 감싸고 있는 th태그의 속성으로 scope="col" (column의 약자)를 넣어주면 된다.
행 방향이라면 scope="row"를 넣어주면 된다.
<tr>
<th scope="col">GroupA</th>
<th scope="col">GroupB</th>
<th scope="col">GroupC</th>
<th scope="col">GroupD</th>
</tr>
이제 브라우저는 확실하게 'GroupA가 수직정렬되있는 데이터들의 대장이구나'라고 인식하게 된다.
2.3 Table을 Semantic하게 만드는 요소 3
<thead>, <tbody>, <tfoot>
<thead>, <tbody>, <tfoot>는 각각 table head, table body, table foot을 의미한다.
테이블이 내용이 많을 때 머리글, 본문, 바닥글로 구역을 묶어줄 수 있다.
<table>
<thead>
<tr>
<th>구분</th>
<th>이름</th>
<th>판매량</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>해리포터</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>헝거게임</td>
<td>200</td>
</tr>
<tr>
<td>3</td>
<td>반지의제왕</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">총 판매량</td>
<td>600</td>
</tr>
</tfoot>
</table>
- 보통 테이블이 예시와 같이 간단할 때는 굳이 쓰지 않는다.
- 이 요소들은 테이블의 레이아웃에 영향을 미치지 않는다. 하지만 css를 사용하여 스타일링 할 수 있다.
- tfoot는 table태그 안 어디에 위치해있던지 브라우저 상에서는 표의 가장 하단에 위치하게 된다.
3. 헷갈리는 표 병합. 이것만 생각하자
<td> 또는 <th> 태그 요소에 colspan 또는 rowspan 속성을 사용하면 셀간 병합이 가능한데,
colspan은 '열간' 병합을 사용할 때 사용하고 rowspan은 '행간' 병합을 할 때 사용한다.
- 이 때 각 속성 뒤에 몇 개의 셀을 병합하고 싶은지 지정해줘야 하고,
- 병합되는 셀은 (당연히) 지워줘야 한다.
예제를 보기 전에...
처음에 colspan을 '가로병합' 그리고 rowspan을 '세로병합' 이렇게 외우면 두 개의 이름이 반대되는 속성이라 두뇌가 고장난다.
그래서 그렇게 외우지 말자.
대신에 아래와 같이 생각해보자.
colspan을 쓸 때는 col을 뒤에 붙는 숫자만큼 외쳐주자. col과 col을 병합하자! (열과 열을 병합하자!)
rowspan을 쓸 때는 row를 뒤에 붙는 숫자만큼 외쳐주자. row과 row를 병합하자! (행과 행을 병합하자!)
col과 col을 병합하면 열과 열이 병합되니까 = 자연스레 가로로 두 칸이 병합되는게 그려지고,
row와 row를 병합하면 행과 행이 병합되니까 = 자연스레 세로로 두 칸이 병합되는게 그려진다.
colspan의 예를 살펴보자.
<tr>
<td colspan="2">총 판매량</td>
<!-- <td></td> -->
<td>600</td>
</tr>
col과 col을 병합하자! (열과 열을 병합하자!)
첫번째td 에서 2개의 col을 병합하라고 지시했고 중간의 열은 삭제했기 때문에,
'총 판매량' 그리고 '600'이라는 두 개의 열만 남았다
그렇다면 rowspan은 어떻게 할까?
<tr>
<td>1</td>
<td>해리포터</td>
<td rowspan="2">100</td>
</tr>
<tr>
<td>1</td>
<td>해리포터2</td>
<!-- <td>100</td> -->
</tr>
row와 row를 병합하자! (행과 행을 병합하자!)
해리포터 열 오른쪽에 있던 셀에 rowspan="2"를 주고,
해리포터2 열 오른쪽에 있던 셀은 삭제를 해주면 두 행이 병합된 것을 볼 수 있다.
4. 열 그룹을 묶기 위해 존재하는 <colgroup>태그
이 태그는 열을 그룹으로 묶어 CSS적으로 스타일링을 주기 위해 사용한다.
예를 들어, 아래 사진에서 그룹 A열을 하나로 묶고, 그룹 B,C,D를 하나로 묶어 색깔을 넣고 싶다고 생각해보자.
일단 <table>태그 안에 <colgroup></colgroup> 태그를 자식요소로 넣어주고,
그 안에 <col span="왼쪽부터 묶고싶은 열의 개수"> 를 넣어주면 된다.
<colgroup>
<col span="1"/>
<col span="3"/>
</colgroup>
CSS를 통해서 색깔을 넣어주면,
1열이 한 그룹, 2,3,4열이 한 그룹으로 잘 묶여있는 것을 볼 수 있다.
5. 이 밖의 이런저런 팁들
- table의 크기는 안에 들어있는 자식요소의 크기만큼이다.
- 열의 넓이를 조절할 땐 col을 사용하자.
- Table을 Semantic하게 만드는 요소인 scope, thead, tbody, tfoot은 디자인 레이아웃에 변화를 주지 않는다.
- 테이블 안에 직계자식으로 tr th td 이외에는 넣지 마라! 후손자로는 이미지든 p든 넣어도 상관없음.
'Front-End Developer > HTML' 카테고리의 다른 글
웹 접근성(Accessible HTML) - 큰 깨달음..!!! (0) | 2022.04.12 |
---|---|
점진적 향상기법이란? / 이미지 포맷의 종류 (0) | 2022.04.02 |
srcset attribute를 이용해서 반응형 이미지 만들기 (0) | 2022.04.02 |
Grouping Content (0) | 2022.04.02 |
What is HTML Living Standard? (0) | 2022.04.02 |