A typical HTML table

<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    <!-- several other great bands -->

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

<th> 의 scope attribute, <caption>, <thead>, <tbody>, <tfoot> 등을 이용해 테이블을 멋지고 스타일리쉬하고 접근하기 좋게 마크업 했다.
하지만 막상 화면을 보면 별거 없다.

Styling our table

Spacing and layout

/* spacing */

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

일반적으로 table-layout 프로퍼티의 값을 fixed 로 설정하면 조금 더 예측 가능하게 동작한다.

table-layout 프로퍼티는 사용가능한 값으로 auto 와 fixed 가 있다.
auto 는 테이블의 너비와 셀의 너비가 내용에 맞게 자동으로 조정된다.
fixed 는 테이블의 너비와 셀의 너비가 명시한 테이블의 너비와 열의 너비 또는 테이블의 너비와 첫 행의 셀의 너비로 조정된다.
fixed 는 테이블의 첫 행을 다운로드하고 분석하면 전체 테이블을 렌더링 할 수 있기 때문에 auto 보다 렌더링 시간이 빠르다.
하지만 셀의 내용이 셀 너비 ( 또는 열의 너비 ) 에 맞지않아 오버플로가 일어날 수 있으므로 overflow 프로퍼티로 다뤄야 한다.
참고로 테이블에 width 속성을 사용하지 않으면 오버플로가 일어나지 않는다.

테이블 열은 내용의 양에 따라 크기가 조정되며 이로인해 예상치 못한 결과가 발생한다.
table-layout:fixed 를 적용한 상태에서 heading의 너비에 따라 열 크기를 조정하면 이 문제를 적절히 처리할 수 있다.
위에서 :nth-child(n) 의사 클래스를 사용하여 각각의 열에 너비를 적용한 이유가 이것 때문이다.

border-collapse 프로퍼티의 값으로 collapse 을 설정하는 것은 테이블을 스타일링하는 데 있어서 표준 모범 사례이다.

border-collapse 의 값으로 collapse 와 seperate 가 있다.
따로 설정하지 않으면 border-collpase:seperate 가 적용된다.

만약 테이블의 각 셀에 border를 적용한다면 아래의 그림처럼 보기좋지 않게 나온다.

하지만 border-collpase:collapse 를 적용하면 아래처럼 겹치는 border가 1개로 나온다.

만약 border-collpase:seperate 를 설정했다면 border-spacing 속성을 사용할 수 있다.

테이블을 더 읽기 쉽게 만들기 위해 각 셀 마다 padding을 설정했다.
위의 코드를 전부 실행하면 아래의 결과화면이 나온다.

Styling the caption

/* caption */

caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

caption-side 프로퍼티를 사용해서 캡션의 위치를 지정할 수 있다.

[참고]: MDN