HtmlCss/CSS
Css- table
by 플람
2019. 5. 25.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>table CSS</title>
<style type="text/css">
/*
표를 구성하는 모든 곳에 border속성을 이용하여
선을 나타낸다.
*/
table, th, td{
border: 1px solid black;
/* 값이 없는 cell의 테두리선을 그릴지 여부 지정*/
empty-cells: hide; /*show(보이기, hide(감추기)*/
}
table{
width: 300px;
background-color: aliceblue;
/*
background-image: url('../images/back.jpg');
background-size: 30px 30px;
background-repeat: no-repeat;
*/
/*border-collapse:collapse; 선과 선사이의 간격을 무시 */
border-spacing :5px; /* 선과 선사이의 간격 */
}
/*
tr.title{
background-color:antiquewhite;
}
*/
tr:nth-child(1){
background-color:beige;
}
th:nth-child(2) {
background-color:azure;
}
td:nth-child(1) {
text-align:center;
}
td:nth-child(2) {
text-indent : 10px
}
tr:nth-child(even){
background-color:pink;
}
caption{
text-align:center;
caption-side:top /* top(위), bottom(아래)*/
}
</style>
