HTML 표

HTML

by 기련이 2020. 5. 18. 18:09

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 너비 설정</title>
<style type="text/css">
	td, th{
		border: 1px solid black;
	}
	#tb1 {
		border: 2px solid red;
		table-layout: auto;
	}
	#tb2 {
		border: 3px solid red;
		table-layout: fixed;
	}
</style>
</head>
<body>
 <h3>table-layout auto</h3>
 <table id="tb1">
 	<tr>
 		<th>table-layout fixed</th>
 		<td>내용 분량에 따라 자동으로 조절</td>
 	</tr>
 </table>
</body>
</html>

table-layout 속성
셀의 너비를 조절하는 속성 : auto, fixed
(기타 : initial, inherit)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 테두리 처리</title>
<style type="text/css">
td, th {
	border: 2px solid black;
}
#tb1{
	border: 3px solid red;
	border-collapse: separate;
}
#tb2{
	border: 3px solid red;
	border-collapse: collapse;
}
#tb3{
	border: 2px solid green;
	border-spacing: 10px; /* 상하 좌우 */
}
#tb4{
	border: 2px solid maroon;
	border-spacing: 20px 40px; /* 좌우 상하 */
}
</style>
</head>
<body>
<table id="tb1" width="250px">
	<tr>
		<th>table-collapse</th>
		<td>separate 적용</td>
	</tr>
</table>
<p/>
<table id="tb2" width="250px">
	<tr>
		<th>table-collapse</th>
		<td>collapse 적용</td>
	</tr>
</table>
<p/>
<table id="tb3" width="250px">
	<tr>
		<th>table-spacing</th>
		<td>10px</td>
	</tr>
</table>
<p/>
<table id="tb4" width="250px">
	<tr>
		<th>table-spacing</th>
		<td>20px 40px</td>
	</tr>
</table>
<p/>
</body>
</html>

table-collapse 속성
표와 셀 테두리를 별개로 처리할 지,
하나로 처리할 지에 대한 설정.

table-spacing 속성
separate된 공간을 설정하는 속성.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 꾸미기</title>
<style type="text/css">
table, th, td {
	border: 1px solid black;
}
table {
	width: 100%;
	border-collapse: collapse;
}
/*셀별 세로 길이 지정 */
th {
	height: 50px;
}
td{
	text-align: center;/* 수평 정렬*/
	height: 30px;
	vertical-align: bottom;/*수직 정렬 (가운데정렬시 입력하지않으면됨)*/
	padding: 10px;/* 안쪽 여백 */
}
</style>
</head>
<body>
<table>
	<tr>
		<th>성</th>
		<th>이름</th>
		<th>적립금</th>
	</tr>
	<tr>
		<td>김</td>
		<td>철수</td>
		<td>100원</td>
	</tr>
	<tr>
		<td>김</td>
		<td>철수</td>
		<td>150원</td>
	</tr>
	<tr>
		<td>홍</td>
		<td>길동</td>
		<td>300원</td>
	</tr>
	<tr>
		<td>전</td>
		<td>우치</td>
		<td>200원</td>
	</tr>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>표 꾸미기</title>
<style type="text/css">
table {
	width: 100%;
	border-collapse: collapse;
}
/* 수평선으로 행 구분 */
th, td {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid white;
}
tr:nth-child(even) { /*even 짝수*/
	background-color: #f2f2f2;
}
tr:hover {
	background-color: #f5f5f5;
}
th {
	background-color: #4caf50;
}

</style>
</head>
<body>
<table>
	<tr>
		<th>성</th>
		<th>이름</th>
		<th>적립금</th>
	</tr>
	<tr>
		<td>김</td>
		<td>철수</td>
		<td>100원</td>
	</tr>
	<tr>
		<td>김</td>
		<td>철수</td>
		<td>150원</td>
	</tr>
	<tr>
		<td>홍</td>
		<td>길동</td>
		<td>300원</td>
	</tr>
	<tr>
		<td>전</td>
		<td>우치</td>
		<td>200원</td>
	</tr>
</table>
</body>
</html>

'HTML' 카테고리의 다른 글

HTML - visibility , display (0)	2020.05.18
HTML 투명도 조절 (0)	2020.05.18
HTML z-index(요소의 중첩 처리) (0)	2020.05.18
HTML overflow (0)	2020.05.18
HTML 관계를 고려한 배치(float) (0)	2020.05.18