1. 테두리

border-collapse: collapse 속성값 >> 각 셀마다 구분되는 경계선의 빈공간을 없애는 기능을 합니다.
border-collapse: collapse 속성 값이 있어야 tr,th태그의 border속성 디자인이 제대로 적용되기때문에 tr,th태그에 border속성이 있다면 이렇게 하는 것은 선택이 아니라 필수가 됩니다.
하지만 디자인적인 이유로 인해 이 속성을 사용하지 않을 수도 있습니다.

만약 예를 들어 tr태그의 위아래로 경계선을 넣으려면 border-top과 border-bottom속성을 사용해주면 됩니다. 선의 굵기, 선의 종류, 선의 색상을 각각 속성값으로 순서대로 넣어주면 됩니다.

tr {border-top: 1px solid black; border-bottom: 1px solid black; }

2. 배경색

background-color 속성을 이용

교차색상 변경

예를 들어 table의 각 행마다 교차로 색상이 바뀌게 만들어주고 싶으면 홀수행과 짝수 행을 각각따로 선택하는 가상선택자를 사용하면 됩니다.

tr:nth-child(odd) {background-color: #e6f1ff; }
tr:nth-child(even) {background-color: #f0f7ff; }

3. 셀 위에 마우스커서

:hover 가상 선택자를 추가해준다. 마우스 오버상태에서의 color가 기존의 table의 background-color와 함께 시각적으로 잘 어울리게끔 만들어줘야 합니다. 마우스 커서의 모양을 바꾸는 것은 cursor속성을 사용해주면됩니다.

예시코드

th.hover { background-color: #ffc5c2; cursor: pointer; }

4. 폰트 크기 조절 및 테두리 텍스트간 간격조절

폰트크기는 font-size
테두리, 텍스트 간격조절은 padding 속성을 td selector에 추가하여 여백의 미를 만들어줍니다. 이때 padding값으로 인해 커지는 table의 부피로 인해 레이아웃이 깨지지 않는지 주의해주는 것이 좋습니다.

td { padding: 5px; }

5. 테두리 둥글게 만들기

표의 겉 테두리를 둥글게 만들어주기 위해서 table태그를 div태그로 감쌀 것입니다.
table태그에 직접 둥근 테두리를 적용시키는 것이 매우 번거롭기 때문이죠.
div태그의 background-color와 border, border-radius 속성 값을 적절히 설정 해주면 다음과 같은 박스가 생길 것입니다.

여기에 box-shadow 속성까지 더해주면 좀더 선명한 테두리를 만들 수 있습니다. box-shadow는 box element에 그림자를 입혀주는 속성입니다. 첫 번째 속성 값으로 inset을 넣어주면 박스의 바깥쪽이 아니라 안쪽으로 그림자가 생깁니다.

div {
	border: 1px solid #ffebb5;
    background-color: #ffebb5;
    border-radius: 16px;
    box-shadow: inset 0 0 8px #deb13a;
    width: 160px; height: 160px;

6. 그림자 넣기

위에서 처럼 box-shadow속성에서 inset을 빼면 default값으로 바깥쪽에서 생성이 됩니다.