- table 태그 구성
<table>
<thead></thead>
<tbody>
<tr>
<td>내용</td>
<td>내용</td>
</tr>
</tbody>
</table>row, col로 구성되어있는데 tr은 row, td는 col이다.
즉 tr안에 td를 넣어서 table만들면되는데 보통 만들어진 템플릿을 사용한다.
thead와 tbody는 그냥 헤드부분 영역 구분용으로 사용하는거고 기능상 차이는 없다.
th는 td의 글씨를 굵게 처리한다.
- 테이블 셀 내에서 상하정렬 vertical-align 사용
테이블에서는 top, bottom, middle사용가능하다.
td, th {
vertical-align : middle;
}아래와같이 글씨크기가 차이가 나는경우에도 vertical-align을 사용해 정렬할 수있다.
<div>
<p>
<span style="font-size : 50px">김지원</span> <span style="font-size : 20px">입니다</span>
</p>
</div>
--------
<div class="test">
<p>
<span style="font-size : 50px">김지원</span> <span style="font-size : 20px;
vertical-align : top">입니다</span>
</p>
</div>
아래에 vertical-align:top같은 경우는 다르게 정렬된다.
- Table태그 사용해서 Cart만들기
1)nth-child 셀렉터
css에서 nth-child를 사용하면 n번째 요소를 선택해 스타일링 할 수 있다.
even,odd를 사용해 홀수,짝수번째 번갈아 효과를 줄 수도 있다.
/* n번째 등장하는 요소만 스타일링할 때 nth-child(n)셀렉터 */
.cart-table th:nth-child(2){
width: 400px;
color:red;
}
2)colspan (셀 합치기)
여러칸의 셀을 특정 갯수만큼 합치고 싶으면 colspan을 사용한다.
<tbody>
<tr>
<td><img src="camera.png" width="50px"></td>
<td>카메라</td>
<td>1대</td>
<td>100000</td>
<td>100000</td>
</tr>
<tr>
<!-- colspan="5" 셀을 5개만큼 합쳐라 -->
<td colspan="5" style="text-align: right;">총가격 : 100000</td>
</tr>
</tbody>3)그리고 테이블은 상단 td하나만 넓이를 지정해줘도 전체 같은열의 td넓이에도 영향이간다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./cart.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div class="cart_background">
<h3>Cart</h3>
<table class="cart-table">
<thead>
<tr>
<th></th>
<th class="cell-long">ITEM</th>
<!-- 여기만 건드려도 표 같은열 영향감 -->
<th>AMOUNT</th>
<th>PRICE</th>
<th>TOTAL</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="camera.png" width="50px"></td>
<td>카메라</td>
<td>1대</td>
<td>100000</td>
<td>100000</td>
</tr>
<tr>
<!-- colspan="5" 셀을 5개만큼 합쳐라 -->
<td colspan="5" style="text-align: right;">총가격 : 100000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>td,th{
/* border:1px solid; */
}
.cart-table td, .cart-table th{
padding:15px;
border-bottom:1px solid #c2d3de;
}
/* .cart-table th{
padding:15px;
border-bottom:1px solid #c2d3de;
} */
table{
border-collapse:collapse;
/* 기본적으로 테이블은 틈이 존재, 없애기 위해 사용 */
}
.cart_background{
width: 100%;
background-color: #c2d3de;
padding:30px;
}
.cart-table{
width: 100%;
max-width: 700px;
margin: auto;
background:white;
border-radius: 10px;
}
.cell-long{
width: 700px;
/* 최대한 700px 차지하라는 뜻 */
}
/* n번째 등장하는 요소만 스타일링할 때 nth-child(n)셀렉터 */
.cart-table th:nth-child(2){
width: 400px;
color:red;
}ps. table태그에서 border-radius가 안먹힐 때 (border-collapse때문에)
table {
border-collapse : collapse;
border-spacing : 0;
}
(왼쪽위에있는 td) {
border-top-left-radius : 5px;
}
////////
table {
border-collapse : collapse;
border-radius : 7px;
border-style : hidden;
box-shadow : 0 0 0 1px #666;
}추후 혹시 만들게 되면 참고해보자
'HTML,CSS' 카테고리의 다른 글
| HTML, CSS pseudo-class, class작명 (0) | 2023.04.22 |
|---|---|
| HTML, CSS form&input (0) | 2023.04.21 |
| HTML, CSS z-index, witdh, box-sizing (0) | 2023.04.21 |
| HTML, CSS 배경관련, margin collapse, position (0) | 2023.04.21 |
| HTML, CSS 셀렉터, Navbar만들기 (0) | 2023.04.21 |
