들어가기 전에
앞선 강의를 기반으로 좀 더 복잡한 표를 만들어보는 실습 영상입니다.
아래 코드는 완성된 코드이니 바로 보지 마시고, 영상을 먼저 보고 같이 표를 만들어 주세요.
학습하기
9) 테이블 요소 2
복잡한 표 만들기
<table>
<caption>Specification values</caption>
<thead>
<tr>
<th rowspan="2">Grade.</th>
<th rowspan="2">Point.</th>
<th colspan="2">Strength.</th>
<th rowspan="2">Percent.</th>
</tr>
<tr>
<th>kg/mm</th>
<th>lb/in</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hard</td>
<td>0.45</td>
<td>56.2</td>
<td>80,000</td>
<td>20</td>
</tr>
<tr>
<td>Medium</td>
<td>0.45</td>
<td>49.2</td>
<td>70,000</td>
<td>25</td>
</tr>
<tr>
<td>Soft</td>
<td>0.45</td>
<td>42.2</td>
<td>60,000</td>
<td>30</td>
</tr>
</tbody>
</table>
기타
강의에서 다루지 않은 테이블 관련 태그와 속성들이 더 있습니다.
- <colgroup>
- <col>
- scope 속성
- header 속성
자주 사용되는 태그와 속성들이니 아래 링크를 참고하셔서 직접 공부하시기 바랍니다.
참고링크
- <table>: The Table element
https://developer.mozilla.org
- The HTML table element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
comment
완료
감사합니다.
- colgroup: width 와 표의 배경색을 지정할 수 있게 도와주는 태그이다.
- col: col 은 colgroup 에 속하는 태그로, 각 열을 정의할 때 사용하는 태그이다.
- scope: scope 은 th 부분에만 써주는데, 제목에서 세로 방향으로 내려가는 곳에는 'col' 이라고 써주면 되고, 제목 부분에서 가로 방향으로 가는 곳에는 'row' 라고 적어주면 된다.
1.5
23년 12월 19일 화요일 학습 완료!
직접 공부 링크
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/colgroup
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/col
• https://webclub.tistory.com/264
• http://www.tcpschool.com/html-tag-attrs/td-headers
• https://chunggaeguri.tistory.com/entry/HTML-Table-Headers
<!DOCTYPE html>
<html>
<head>
<title>테이블 요소2</title>
</head>
<body>
<table>
<caption>Specification values</caption>
<thead>
<tr>
<th rowspan="2">Grade.</th>
<th rowspan="2">Point.</th>
<th rowspan="2">Strength.</th>
<th rowspan="2">Percent.</th>
</tr>
<tr>
<th>kg/mm</th>
<th>lb/in</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hard</td>
<td>0.45</td>
<td>56.2</td>
<td>80,000</td>
<td>20</td>
</tr>
<tr>
<td>Medium</td>
<td>0.45</td>
<td>49.2</td>
<td>70,000</td>
<td>25</td>
</tr>
<tr>
<td>Soft</td>
<td>0.45</td>
<td>42.2</td>
<td>60,000</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
<colgroup>
<col>
</col>
</colgroup>
---
<col span="" class="">
---
웹접근성
scope 속성
header 속성
---
border-collapse
- ollapse : border를 한 줄로 합침
- separate : border를 분리한채로 유지
2023.01.10
가로를 합치는건 colspan. 세로를 합치는건 rowspan
<table><thead><tfoot><tbody>로 묶기
각 행은 제목행일 경우, <th>로 선언
제목행 외의 행의 경우, <td>로 선언
<th>와 <td>는 '행'을 의미하는 <tr>로 묶기
<table><thead><tr><th></th><th></th><th></th><th></th></tr><tr><th></th><th></th></tr><thead>
colgroup : 표의 열을 묶는 그룹을 정의
col : 표의 열을 나타냄, 열에 속하는 칸에 공통된 의미를 부여 할 때 사용. <colgroup> 안에서 찾을 수 있음
scope : 범위, 변수에 접근할 수 있는 범위
cf. https://jowook.tistory.com/61
headers : 해당 데이터 셀과 연관된 하나 이상의 헤더 셀(header cell) - 시각적인 효과는 없으나 스크린 리더기와 같은 장치에서는 유용하게 사용됨
cf. http://www.tcpschool.com/html-tag-attrs/td-headers
<colgroup> : 공통된 속성을 가지는 열들을 묶이 위한 태그
<col> : colgroup으로 묶을 각 공통된 속성 선언
scope, headers 속성 : 스크린 리더기를 위한 설정
- scope는 스크린 리더기가 읽어줄 방향에 관한 설정
- headers는 해당셀과 관련된 id 정보 전달
scope : 표의 헤더 표시
rowspan / colspan 적용하여 표만들기 완료
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Table</title>
</head>
<body>
<style>
table,
td,
th {
border: 1px solid;
padding: 7px;
border-collapse: collapse;
border-spacing: 0px;
}
.head {
vertical-align: top;
}
</style>
<div class="table">
<table>
<caption>
Specification values
</caption>
<thead>
<tr>
<td class="head" rowspan="2">Grade.</td>
<td class="head" rowspan="2">Point.</td>
<td class="head" colspan="2">Strength.</td>
<td class="head" rowspan="2">Percent.</td>
</tr>
<tr>
<td class="head">kg/mm</td>
<td class="head">lb/in</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hard</td>
<td>0.45</td>
<td>56.2</td>
<td>80,000</td>
<td>20</td>
</tr>
<tr>
<td>Medium</td>
<td>0.45</td>
<td>49.2</td>
<td>70,000</td>
<td>25</td>
</tr>
<tr>
<td>Sofe</td>
<td>0.45</td>
<td>42.2</td>
<td>60,000</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
행(가로)를 세로로 합치는 건 rowspan
열(세로)를 가로로 합치는 건 colspan
<thead>
<tr>
<th rowspan="2">Grade.</th>
<th rowspan="2">Point.</th>
<th colspan="2">Strength.</th>
<th rowspan="2">percent.</th>
</tr>
<tr>
<th>kg/mm</th>
<th>Ib/in</th>
</tr>
</thead>
이 부분 약간 헤맴..
12/21 완료
<table></table>
<tr></tr>
<th></th>
<td></td>
scope로 제목, 소제목처럼 다른 글자보다 크게 만들 수 있네요
근데 scope"col" 이나 scope"row"나 코드로 작성해서 실행해보면 차이는 없던데 굳이 나누는 이유를 아시는분 계실까요