📝 표 관련 태그
💡 table
- 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함
- table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함
💡 tr
Table Row의 약자로 한 행을 나타내는 태그
💡 td
Table Data의 약자로 한 행의 한 컬럼(==셀)을 나타내는 태그
💡 th
Table Header의 약자로 컬럼명을 표시하는 용도의 태그
-> 기본 성질은 td 태그와 같으나 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐
💡 caption
테이블의 제목이나 설명 내용을 추가하는 태그
💡 rowspan
행 (상하)병합
💡 colspan
열 (좌우)병합
-> td 또는 th 태그에 작성하는 속성
💡 width
폭/너비
💡 height
높이
💡 테이블 구조 설정 태그
- thead : 테이블의 상단 부분 영역 (컬럼명)
- tbody : 테이블의 중단 부분 영역 (실제 값, 내용)
- tfoot : 테이블의 하단 부분 영역 (합계)
✏️ 코드로 알아보기
<!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>04_표 관련 태그</title>
<!-- HTML 문서의 스타일(크기, 색상, 모양 등)을 지정하는 태그 == CSS -->
<style>
.tb3{
border: 2px solid black;
border-collapse: collapse;
}
.tb3 th, td{
border: 1px solid black;
}
.tb3 thead{
background-color: yellowgreen;
}
.tb3 tbody{
background-color: yellow;
}
.tb3 tfoot{
background-color: orange;
color : white;
}
</style>
</head>
<body>
<h1>04_표 관련 태그</h1>
<pre>
<h3>table 태그</h3>
- 웹 문서에서 자료 정리를 위해 주로 사용하는 태그
- 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함
- table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함
</pre>
<pre>
<h3>tr 태그</h3>
- Table Row의 약자로 한 행을 나타내는 태그
</pre>
<pre>
<h3>td 태그</h3>
- table Data의 약자로 한 행의 한 컬럼(==셀)을 나타내는 태그
</pre>
<pre>
<h3>th 태그</h3>
- Table Header의 약자로 컬럼명을 표시하는 용도의 태그
- 기본 성질은 td 태그와 같으나
추가적으로 굵은 글씨, 가운데 정렬이 이루어짐
</pre>
<pre>
<h3>caption 태그</h3>
- 테이블의 제목이나 설명 내용을 추가하는 태그
</pre>
<!-- boarder="1" : table, td 태그에 1px짜리 검정색 테두리 추가 -->
<table border="1">
<caption>
<strong style="color:plum">웹 브라우저의 종류</strong>
</caption>
<tr> <!-- 1행 -->
<th>브라우저</th> <!-- 1행 1열 -->
<th>제조사</th> <!-- 1행 2열 -->
<th>제조사 홈페이지</th> <!-- 1행 3열 -->
</tr>
<tr> <!-- 2행 -->
<td>크롬</td> <!-- 2행 1열 -->
<td>Google</td> <!-- 2행 2열 -->
<td>https://www.google.com</td> <!-- 2행 3열 -->
</tr>
<tr> <!-- 3행 -->
<td>엣지</td> <!-- 3행 1열 -->
<td>MS</td> <!-- 3행 2열 -->
<td>https://www.microsoft.com</td> <!-- 3행 3열 -->
</tr>
<tr> <!-- 4행 -->
<td>파이어폭스</td> <!-- 4행 1열 -->
<td>Mozilla</td> <!-- 4행 2열 -->
<td>https://www.mozilla.com</td> <!-- 4행 3열 -->
</tr>
</table>
<hr>
<h2>행 병합(rowspan), 열 병합(colspan)</h2>
<pre>
td 또는 th 태그에 작성하는 속성
rowspan : 행 (상하)병합
colspan : 열 (좌우)병합
</pre>
<h3>회원 정보</h3>
<!-- width(폭/너비) , height(높이) -->
<table border="1">
<tr> <!-- 1 -->
<th width="70px">이름</th>
<td width="210px"></td>
<th width="140px" height="140px" rowspan="2">사진</th>
</tr>
<tr> <!-- 2 -->
<th>연락처</th>
<td></td>
</tr>
<tr> <!-- 3 -->
<th height="35px">주소</th>
<td colspan="2"></td>
</tr>
<tr> <!-- 4 -->
<th height="140px">자기소개</th>
<td colspan="2"></td>
</tr>
</table>
<h2>테이블 구조 설정 태그</h2>
<pre>
thead : 테이블의 상단 부분 영역 (컬럼명)
tbody : 테이블의 중단 부분 영역 (실제 값, 내용)
tfoot : 테이블의 하단 부분 영역 (합계)
</pre>
<table class="tb3">
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>20</td>
<td>서울시 구로구</td>
</tr>
<tr>
<td>김지석</td>
<td>30</td>
<td>서울시 금천구</td>
</tr>
<tr>
<td>박영희</td>
<td>25</td>
<td>경기도 부천시</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">총인원</th>
<th>3명</th>
</tr>
</tfoot>
</table>
</body>
</html>출력 화면
✏️ 표 연습 문제
<!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>표 연습문제</title>
<style>
thead {
background-color: aqua;
}
tbody {
background-color: orange;
}
tfoot {
background-color: yellow;
}
tbody th,
tfoot th {
background-color: orangered;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="5">하수정 컬렉션</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="5">제품리스트</th>
<th>코드</th>
<th>분류</th>
<th>가격</th>
<th>구매가능개수</th>
</tr>
<tr>
<td>01-468</td>
<td>가을</td>
<td>200,000원</td>
<td>1068</td>
</tr>
<tr>
<td>01-469</td>
<td>가을</td>
<td>150,000원</td>
<td>1700</td>
</tr>
<tr>
<td>01-470</td>
<td>여름</td>
<td>950,000원</td>
<td>2500</td>
</tr>
<tr>
<td>01-471</td>
<td>봄</td>
<td>120,000원</td>
<td>3200</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3">총합</th>
<td>1,420,000원</td>
<td>8468</td>
</tr>
</tfoot>
</table>
</body>
</html>출력 화면
풀스택 개발자 기록집 📁