CSS 기초 #7 (column, table)

 

column 관련

div {
  column-count: 3; /* 3개의 열로 나눔 */
  column-gap: 20px; /* 열 간의 간격을 20px로 설정 */
  column-rule: 2px solid black; /* 2px 두께의 검은색 선 */
}

div {
  column-count: 3; /* 3개의 열로 나누기 */
  column-gap: 20px; /* 열 간 간격 */
  column-rule: 1px dashed gray; /* 열 사이에 점선 */
}

 

 

 

table 관련

/* 기본 표 스타일링 */

table {
  border-collapse: collapse;	/* 테이블의 경계선 처리 방식 */
  border-spacing: 10px;		/* 셀 사이의 간격 */
  table-layout: fixed;		/* 레이아웃. fixed는 열 너비 고정, auto는 컨텐츠에 맞게 자동 조절 */
  width: 100%; 			/* 테이블 너비 100%로 설정 */
}

 

/* 테이블 셀 스타일링 */

th, td {
  text-align: left;		/* 셀의 텍스트 정렬 */
  padding: 10px;		/* 셀의 내부 여백 */
}

th {
  background-color: #f2f2f2;	/* 셀의 배경색 */
}
td {
  background-color: #ffffff;
}

 

/* 테이블의 행 스타일링 */

/* odd는 홀수, even은 짝수, 3n+1등 식의 규칙도 가능. */

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

 

 

 

예시 종합

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(odd) {
  background-color: #f9f9f9;
}