본문 바로가기
카테고리 없음

[Day37][HTML] Table Tag

clapdev 2019. 10. 17. 17:48

회원가입 form sytle 설정

 

02.html

<style type="text/css">

	body {
		margin: 0;
		padding: 30px 0 0 0;
		font-family: Arial, "MS Trebuchet", sans-serif;
	}
	

	#container {
		width: 80%;
		margin: 0 auto;
	}
	
	label.gender , label.hobby {
		display: inline;
	}
	
	ul > li {
		margin: 0 0 10px 0;
	}
	
	ul {
		list-style-type: none;
		padding: 0;
	}
	
	ul > li > label {
		display: inline-block;
		width: 100px;
		color: navy;
		font-weight: bold;
		height: 20px;
		margin: 2px 0 0 0;
	}
	
	input.myinput {
		height: 20px;
	}
	
	select {
		width: 150px;
	}
	
	select.myselect {
		height: 25px;
	}
	
	input.btn {
		width: 100px;
		height: 40px;
		background-color: black;
		color: white;
		border: none;
		font-size: 16pt;
		margin: 20px 0 0 40px;
	}
	
	legend {
		font-size: 15pt;
	}
</style>

 

 

 

Ⅰ. Table Tag

 

1. 테이블 만들기

 

-- Folder(ch03_table)와 Html File(01) 생성

 

01.html

<body>
<table>
	<thead>
		<tr>
			<th>제품이름과 설명</th>
			<th>개당 가격</th>
			<th>박스당 개수</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>블라우스 - 붉은색 실크</td>
			<td>20,000원</td>
			<td>150</td>
		</tr>
		
		<tr>
			<td>바지 - 검은색 원단</td>
			<td>4,000원</td>
			<td>300</td>
		</tr>
	</tbody>
</table>
</body>

 

01.html

<style type="text/css">
	table, th, td {
		border: solid 1px #fcb558;
		border-collapse: collapse;
	}
</style>

 

 

 

2. 테이블 설명 캡션 넣기

 

-- Folder(ch03_table)에 Html File(02) 01.html 복사하여 생성

 

-- &lt : <

-- &gt : > 

-- caption : 테이블에 대한 설명문구

 

<table>
	<caption>&lt;Table1&gt;테이블에 대한 설명문구1</caption>
	<caption align="bottom">&lt;Table1&gt;테이블에 대한 설명문구2</caption>
</table>

 

-- thead, tbody, style은 01과 동일

 

 

 

3. 테이블 정렬

 

-- Folder(ch03_table)에 Html File(03) 02.html 복사하여 생성

 

-- align : 정렬

-- align을 사용하지 않을 시 기본값은 th는 center, td는 left

-- th는 기본적으로 font-weight: bold와 align: center가 지정되어 있다.

 

-- text-align : 가로 기준에서 왼쪽, 오른쪽, 가운데 정렬

-- vertical-align : 세로 기준에서 위, 밑, 가운데 정렬

 

 

03.html

<body>

<table>
	<caption>&lt;Table1&gt;테이블에 대한 설명문구1</caption>
	<thead>
		<tr bgcolor="#c3faba">
			<th>제품이름과 설명</th>
			<th>개당 가격</th>
			<th>박스당 개수</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="str">블라우스 - 붉은색 실크</td>
			<td class="num">20,000원</td>
			<td class="num">150</td>
		</tr>
		
		<tr>
			<td class="str">바지 - 검은색 원단</td>
			<td class="num">4,000원</td>
			<td class="num">300</td>
		</tr>
		
		<tr id="jumper">
			<td>점퍼</td>
			<td>300원</td>
			<td>500</td>
			
			<!-- style="text-align: right; vertical-align: top;"
			style="text-align: right; vertical-align: bottom;" -->
		</tr>
	</tbody>
	
</table>
</body>

 

03.html

<style type="text/css">
	table {
		border: solid 1px #fcb558;
		border-collapse: collapse;
	}
	
	th, td {
		border: solid 1px #fcb558;
		border-collapse: collapse;
		padding: 10px 30px;
	}
	
	td.str {
		text-align: center;
	}
	
	td.num {
		text-align: right;
	}
	
	tr#jumper {
		height: 100px;
		vertical-align: middle;
		text-align: center;
	}
	
</style>

 

 

 

 

문제▷▷ 아래와 같은 결과가 나오도록 정렬해 보세요.

 

 

03.html

<tr id="jumper">
	<td>점퍼</td>
	<td style="text-align: right; vertical-align: top;">300원</td>
	<td style="text-align: right; vertical-align: bottom;">500</td>
</tr>

 

 

 

 

4. col group

 

-- Folder(ch03_table)에 Html File(04) 03.html 복사하여 생성

 

04.html

<body>

<table>
	<colgroup span="1" bgcolor="gold">

	<colgroup span="2" bgcolor="#ffb3b3">
	
	<caption>&lt;Table1&gt;테이블에 대한 설명문구1</caption>
	<thead>
		<tr bgcolor="#c3faba">
			<th>제품이름과 설명</th>
			<th>개당 가격</th>
			<th>박스당 개수</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="str">블라우스 - 붉은색 실크</td>
			<td class="num">20,000원</td>
			<td class="num">150</td>
		</tr>
		
		<tr>
			<td class="str">바지 - 검은색 원단</td>
			<td class="num">4,000원</td>
			<td class="num">300</td>
		</tr>
		
		<tr>
			<td class="str">점퍼</td>
			<td class="num">3,000원</td>
			<td class="num">500</td>
			
		</tr>
	</tbody>
	
</table>

</body>

 

 

-- colgroup 또는 줄여서 col이라고 사용할 수 있음, span="숫자" 이때 숫자는 묶어줄 열의 개수를 말한다.

-- span에 처음으로 숫자를 주었는데 그 숫자가 1이므로 첫번째 열을 그룹으로 묶겠다는 뜻이고, span에 숫자를 2를 주면 그 다음의 컬럼부터 2개 컬럼인 두번째 열과 세번째 열을 그룹으로 묶겠다는 뜻이다.

 

 

 

5. 열병합, 행병합, :first-child, :last-child, ~, +

 

-- Folder(ch03_table)에 Html File(05) 04.html 복사하여 생성

 

<body>

<table>
		<tr bgcolor="#c3faba">
			<th>가을맞이 바겐세일</th>
			<th>제품이름과 설명</th>
			<th>개당 가격</th>
			<th>박스당 개수</th>
		</tr>
        
		<tr>
			<td class="str">블라우스 - 붉은색 실크</td>
			<td class="num">20,000원</td>
			<td class="num">150</td>
		</tr>
		
		<tr>
			<td class="str">바지 - 검은색 원단</td>
			<td class="num">4,000원</td>
			<td class="num">300</td>
		</tr>
		
		<tr id="sum">
			<td>총액</td>
			<td>24,000원</td>
			<td>450</td>
			
		</tr>
</table>
</body>

 

 

 

-- rowspan : 행병합

 

05.html

<th rowspan="3">가을맞이 바겐세일</th>

 

 

 

-- colspan : 열병합

 

05.html

<td colspan="2">총액</td>

 

 

 

05.html

<tr>
	<th rowspan="3" id="titleFirst">가을맞이 바겐세일</th>
	<th>제품이름과 설명</th>
	<th>개당 가격</th>
	<th>박스당 개수</th>
</tr>

 

05.html

th#titleFirst ~ th {
	background-color: yellow;
}

 

 

-- 선택자1(th#titleFirst) ~ 선택자2(th) 
: 선택자1(th#titleFirst) 다음에 오는 모든 형제태그(형제노드) 중에 선택자2(th) 모두를 말한다.

 

 

05.html

tr#sum {
	background-color: #ccc;
}
	
tr#sum td:first-child{
	text-align: center;
}

 

 

 

05.html

tr#sum td:last-child{
	text-align: right;
	color: red;
}

 

 

-- 선택자:first-child : 선택되어진 선택자 중 첫 번째를 말한다.

-- 선택자:last-child 선택되어진 선택자 중 마지막 번째를 말한다.

 

 

 

tr#sum td:first-child + td {
	background-color: pink;
}

 

 

-- 선택자1 + 선택자2 : 선택자1 다음에 오는 모든 형제태그(형제노드) 중에 해당하는 첫 번째를 말한다.

 

6. thead, tbody, tfoot

 

-- Folder(ch03_table)에 Html File(06) 05.html 복사하여 생성

 

06.html

<body>

<table>
		<thead>
		<tr bgcolor="#c3faba">
			<th>제품이름과 설명</th>
			<th>개당 가격</th>
			<th>박스당 개수</th>
		</tr>
		</thead>
	
		<tbody>
		<tr>
			<td class="str">블라우스 - 붉은색 실크</td>
			<td class="num">20,000원</td>
			<td class="num">150</td>
		</tr>
		
		<tr>
			<td class="str">바지 - 검은색 원단</td>
			<td class="num">4,000원</td>
			<td class="num">300</td>
		</tr>
		</tbody>
		
		<tfoot>
		<tr id="sum">
			<td colspan="2" class="str">총박스개수</td>
			<td class="num">450</td>
		</tr>
		</tfoot>
	
</table>

</body>

 

<style type="text/css">
	table {
		border: solid 1px #fcb558;
		border-collapse: collapse;
	}
	
	th, td {
		border: solid 1px #fcb558;
		border-collapse: collapse;
		padding: 10px 30px;
	}
	
	td.str {
		text-align: center;
	}
	
	td.num {
		text-align: right;
	}
</style>

 

 

-- thead 태그와 tfoot 태그는 테이블에서 오로지 1번만 사용한다.
-- thead : 표의 타이틀 용도
-- tfoot : 표의 마지막에 요약데이터나 총계 등을 보여주는 용도
-- tbody : 표의 데이터를 표시하는 용도

 

 

티스토리툴바