CSS 테이블 Table

Table Borders

table의 border에만 1px solid black; 적용

Firstname	Lastname
Peter	Griffin
Lois	Griffin

th, td의 border에만 1px solid black; 적용

Firstname	Lastname
Peter	Griffin
Lois	Griffin

table, th, td의 border에 적용

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Collapse Table Borders

border-collapse 속성은 테두리를 하나로 만들지 말지 설정할 때 쓴다.

table {
    border-collapse: collapse;
}

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

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Table Width and Height

th는 50px로 됨. table의 너비는 창에 맞게 100%

table {
    width: 100%;
}

th {
    height: 50px;
}

Horizontal Alignment

th {
    text-align: left;
}

Vertical Alignment

vertical-align의 값은 bottom, top, middle

td {
    height: 50px;
    vertical-align: bottom;
}

Table Padding

테이블 내의 테두리와 컨텐츠 사이에 공간을 조절하기 위해, <td>와 <th>에 padding 속성을 쓴다.

th, td {
    padding: 15px;
    text-align: left;
}

Horizontal Dividers

border-bottom 속성을 <th>, <td>에 추가한다.

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

Hoverable Table

:hover를 <tr>에 써서 테이블 행을 하이라이트할 수 있다.

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

Striped Tables

nth-child()에 background-color를 쓴다. 괄호 안에 짝수는 even, 홀수는 odd를 쓴다.

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

Table Color

<th> 요소의 문자 색과 배경색을 변경할 수 있다.

th {
    background-color: #4CAF50;
    color: white;
}

Responsive Table

<table> 요소를 감싸는 컨테이너에 overflow-x:auto를 추가하면

스크린이 너무 작아서 전체 컨텐츠를 표시할 수 없으면 수평 스크롤이 표시된다. 

https://www.w3schools.com/css/css_table.asp