Table 뽀개기

기본 구조

• table: 표를 정의하는 가장 바깥쪽 태그
  • tr: 표의 행을 정의하는 태그
    • th: 머리글 셀
    • td: 데이터 셀

더 시멘틱하게

• thead: 표의 머리글 부분 정의
• tbody: 표의 본문 정의
• tfoot: 표의 바닥글 정의(요약 정보나 총계를 포함하는 행을 포함)

<table>
  <thead>
    <tr>
      <th>제목 1</th>
      <th>제목 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용 1</td>
      <td>내용 2</td>
    </tr>
    <tr>
      <td>내용 3</td>
      <td>내용 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>바닥글 1</td>
      <td>바닥글 2</td>
    </tr>
  </tfoot>
</table>

thead {
  background-color: #f6f6fa;
}
tbody {
  background-color: turquoise;
}
tfoot {
  background-color: yellow;
}

열 그룹화

열에 대한 스타일 정의하기

• 열 간격 설정하기

  HTML5부터 width라는 속성이 사라졌다.
  따라서 인라인 스타일로 제어해야 한다.

  <table>
    <colgroup>
      <col style="width: 30%" />
      <col style="width: 70%" />
    </colgroup>
    <thead>
      <tr>
        <th>제목 1</th>
        <th>제목 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>내용 1</td>
        <td>내용 2</td>
      </tr>
    </tbody>
  </table>
  

셀 병합

• colspan: 셀 가로 병합

  <table>
    <tr>
      <th>제목 1</th>
      <th>제목 2</th>
      <th>제목 3</th>
    </tr>
    <tr>
      <td colspan="2">가로로 병합된 셀</td>
      <td>내용 3</td>
    </tr>
    <tr>
      <td>내용 1</td>
      <td>내용 2</td>
      <td>내용 3</td>
    </tr>
  </table>
  

  

• rowspan: 셀 세로 병합

  <table>
    <tr>
      <th>제목 1</th>
      <th>제목 2</th>
      <th>제목 3</th>
    </tr>
    <tr>
      <td rowspan="2">세로로 병합된 셀</td>
      <td>내용 2</td>
      <td>내용 3</td>
    </tr>
    <tr>
      <td>내용 4</td>
      <td>내용 5</td>
    </tr>
  </table>
  

  

표 테두리 스타일링

• border-collapse: collapse: 인접한 셀의 테두리를 공유

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

• 테이블의 양옆 세로선 지우기

  table {
    border-collapse: collapse;
  }
  
  td,
  th {
    border: 1px solid black;
  }
  
  td:first-child,
  th:first-child {
    border-left: none;
  }
  
  td:last-child,
  th:last-child {
    border-right: none;
  }