[HTML] 테이블 태그
2023. 3. 7. 23:51ㆍ기술 창고/HTML
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>테이블 태그</title>
<style>
table{
border-collapse: collapse;
}
.col1{
width: 80px;
}
.col2{
width: 300px;
}
</style>
</head>
<body>
<h1>테이블 태그</h1>
<table border="1">
<caption>
<H2>테이블 제목</H2>
<p>테이블 설명 기술</p>
</caption>
<colgroup>
<col class="col1">
<col class="col2">
<col class="col1">
<col class="col1">
</colgroup>
<thead>
<tr> <!-- table row -->
<th scope="col">구분</th> <!-- table data -->
<th scope="col">제목1</th>
<th scope="col">제목2</th>
<th scope="col">제목3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>data11</td>
<td>data12</td>
<td>data13</td>
</tr>
<tr>
<th scope="row">2</th>
<td>data21</td>
<td>data22</td>
<td>data23</td>
</tr>
<tr>
<th scope="row">3</th>
<td>data31</td>
<td>data32</td>
<td>data33</td>
</tr>
<tr>
<th scope="row">4</th>
<td>data41</td>
<td>data42</td>
<td>data43</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">합계</th>
<td>total1</td>
<td>total2</td>
<td>total3</td>
</tr>
</tfoot>
</table>
<hr>
<table border="1">
<caption>
<H2>테이블 제목</H2>
<p>테이블 설명 기술</p>
</caption>
<thead>
<tr> <!-- table row -->
<th scope="col">구분</th> <!-- table data -->
<th scope="col">제목1</th>
<th scope="col">제목2</th>
<th scope="col">제목3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>data11</td>
<td colspan="2">data12</td>
<!-- <td>data13</td> -->
</tr>
<tr>
<th scope="row">2</th>
<td>data21</td>
<td rowspan="3">data22</td>
<td>data23</td>
</tr>
<tr>
<th scope="row">3</th>
<td>data31</td>
<!-- <td>data32</td> -->
<td>data33</td>
</tr>
<tr>
<th scope="row">4</th>
<td>data41</td>
<!-- <td>data42</td> -->
<td>data43</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">합계</th>
<td>total1</td>
<td>total2</td>
<td>total3</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!--
# 표 형식의 데이터를 만들 수 있는 테이블 요소
# 테이블 테두리를 겹치게 한줄로 나타내는 style :
table{
border-collapse: collapse;
}
# 테두리 선 굵기 : border="1"
# <thead> : 테이블의 헤드, 테이블을 대표하는 컬럼 값
# <th> : 테이블에서 강조할 대표 셀들
# <tbody> : 테이블의 나머지 내용 셀들
# <tfoot> : 테이블의 가장 최하단 셀들
# scope 속성 : row일 경우 행을 대표하는 값으로 지정, col일 경우 열을 대표하는 값으로 지정
# colspan 속성 : 열끼리 합치는 속성. 2로 지정하면 2개의 열이 합쳐진다.
# rowspan 속성 : 행끼리 합치는 속성. 3으로 지정하면 3개의 row가 합쳐진다.
# 테이블 열의 넓이를 늘리거나 줄이는 동작은 굳이 해당 td 태그에 width 속성을 넣어서 하지않는다.
css로 관리한다.
# <colgroup>
<col class="col1">
<col class="col2">
<col class="col1">
<col class="col1">
</colgroup>
열 그룹을 만들어내는 태그.
#
.col1{
width: 80px;
}
.col2{
width: 300px;
}
. 기호는 클래스를 의미한다. 즉, col1 과 col2라는 값을 가진 class의 넓이를 80px 과 300px 로 적용하겠다는 의미이다.
-->- <table> : 테이블을 생성하기 위한 태그.
- <tr> : 테이블의 행을 생성하는 태그.
- <td> : 생성한 테이블의 행에서 셀 값들을 생성하는 태그.
- <th> : 생성한 셀 값을 강조하여 생성하는 태그.
- scope 속성 : col을 부여하면 열을 대표하는 셀이라고 지정한다. row를 부여하면 행을 대표하는 셀이라고 지정한다.
- <thead> : 테이블의 최상단에 존재하는 대표 컬럼들을 지정하는 태그.
- <tbody> : 테이블의 중간 부분 내용들을 지정하는 태그.
- <tfoot> : 테이블의 최하단에 존재하는 컬럼들을 지정하는 태그.
- colspan 속성 : 열끼리 합치고자 하는 속성. colspan="2" 로 지정하면 현재의 셀과 같은 열에 있는 다음 셀 2개를 합친다. 이 때 다음 셀은 없애거나 주석처리를 한다.
- rowspan 속성 : 행끼리 합치고자 하는 속성. rowspan="2" 로 지정하면 현재의 셀과 같은 행에 있는 다음 셀 2개를 합친다. 마찬가지로 다음 셀은 없애거나 주석처리를 한다.
- border 속성 : 테두리를 지정하는 속성. border="1" 로 지정하면 1의 굵기를 가진 테두리가 적용된다.
- <style> : 스타일 설정을 할 수 있는 태그. 이후에 css가 적용이 될 때 자주 사용될 것이다.
- table{
border-collapse: collapse;
}
table 태그로 생성된 테이블의 테두리 (border)를 합쳐서 한 줄로 만들겠다는 스타일 설정. - .col1{
width: 80px;
}
.col2{
width: 300px;
}
col1 이라는 class 속성을 가진 태그의 넓이를 80px, col2 라는 class 속성을 가진 태그의 넓이를 300px 로 지정하겠다는 스타일 설정. - <colgroup> : 열 그룹을 생성하는 태그.
- <col> : 임의의 열을 생성하는 태그.
- class 속성 : 스타일에서 구분할 수 있는 속성 값
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] anchor 태그 이동 경로 설정 파악 (0) | 2023.03.09 |
|---|---|
| [HTML] anchor 태그 (0) | 2023.03.09 |
| [HTML] list 목록 태그 (0) | 2023.03.07 |
| Visual Code 설치와 초기 html 작성 (0) | 2023.03.07 |
| [HTML] 정형화된 텍스트 (0) | 2023.03.07 |