6_[html]표를 작성하는 태그
표를 작성하는 태그
Overview
<table>
<caption>Fruits</caption>
<colgroup>
<col span="2" style="background-color: yellowgreen;">
<col style="background-color: tomato;">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>F123A</td>
<td>Apple</td>
<td>$22</td>
</tr>
<tr>
<td>F098B</td>
<td>Banana</td>
<td>$19</td>
</tr>
</tbody>
</table>
Example from: Heropy님
알 수 있는 것은 아래와 같다
- colgroup : 열에 대한 속성을 지정 -이 colgroup 내부의 속성으로 span을 이용하면 위와 같이 특정 열에 대한 스타일링을 구분하여 작성 가능
- 구조 상 테이블은 -thead : 헤더부분 -tbody: 표 내용 부분 -tfoot : tbody와 비슷해보이지만, 표의 최하단 행을 채우는 부분 임을 추측해볼 수 있다!
- tr 은 테이블의 행을, td는 tr로 둘러싸인 해당 행의 열을 의미!
- caption은 표의 제목을 의미
- table, tr, th, td 태그
table{display:table;}/*display: table-->
완벽하게 동일하지는 않지만, 기본적으로 블럭요소와
유사한 특성을 지님*/
tr{display:table-row;}
th, td{display:table-cell;}
-
: 테이블 골격! 틀!
-
: 테이블의 헤더 -
: 테이블의 행 -
: 테이블의 행에 대한 열!(th도 어떻게 보면 열을 만든다고 생각해도 되지만, 헤더로써의 의미가 존재!) - 표에 대해서는 display에 대한 스타일을 바꾸는 일은 없을 것
⚠️ css에서 스타일링할 때, 부모요소가 자식요소보다 앞에 와서, 유지보수의 효율성을 올리자! ⚠️
🍑 표 사이의 border 간의 간격을 없애려면 border-collapse를 이용하자!
border-collapse:collapse;
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<link rel="stylesheet" href="./table1.css">
</head>
<body>
<table>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
</tr>
</table>
</body>
</html>
table{
border-collapse: collapse;
}
td{
border: 1px solid teal;
}
다만, 만약, 어떠한 타입과 값으로 된 경우, 의미상으로
타입과 값에 대한 알림이 헤더로써 명시될 필요가 있을 것이다! 바로 아래처럼 말이다!
<!DOCTYPE html>
<html lang="ko">
<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>Document</title>
<link rel="stylesheet" href="./table1.css">
</head>
<body>
<table>
<tr>
<th>타입</th>
<th>값</th>
</tr>
<tr>
<td>알파벳</td>
<td>A</td>
</tr>
<tr>
<td>숫자</td>
<td>7</td>
</tr>
</table>
</body>
</html>
th tag
(참고로, 테두리로 확인을 해보고 싶어서, 위에 th 태그선택자에 대한 스타일링을 추가해주었습니다!)
⚠️ 행이 먼저 오고! 그 다음은 열을 만들기! ⚠️
🍑 th 태그의 속성 🍑
*scope 속성은 머릿글이 왼쪽에 있는 경우 등에 사용하기 적합함!
⚠️ id 이름은 일반적이지 않은 이름으로 지어주자!
-headers 속성과 scope 속성이 다소 어려워서 확인하기!
- scope: th 태그가 열을 대상으로 적용되는지 어디로 적용되는지 지정하는 것
- headers: 상위 헤더가 있다면, 그 상위 헤더의 id에 연결시킴으로써 의미적 종속을 명시해줌
<table>
<tr>
<th colspan="2" **id="th-data"**>데이터</th>
</tr>
<tr>
<th abbr="type" scope="col" **headers="th-data"**>타입</th>
<th abbr="value" scope="col" **headers="th-data"**>값</th>
</tr>
<tr>
<td>알파벳</td>
<td>A</td>
</tr>
<tr>
<td>숫자</td>
<td>7</td>
</tr>
</table>
⚠️테이블 태그를 이용해서 레이아웃을 잡지 말기!(옛날에 css가 보편화되기 전에는 레이아웃을 잡기위해 사용하곤 했음)
🍑td 태그의 속성🍑
이번에는 헤더가 왼쪽에 있는 경우로 연습해보자
<table>
<tr>
<th rowspan="2" id="th-header2">데이터</th>
<th headers="th-header2" **id="th-type"**>타입</th>
<td **headers="th-type"**>알파벳</td>
<td **headers="th-type"**>숫자</td>
</tr>
<tr>
<th headers="th-header2" **id="th-value"**>값</th>
<td **headers="th-value"**>A</td>
<td **headers="th-value"**> 7</td>
</tr>
</table>
이런 경우, 왼쪽에 2행이 통합된 헤더 “데이터”와 그 오른쪽에 헤더 “타입”과
헤더 “값”이 나타날 것이다. 그리고 headers는 th태그에 있는 id로 묶어줄 수 있으므로, 위와 같이 기입해줄 수 있다! 그러면 결과적으로 아래와 같은 표가 만들어진다!
- 표의 시각적 표현에만 집중한다면 굳이 headers 속성을 이용할 필요는 없음
- caption 태그
- 표의 제목을 설정
- table 1개당 caption 최대 1개 사용 가능
- 열리는 table 태그 바로 다음에 작성해야 함
<table>
<caption>데이터 타입과 값</caption>
<tr>
<th rowspan="2" id="th-header2">데이터</th>
<th headers="th-header2" id="th-type">타입</th>
<td headers="th-type">알파벳</td>
<td headers="th-type">숫자</td>
</tr>
<tr>
<th headers="th-header2" id="th-value">값</th>
<td headers="th-value">A</td>
<td headers="th-value">7</td>
</tr>
</table>
위와 같이 테이블에 캡션을 달면 표의 윗부분에 표 제목이 가운데 정렬으로 들어감을 확인해볼 수 있다
- colgroup, col 태그
- col: 표의 열들을 공통적으로 정의
- colgroup: 표의 열들을 공통적으로 정의한 집합체
- 속성 : span - 연속되는 열 수(기본값 1)
colgroup{display: table-column-group;}
col{display: table-column;}
*참고로, 나중에 display:table; 은 많이 다루어지겠지만, 그 외의 table-column 등은 많이 등장하지 않음! 이부분 주의!
- colgroup은 특정열에 대해서 모든 행에 걸쳐 스타일을 일괄 적용할 때, 번거로움을 감소시켜줄 수 있음!(colgroup이 없다면 th 태그에만 스타일이 적용되므로 해당 th태그에 매치되는 td 태그에도 스타일을 적용해주어야 함) -단, 기존 th 태그에 css가 적용되어 있다면 th 태그에 스타일 적용이 어려움
- caption 태그 밑, 첫번째 tr 태그 윗부분에 적어주기!
- 열 1개에 대해서만 적용한다면 col, 2개 이상은 col과 colgroup 태그를 이용해주기!
아래의 예제를 확인해보고 넘어가자
<table>
<caption>데이터 타입과 값</caption>
<colgroup>
<col span="1" style="background-color: tomato;">
<col span="2" style="background-color: yellow;">
</colgroup>
<tr>
<th></th>
<th>타입</th>
<th>값</th>
</tr>
<tr>
<td>1</td>
<td>알파벳</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>숫자</td>
<td>7</td>
</tr>
</table>
- 한가지 확인, 주의할 점은 span을 통해서 연속한 x 개의 컬럼에 대해서 스타일을 적용해줄 수 있다는 것이다!
- thead, tbody, tfoot
- thead : 표의 머리글
- tbody: 표의 본문
- tfoot: 표의 머릿글
- 기본적으로 테이블의 레이아웃에 영향 ❌
<table>
<caption>Fruits</caption>
<colgroup>
<col span="2" style="background-color: yellowgreen;">
<col style="background-color: tomato;">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>F123A</td>
<td>Apple</td>
<td>$22</td>
</tr>
<tr>
<td>F098B</td>
<td>Banana</td>
<td>$19</td>
</tr>
</tbody>
<tfoot>
<td colspan="2">Total</td>
<td>$41</td>
</tfoot>
</table>
thead, tbody, tfoot
- 간단하게, thead는 의미상 헤더부분영역을 강조한다고 생각해볼 수 있다! -즉, th 태그 부분을 둘러싸서 표시해줄 수 있음!
- tfoot은 표의 최하단 부분을 의미한다고 생각해보면 됨!
-그 외에 tfoot과 tbody는 데이터를 다룬다는 점에서 차이는 보이지 않음