Table - 3

양혜정·2024년 3월 30일

HTML/CSS/JS 실행

목록 보기

11/60

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>테이블 만들기3[정렬]</title>
<link rel="stylesheet" href="css/03_table.css">
</head>
<body>
	<div id="container">
		<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>
				
				<tr>
					<td>새우깡</td>
					<td>3,000원</td>
					<td>500</td>
				</tr>
				
				<tr>
					<td>감자깡</td>
					<td>5,000원</td>
					<td>200</td>
				</tr>
			</tbody>
		</table>
	
	</div>
</body>
</html>

CSS

@charset "UTF-8";

div#container{
	border: solid 1px gray;
	width: 40%;
	margin: 5% auto;
}

div#container > table{
	border:solid 0px #6699ff;	
	width: 100%;				/* 이것이 없으면 내용물 만큼 잡힌다. 지금 현재 100%는 화면의 40% 이다. */
	/* table 태그는 width 를 설정하지 않으면 그 기본 width 크기는 내용물 만큼 잡힌다. */
	
	border-collapse: collapse;	/* 표의 경계를 허뭄, 각 td 의 border 의 경계를 없앤다. */
}

div#container > table  th
, div#container > table  td{
	border:solid 1px #6699ff;
}

div#container > table  th{
	background-color: #ccc;
	height: 40px;
}

div#container > table  td{
	height: 25px;
}

div#container > table > tbody > tr > td:first-child
, div#container > table > tbody > tr > td:last-child{		
	text-align: center;
}

div#container > table > tbody > tr > td:nth-child(2) {
	text-align: right;
}

div#container > table > tbody > tr:last-child{
	height: 100px;
}

div#container > table > tbody > tr:last-child > td:first-child{
	text-align: left;		/* 정렬기준 가로이다. 가로기준의 정렬의 기본값은 left 이므로 text-align 설정을 안하면 left; 로 된다. */
	vertical-align: top;	/* 정렬기준 세로이다. */
}

div#container > table > tbody > tr:last-child > td:nth-child(2){
	text-align: right;		/* 정렬기준 가로이다. */
	vertical-align: middle;	/* 정렬기준 세로이다. 세로기준의 정렬의 기본값은 middle 이므로 vertical-align 설정을 안하면 middle; 로 된다. */
}

div#container > table > tbody > tr:last-child > td:last-child{
	text-align: center;		/* 정렬기준 가로이다. */
	vertical-align: bottom;	/* 정렬기준 세로이다. */
}

/* 연습
 div#container > table > tbody > tr:nth-child(2) {
	height: 150px;
}

div#container > table > tbody > tr:nth-child(2) > td:first-child {
	vertical-align: bottom;
}

div#container > table > tbody > tr:nth-child(2) > td:nth-child(2) {
	vertical-align: top;
}

div#container > table > tbody > tr:nth-child(2) > td:last-child {
	text-align: right;
	vertical-align: center;
} */

정리

ch06_table -> 03_table.html, 03_table.css

양혜정

이전 포스트

Table - 2

다음 포스트

Table - 3

HTML/CSS/JS 실행

HTML

CSS

정리

Table - 2

Table - 4

0개의 댓글

관련 채용 정보