|
<!DOCTYPE html>
<html lang="ko"></html>
<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>TEST</title>
<body>
------------------------------------------------------------
<table><!--행과 열이 있는 표를 제작한기위한 틀-->
<caption>숫자</caption><!--table의 제목-->
<tr><!--tr - x축으로 큰 틀을 만든다 (행 제작)-->
<th>【1-1】</th><!--th - tr안에 x축으로 한칸 만든다. 제목을 표시-->
<th>【2-1】</th>
<th>【3-1】</th>
<th>【4-1】</th>
</tr>
<tr>
<td>【1-2】</td><!--td - tr안에 x축으로 한칸 만든다. 내용을 표시-->
<td>【2-2】</td>
<td>【3-2】</td>
<td>【4-2】</td>
</tr>
<tr>
<td>【1-3】</td>
<td>【2-3】</td>
<td>【3-3】</td>
<td>【4-3】</td>
</tr>
<tr>
<td>【1-4】</td>
<td>【2-4】</td>
<td>【3-4】</td>
<td>【4-4】</td>
</tr>
</table><br><br>
------------------------------------------------------------
<table>
<caption>TEST</caption>
<!--table 합치는 속성
rowspan - y축으로 합친다.
colspan - x축으로 합니다.
속성값으로 현제 테이블포함해서 갯수를 넣으면 된다.-->
<tr>
<th rowspan="2">【1-1】</th> <!--1-1, 1-2를 합쳤다-->
<th colspan="2">【2-1】</th> <!--2-1, 3-2를 합쳤다-->
<th>【4-1】</th> <!--합칠때 테이블이 밀리므로-->
<!--합쳐질 테이블은 삭제한다.-->
</tr>
<tr>
<td>【2-2】</td>
<td>【3-2】</td>
<td>【4-2】</td>
</tr>
<tr>
<td>【1-3】</td>
<td>【2-3】</td>
<td>【3-3】</td>
<td>【4-3】</td>
</tr>
<tr>
<td>【1-4】</td>
<td>【2-4】</td>
<td>【3-4】</td>
<td>【4-4】</td>
</tr>
</table><br><br>
------------------------------------------------------------
<table>
<caption>행 그룹화 - 머리, 본문, 꼬리</caption>
<!--table내에 행 그룹화-->
<!--thead, tbody, tfoot 태그를 사용하여 그룹화가 가능하다.-->
<!--thead(머리글), tfoot(꼬리글)은 한 번만 사용할 수 있다.-->
<!--직접적으로 표시는 안되지만 css를 통하여 편집이 가능하다.-->
<!--table 안에서 표시 내용은 thead->tbody->tfoot 순서대로 표기된다.-->
<thead>
<tr>
<th colspan="3">테이블 행 그룹 묶기 (머리)</th>
</tr>
</thead>
<tbody>
<tr>
<td>『1-1』(본문)</td>
<td>『2-1』(본문)</td>
<td>『3-1』(본문)</td>
</tr>
</tbody>
<tfoot> <!--이렇게 tbody사이에 있어도 꼬리글이라 제일 밑에 표기가 된다.-->
<tr>
<td>■1-3■(꼬리)</td>
<td>■2-3■(꼬리)</td>
<td>■3-3■(꼬리)</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>《1-2》(본문)</td>
<td>《2-2》(본문)</td>
<td>《3-2》(본문)</td>
</tr>
</tbody>
</table><br><br>
------------------------------------------------------------
<table>
<caption>열 그룹화</caption>
<!--table내에 열 그룹화-->
<!--col - 는 하나의 열을 그룹화-->
<!--colgroup - span속성과 함께 사용 2개 이상의 열을 그룹화 한다.-->
<!--직접적으로 표시는 안되지만 css를 통하여 편집이 가능하다.-->
<col style="width:50px"> <!--1열 넓이를 50으로 설정-->
<colgroup span="2" style="width:100px"></colgroup> <!--2,3열 넓이를 100으로 설정-->
<col style="width:20px"> <!--4열 넓이를 20으로 설정-->
<!--보시는 바와 같이 1열 부터 순차적으로 적용된다.-->
<tr>
<th colspan="3">테이블 열 그룹 묶기</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>!</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>!</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>!</td>
</tr>
</table><br><br>
------------------------------------------------------------
<table>
<caption>table의 데이터를 인식하고 읽는 순서</caption>
<colgroup span="4" style="width:150px"></colgroup>
<!--scope - 순수하게 웹의 접근성 향상을 목적으로 사용하는 속성-->
<!--사용자가 오로지 귀로만 테이블의 정보를 얻어야 할 경우 사용-->
<!--제목을 나타내는 셀의 범위를 지정 (th태그에만 사용가능)-->
<!--속성값 col - 세로방향 데이터 인식▼
row - 가로방향 데이터 인식▶
병합된 셀이라면 colgroup, rowgroup 를 사용-->
<tr>
<th rowspan="2" scope="col">전체구분▼</th>
<th colspan="3" scope="colgroup">구분▼</th>
</tr>
<tr>
<th scope="col">1▼</th>
<th scope="col">2▼</th>
<th scope="col">3▼</th>
</tr>
<tr>
<th scope="row">A▶</th>
<td>A-1</td>
<td>A-2</td>
<td>A-3</td>
</tr>
<tr>
<th scope="row">B▶</th>
<td>B-1</td>
<td>B-2</td>
<td>B-3</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">C▶</th>
<td>C-1</td>
<td>C-2</td>
<td>C-3</td>
</tr>
<tr>
<td>D-1</td>
<td>D-2</td>
<td>D-3</td>
</tr>
</table>
</body>
</head>
|
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
'HTML' 카테고리의 다른 글
| <semantic tag(시맨틱 태그)> (0) | 2023.03.10 |
|---|---|
| <audio>, <video>, <source> (0) | 2023.03.09 |
| <textarea>, <select>, <option>, <optgroup> (0) | 2023.03.08 |
| <label>, <fieldset>, <legend> (0) | 2023.03.06 |
| <form>, <input>, <botton> (0) | 2023.03.06 |