[ HTML/CSS ] 표, <table>

1. 표 만들기 - table, tr, th, td

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

2. 표에 제목행은 <thead>, 일반 행은 <tbody>를 넣어서 가독성을 높일 수 있음

3. <table>은 기본적으로 틈이 존재해서 없애려면 

table {
	border-collapse: collapse;
}

    를 보통 지정하고 코딩 시작함.

 

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

    vertical-align은 세로 정렬할 때 씀. 사실 정확히 말하면
    inline/ inline-block 요소 간의 세로 정렬할 때 씀.

    vertical-align의 두 번째 용도로
    table 안에서 세로 정렬할 때 씀.

5. 테이블은 td 폭 조정시 th와 따로 놀지 않음.

 

6. nth-child() 셀렉터

// cart-table 클래스에 등장하는 th 중 2번째 자식의 width를 400px로 해달라는 말.
.cart-table th:nth-child(2) {
	width: 400px;
}

7. th 하나로 합치기

<!-- td 5개를 합쳐서 하나의 cell로 -->
<td colspan="5">
</td>