테이블 만들기

[테이블 만들기]

<div>
    <table>
        <thead></thead>
        <tr>
            <th>1</th>
            <td style="vertical-align: top">2222222</td>
            <td>3</td>
        </tr>
        <tbody></tbody>
        <tr>
            <th>1</th>
            <td>2</td>
            <td>3</td>
        </tr>
        
    </table>
</div>

• tr: 가로행
• td: 세로열
• th: 주로 제목셀에 쓰임(볼드 처리)
  *tr 안에 td 넣어야 함

[vertical-align 속성]
1. inline 요소간(너비와 높이가 제한 없는 요소) 상하정렬
2. 테이블 셀 내 상하정렬(top,bottom,middle 만 사용가능)

일부 브라우저에서 table boredr-radius 안먹을 수 있음
(border-collapse와 함께하면)

[테두리 일부만 주기]

.cart-table td {
    padding: 15px;
    border-bottom: 1px solid #c2d3de;
}

--> table 안에 있는 td, border bottom 만 테두리 주기

.cart-table td, .cart-table th {
    padding: 15px;
    border-bottom: 1px solid #c2d3de;
}

--> 콤마 셀렉터로 두 개 같이 명령하면 편리함

.cart-table td, th {

영역 지정 확실하게 안해주면 모든 td, 모든 th되니 유의.

[테이블 안의 그림 사이즈 조절]

<tr>
   <td><img src="img" width="25%"(이나 50px)></td>
   <td>1</td>
   <td>1</td>
   <td>111</td>
   <td>1</td>

[특정 열만 스타일링 주는 방법]
방법1. class 생성

.cell-long {
    width: 100px
}

방법2. nth-child(2) <-- 2번째 요소에만 적용

.cart-table th:nth-child(2){
    width: 400px;
 }

[셀병합: colspan]

<tr>
    <td colspan="5" style="text-align:right">총가격: 1000</td>

--> 셀 5개를 합친 것을 오른쪽 정렬