CSS Tables

Table Borders - CSS에서 표 테두리를 지정하려면 border 속성을 사용

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

Collapse Table Borders - 테이블 테두리를 단일 테두리로 축소할지 여부를 설정

table {
  border-collapse: collapse;
}

Hoverable Table - 마우스를 올렸을때 테이블 행렬을 강조할때 사용

tr:hover {background-color: #f5f5f5;}

Striped Tables - 줄무늬 테이블 생성, nth-child() 선택기를 사용해 테이블 행에 배경색 지정

tr:nth-child(even) {background-color: #f2f2f2;}

Responsive Table - overflow 를 사용해 반응형 테이블 생성

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

CSS Table 속성들

Property	Description
border	모든 테두리 속성 설정
border-collapse	테이블 테두리 축소 여부 지정
border-spacing	인접 셀의 경계 사이 거리 지정
caption-side	테이블 캡션의 배치 지정
empty-cells	빈 셀에 테두리/배경을 표시할지 여부 지정
table-layout	테이블에 사용될 레이아웃 알고리즘 설정