HTML만 쓸 때는 테이블은 화면에 띄어줄
자료를 배치하는데 있어서 가장 중요하다고 할 수 있다.
배치를 어떻게 하느냐에 따라 화면이 깔끔해진다.
요즘에는 HTML만 쓰는 사이트는 거의 없기 때문에 잘 안쓰이긴 한다.
다음 예제를 보고 테이블의 사용법과
Style 지정을 어떻게 하는지 2가지 방법이 있는데 확인해보자
style - 각종 블록들의 속성을 선언할 때 사용하는 기능, head에 스타일 블록을 만들어 몰아서 써도 된다.
table - 표 선언
tr - 행 선언
th - 헤더, DB로 치면 컬럼을 의미
td - 필드, DB로 치면 데이터 항목들
colspan, rowspan - 셀 병합, 칸 합치기, th와 td의 속성 설정에 사용
border: 1px solid black;
border-collapse: collapse;
위의 두 줄은 스타일 블록에 사용하는데 표의 선을 생성하라는 코드이다.
만약 table, th, td를 함께 묶지 않는다면 분리되어 표시되고
첫째 줄의 black은 색상을 의미한다.
collapse는 생략
<html>
<head>
<meta charset="UTF-8">
<title>테이블</title>
<!--이 스타일을 보기 전에 아래 body 아래의 주석 처리된 table의 style을 먼저 보자-->
<style>
table{
width: 300px;
}
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- <table style="width:300px; border: 1px solid"><!--테이블 선언; 스타일 = 테이블 사이즈 조절; 테두리 줄 생성;-->
<table>
<caption>SCORE</caption><!--표 제목 선언-->
<tr><!--행(row)선언-->
<th>Firstname</th><!--헤더, (컬럼 이름)-->
<th>Lastname</th>
<th>Points</th>
</tr>
<tr><!--필드, (항목들)-->
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</body>
</html>
<!--16번째 줄의 table을 선언할 때 같이 style을 설정 할 수 있지만-->
<!--스타일을 head 안에 따로 설정하는 방법도 있다.-->
스타일은 위와같이 table 선언 시 스타일 선언을 같이하여 속성들을 부여해도 되고
처음부터 head에 부여하여 속성을 부여해도 상관없다.
table의 th, td에 colspan이나 rowspan을 설정하여 칸 병합을 할 수 있다. 아래 예제를 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>테이블</title>
<style>
table{
width: 300px;
}
table, th, td{
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<caption>9월</caption><!--표 제목 선언-->
<tr><!--행(row)선언-->
<th colspan="7"><b>9월 4주차</b></th><!--헤더, (컬럼 이름)-->
</tr>
<tr><!--필드, (항목들)-->
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</table>
<br><br/>
<br><br/>
<table>
<caption>9월</caption><!--표 제목 선언-->
<tr><!--행(row)선언-->
<th><b>주차</b></th><!--헤더, (컬럼 이름)-->
<th><b>날짜</b></th>
</tr>
<tr><!--필드, (항목들)-->
<td rowspan="8">4</td>
</tr>
<tr>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
<tr>
<td>25</td>
</tr>
<tr>
<td>26</td>
</tr>
<tr>
<td>27</td>
</tr>
</table>
</body>
</html>
rowspan과 colspan을 활용하여 병합하면 아래와 같이 표시된다.
위의 내용을 바탕으로 아래 그림의 표를 만들어보자
<html>
<head>
<meta charset="UTF-8">
<title>로그인 박스</title>
<style>
th{
width: 50px;
}
td{
width: 50px;
}
table, th, td{
border: 1px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr><!--행(row)선언-->
<th ><b>ID</b></th>
<th></th>
<th rowspan="2"></th>
</tr>
<tr><!--행(row)선언-->
<th><b>PW</b></th>
<th></th>
</tr>
<tr><!--행(row)선언-->
<th colspan="3">회원가입</th>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
td{
width: 200px;
}
</style>
</head>
<body>
<h2>회원가입</h2>
<hr/>
<table>
<tr>
<th>아이디</th>
<td></td>
</tr>
<tr>
<th>비밀번호</th>
<td></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td></td>
</tr>
<tr>
<th>이름</th>
<td></td>
</tr>
<tr>
<th>이메일</th>
<td></td>
</tr>
<tr>
<th>생년월일</th>
<td></td>
</tr>
<tr>
<th>성별</th>
<td></td>
</tr>
<tr>
<th>취미</th>
<td></td>
</tr>
<tr>
<th>나이</th>
<td></td>
</tr>
<tr>
<th>보안등급</th>
<td></td>
</tr>
</table>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-06.iframe, 다른 사이트 참조 + 예제 (0) | 2018.10.15 |
|---|---|
| [HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd) (0) | 2018.10.15 |
| [HTML]02-04.이미지, 하이퍼링크 태그(img, a) (0) | 2018.10.15 |
| [HTML]02-02. hr 태그, 01, 02의 예제, 공백 키워드 (0) | 2018.10.15 |
| [HTML]02-01.기본 뼈대, 글자 효과(title, h1~6, small, mark, b, del, ins, sub, sup, p, br 태그) (0) | 2018.10.11 |