반응형
테이블 관련 태그
★ 웹 페이지에 표를 그리는 태그
☆ <table>, <tr>, <th>, <td>
☆ 시맨틱 태그 - <thead>, <tbody>, <tfoot>
-> 테이블의 컬럼 제목, 내용, 추가 보조 내용(꼬리말) 등으로
영역을 구분하여 셀(행)을 그룹화하는 태그.
○ <tr> : 행을 생성하는 태그. 볼드체, 기운데 정렬
○ <th> : 셀(컬럼) 제목 태그. 왼쪽 정렬
○ 테두리 그리기 : border 속성. 테이블 경계와 셀 경계가 따로 분리됨.
○ style 속성을 사용하여 다양한 효과를 줄 수 있음.
★ 주로 사용하는 style 설정
☆ border: 두께 선모양 색상; -> 두께는 pixel 단위. 예) 1px
☆ border-collapse: 경계의 모양;
->분리된 모양 - separate
->합쳐진 모양 - collapse
☆ background: 컬러; -> 테이블이나 셀의 배경색 변경
☆ color: 컬러; -> 글자색 변경
★ <caption> : 표 제목 삽입 태그
☆ 셀 병합 속성
1) rowspan : 셀을 세로로 병합.
2) colspan : 셀을 세로로 병합.
table_exam.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 만들기</title>
<!-- css 할때 다시 배울 것 입니다.collapse: 테두리선 하나, separate: 테두리선 두개 -->
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align: center;
}
tr {
height: 40px;
}
</style>
</head>
<body>
<h3>기본 표</h3>
<!-- width: 100% 퍼센트도 가능 -->
<table style="width: 300px;">
<!-- caption 태그는 table 마지막에 코드를 작성해도 테이블 상단에 표시된다 -->
<caption>[표1] 기본 형식의 표 작성</caption>
<tr style="height: 10px;">
<th>번호</th>
<th style="width: 200px;">이름</th>
<th>나이</th>
</tr>
<tr>
<td style="text-align: left;">1</td>
<td>아무개</td>
<td>24</td>
</tr>
<tr>
<td>2</td>
<td>홍길동</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>전우치</td>
<td>32</td>
</tr>
<tr>
<td style="text-align: right;">4</td>
<td>강현수</td>
<td>38</td>
</tr>
</table>
<hr><!-- 분리선을 그리는 태그(블록태그) -->
<h3>행, 열 통합 테이블</h3>
<table style="width: 100%; border: dotted;">
<tr>
<th style="background: yellow;">1행</th>
<td colspan="2">1행 열통합</td>
</tr>
<tr style="background: red;">
<th rowspan="2">2, 3행 행통합</th>
<td colspan="2">2행 열통합</td>
</tr>
<tr style="background: green;">
<td>3행 1열</td>
<td>3행 2열</td>
</tr>
</table>
</body>
</html>반응형