반응형 웹 실전 프로젝트 #7 (표관련요소 및 속성)
HTML, CSS 2020. 7. 17. 14:44반응형 웹 실전 프로젝트 #7 (표관련요소 및 속성)
요소유형: 블록레벨
태그명 : <table></table>
의미및 특징 :
표를 정의할때 사용하는 태그이다
행(row) 열(column)의 2차원 정보로 구성되어 있다
자식요소로 반드시 <tr> 태그를 정해줘야 하며 <table> → <tr> → <td> 순으로 마크업 해야 한다
<tr>태그는 <table> 태그의 자식 요소로 표에서 행(Row)를 정의 할때 사용하는 태그다
<td> 태그는 <tr>태그의 자식요소로 표에서 열(Column)을 정의 할때 사용하는 태그다
<th> 태그는 제목 역할을 하는 셀을 정의 할때 사용하는 태그다
표의 내용을 기준으로 제목 영역 <thead>
본문 영역 <tbody>
열의 요약 영역 <tfoot>으로 구분하여 정의 할수 있다
표는 <tr>태그처럼 <td>나 <th>태그들을 가로로 묶는 행(Row)그룹은 있지만
세로로 묶는 열 (Column)그룹은 없다
이런 열 (Column)들을 그룹으로 지정할대는 <colgroup>, <col> 태그로 정의 하여 사용할수 있다
먼저 표와 행과 열을 만들어 보자
표의 모양을 표현 하기 위해 CSS를 사용해보자
<table> 요소와 <td> 요소에 적용된 CSS내용은 다음과 같다
| width: 100% | 표의 가로 길이를 100%로 표현 |
| corder-collapse: collapse | <td>요소들의 좌, 우, 위, 아래 테두리 선이 서로 겹쳤을때 하나의 테두리선으로 표현 |
| border: 1px solid #000 | <td>요소에 1px테두리 선을 표현 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
<td>교과목</td>
<td>점수</td>
</tr>
<tr>
<td>HTML</td>
<td>93</td>
</tr>
<tr>
<td>CSS</td>
<td>92</td>
</tr>
<tr>
<td>평균</td>
<td>92.5</td>
</tr>
</table>
</body>
</html>
|
cs |
표의 내용을 기준으로 <thead>, <tbody>, <tfloot> 태그들을 추가 해보자
<td> 태그들중 제목역할을 하는 셀의 경우 <th>로 바꾸어 마크업 해주자
<th>태그가 추가 되므로 CSS도 조금 바꿔야 한다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>교과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<th>HTML</th>
<td>93</td>
</tr>
<tr>
<th>CSS</th>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>평균</th>
<td>92.5</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
cs |
모든 표들이 <thead>, <tbody>, <tfoot>으로 되어 있지는 않다
<tfoot>가 없는 경우도 있고 심지어 <tbody>만 있는 표도 있다
표의 디자인을 보고 상황에 맞춰 태그를 정의 하면 된다
다음은 <colgoup>, <col> 태그를 이용하여 각각 그룹 열로 마크업 해보자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
.c1 {
background: #ff0;
}
.c2 {
background: #0ff;
}
</style>
</head>
<body>
<table>
<colgroup>
<col class="c1">
<col class="c2">
</colgroup>
<thead>
<tr>
<th>교과목</th>
<th>점수</th>
</tr>
</thead>
<tbody>
<tr>
<th>HTML</th>
<td>93</td>
</tr>
<tr>
<th>CSS</th>
<td>92</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>평균</th>
<td>92.5</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
cs |
셀 합치기 colspan 속성, rowspan 속성
colspan, rowspan은 셀들 <td>, <th> 을 열이나 행으로 합칠수 있는 속성이다
| 속성 | 설명 |
| colspan | 합치기 될 열(Column)의 수를 지정 만약 3개의 열을 합친다면 <td colspan="3">으로 정의 |
| rowspan | 합치기 될 행(Row)의 수를 지정 만약 2개의 행을 합친다면 <td rowspan="2">로 정의 |
colspan, rowspan속성을 이용해서 두 표를 만들어 보자
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>셀 합치기</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
td {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="3">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
|
cs |
표 접근성 <caption>, scope속성
| 태그명/속성명 | 태그/속성 설명 |
| <caption></caption> | 표의 제목을 정의 할때 사용 <caption>태그를 정의해주면 스크린 리더에서 표에 대한 제목을 읽어준다 어떤 내용을 담고 있는지 알수 있다 |
| scope | 열(Column)제목이나 행(Row)제목 셀 <th>에 정의 열(Column)의 제목일 경우 <th scope="col">로 정의 하며, 행(Row)의 제목일경우 <th scope="row">로 정의 |
상품에 따른 상하반기 판매량
| 구분 | 데스크탑PC | 스마트폰 |
| 상반기 판매수 | 2만대 | 5만대 |
| 하반기 판매수 | 3만대 | 7만대 |
scope속성은 스크린 리더의 번호처럼 셀의 위치가 변경되었을때 행(Row)이나 열(Column)의 제목 셀을 읽어 줌으로써 현재 셀의 내용이 무엇인지 알려준다
예를들어 셀의 위치가 1번에서 2번으로 이동 되었을때 '이만대'라고 읽어주는것이 아니라 '데스크탑PC이만대'라고 읽어 주고 2번에서 3번으로 이동되었을때 '하반기 판매수 삼만대'로 읽어 준다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>caption태그와 scope속성</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td,
th {
border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<caption>상품에 따른 상하반기 판매량</caption>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th scope="col">구분</th>
<th scope="col">데스크탑 PC</th>
<th scope="col">스마트폰</th>
</tr>
</thead>
<tbody>
<tr>
<th>상반기 판매수</th>
<td>2만대</td>
<td>5만대</td>
</tr>
<tr>
<th>하반기 판매수</th>
<td>3만대</td>
<td>7만대</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
'HTML, CSS' 카테고리의 다른 글
| 반응형 웹 실전 프로젝트 #9 (그룹요소) (0) | 2020.07.17 |
|---|---|
| 반응형 웹 실전 프로젝트 #8 (폼 관련요소 및 속성) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #6 (목록관련요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #5 (텍스트 관련요소) (0) | 2020.07.17 |
| 반응형 웹 실전 프로젝트 #3 ~ #4 (블록 레벨요소와 인라인요소, 기본요소) (0) | 2020.07.16 |