Jam's story

[CSS] 테이블 꾸미기 본문

WEB/CSS

[CSS] 테이블 꾸미기

애플쩀 2022. 5. 23. 11:48 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
table{
width:100%;
border-collapse: collapse;
}
caption{
	font-weight:bold;
	text-transform: uppercase;
	caption-side:bottom;
}
td,th{
border-bottom: 1px dotted red;
}
th{
width:100px;
height: 70px;
}
td{
height: 30px;
text-align: cneter;
vertical-align: middle;
}
tr:nth-child(even){
background-color: #f2f2f2;
}
tr:hover:not(:first-child){
background-color: #4caf50;
}
</style>
</head>
<body>
<!-- table>caption+(tr*3>td*4) -->
<table>
	<caption>table sample</caption>
	<tr>
<th>칼럼명1</th>
<th>칼럼명2</th>
<th>칼럼명3</th>
<th>칼럼명4</th>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
		<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
		<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>5</td>
		<td>6</td>
		<td>7</td>
		<td>8</td>
	</tr>
</table>
</body>
</html>
Insert title here
table sample
칼럼명1 칼럼명2 칼럼명3 칼럼명4
1 2 3 4
5 6 7 8
1 2 3 4
5 6 7 8
1 2 3 4
5 6 7 8
저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] display 속성  (0) 2022.05.23
[CSS] 반응형 테이블 - 스크롤바 표시  (0) 2022.05.23
[CSS] li 꾸미기  (0) 2022.05.23
[CSS] 페이징 처리  (0) 2022.05.23
[CSS] div와 a로 메뉴 만들기+ hover  (0) 2022.05.23
'WEB/CSS' Related Articles more
Comments