table / vertical-align / nth-child

table

• 기본적인 table layout - 표 만들 때 사용(장바구니 같은..)

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

table태그 내에 tr(table row)은 row, td(table data)는 column을 의미함.
내가 원하는 만큼 row, column을 넣어주면 표를 완성시킬 수 있음.

tbody, thead는 단지 헤드부분 영역구분을 위해 사용하며 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리(기능상 차이 없음)
(제목행은 <thead> 일반행은 <tbody>안에 넣으면 좋음.

ex

<div>
  <table>
    <thead>
      <tr>
        <th>1</th>
        <td>2</td>
        <td>3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>

border-collapse: collapse / border-radius

• table은 기본적으로 위처럼 틈이 존재한다 없애려면 css에 border-collapse: collapse
  css 작성 시 맨 위에 먼저 적어두고 시작하는 사람도 많음

• 간혹 border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우가 있다.

해결방법

1번

table {
  border-collapse : collapse;
  border-spacing : 0;
}
td {
  border-top-left-radius : 5px;
}

2번

table {
  border-collapse : collapse;
  border-radius : 7px;
  border-style : hidden;
  box-shadow : 0 0 0 1px #666;
}

box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법이다.
(box-shadow는 그림자 넣는 속성)

vertical-align

• vertical-align: top/middle/bottom/middle등 셀 안의 요소 상하정렬

1. inline / inline-block 요소간의 세로정렬 할 때 사용
2. table 안에서 세로정렬할때 vertical-align(top/middle/bottom) 이 3가지만 사용 가능

• table 내 상하정렬 할 때(top/middle/bottom)

td, th {
  vertical-align : middle;
}

• inline 요소 간 상하정렬 할 때

특히 큰 이미지와 글, 큰 글씨옆에 있는 작은 글씨
이런걸 나란히 배치했을 때 서로 높이가 맞지 않는 경우가 많은데
이럴 때 margin-top 이런거 대신 쓰는 속성이다.

<div>
  <p style="font-size: 50px">
    greetings<span style="font-size: 20px; vertical-align: super">안녕</span>
  </p>
</div>

(super은 위첨자, sub는 아래첨자 / 부모요소 있을 때 사용가능)

참고

• 일반 div 태그로 table 만들기

<div style="display: table">
  <div style="display: table-row"></div>
  <div style="display: table-cell"></div>
</div>

이렇게 쓸 수도 있지만 그냥 table쓰면 되니까 쓸일은 없음. 그냥 이런게 있다 정도로 끝.

nth-child 셀렉터

• 여러 요소를 찾은 다음 원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n)를 뒤에 붙여주면 된다.

.cart-table td:nth-child(2) {
  color: red;
} 

위의 코드는 .cart-table 안에 있는 모든 td를 찾은 다음
2번째 나오는 td에만 color를 준다는 뜻.

.cart-table td:nth-child(even) {
  color: red;
} 

이것은 짝수로 등장하는 td에만 스타일을 줄 수도 있고
(odd라고 쓰면 홀수)

.cart-table td:nth-child(3n+0) {
  color: red;
} 

이것은 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있다.
3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 준다라는 뜻.

테이블에서 원하는 순서의 셀에 스타일줄 때 가끔 유용하게 사용할 수 있다.

테이블에서 간단 스타일 주기

• 테두리 색상을 밑에만 넣고 싶으면 border-bottom

td, th {
  border-bottom : 1px solid black;
}

• 셀 블록마다 width를 설정해줄 수 있다.
  하나의 td에 width를 주어도 전체 열의 width가 변한다.(편리한점)

<table>
  <tr>
    <td class="name">상품명</td>
    <td class="price">가격</td>
    <td>수량</td>
  </tr>
</table>

.name {
  width : 50%
}
.price {
  width : 20%
}

• td 여러개를 합치고 싶으면 colspan에 원하는 숫자를 넣으면 그 숫자만큼 옆의 셀을 합쳐준다.

<td colspan="4"></td>