7 가지 표 스타일

http://www.laozuo.org/4631.html
왼쪽 은 웹 디자이너 가 아니 지만 블 로그 에서 자신 이 좋 지 않다 고 생각 하 는 사용자 체험 을 자주 만 지 거나 수정 하 는 것 도 간단 한 CSS 스타일 을 수정 하 는 데 국한 되 고 해결 할 수 없 는 문제 가 발생 하면 검색 을 통 해 문 서 를 찾 아 볼 수 있다.시간 이 쌓 이면 서 우 리 는 CSS 스타일 의 무한 한 묘 미 를 느 꼈 다.예 를 들 어 우 리 는 특정한 표를 만 들 때 CSS 스타일 시트 의 수정 을 간단하게 이용 하여 다양한 CSS 표 스타일 을 바 꿀 수 있다.페이지 레이아웃 과 내용 을 공유 할 때 표 는 자주 사용 되 는 것 입 니 다.어떤 때 는 왼쪽 이 평가 내용 을 공유 할 때 그림 을 편리 하 게 캡 처 하기 위해 직접 캡 처 할 수 있 습 니 다.나중에 여러 가지 스타일 로 공유 할 수 있 습 니 다.그러면 사용자 체험 과 정보 가 바 뀌 면 다시 캡 처 하 는 것 이 아니 라 직접 수정 할 수 있 습 니 다.
이전 블 로그 에 서 는 CSS 표 스타일 에 관 한 몇 편의 내용 을 공유 한 적 이 있 습 니 다.
16 가지 사용자 체험 우수한 HTML CSS 가격표 템 플 릿 데모 및 다운로드
8 가지 디자이너 는 항상 예 쁜 HTML CSS 표 스타일 을 사용한다.
6 가지 예 쁜 HTML CSS 스타일 사용자 게시판
오늘 왼쪽 은 몇 개의 해외 전단 블 로 그 를 방문 할 때 다음 과 같은 7 가지 색상 의 CSS 표 스타일 의 정 리 를 보 는 것 이 좋 습 니 다.특히 웹 페이지 에 표를 추가 해 야 할 때 간단 한 스타일 처럼 보이 지만 사용 해 야 할 때 직접 복사 하여 많은 시간 을 절약 합 니 다.
첫 번 째 종류:
CSS 표 스타일 중 하나
CSS 스타일 코드 부분:

/* Border styles */
#table-1 thead, #table-1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}

/* Padding and font style */
#table-1 td, #table-1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}

/* Alternating background colors */
#table-1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-1 tr:nth-child(odd) {
background: #FFF
}

두 번 째:
CSS 표 스타일 의 2
CSS 스타일 코드 부분:

/* Border styles */
#table-2 thead, #table-2 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
#table-2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}

/* Padding and font style */
#table-2 td, #table-2 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}

/* Alternating background colors */
#table-2 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
#table-2 tr:nth-child(odd) {
background: #FFF
}

세 번 째:
CSS 표 스타일 의 3
CSS 스타일 코드 부분:

/* Border styles */
#table-3 thead, #table-3 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(235, 242, 224);
}
#table-3 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(235, 242, 224);
}

/* Padding and font style */
#table-3 td, #table-3 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(149, 170, 109);
}

/* Alternating background colors */
#table-3 tr:nth-child(even) {
background: rgb(230, 238, 214)
}
#table-3 tr:nth-child(odd) {
background: #FFF
}

네 번 째 종류:
CSS 표 스타일 의 4
CSS 코드 스타일 부분:

/* Border styles */
#table-4 thead, #table-4 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(211, 202, 221);
}
#table-4 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(211, 202, 221);
}

/* Padding and font style */
#table-4 td, #table-4 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(95, 74, 121);
}

/* Alternating background colors */
#table-4 tr:nth-child(even) {
background: rgb(223, 216, 232)
}
#table-4 tr:nth-child(odd) {
background: #FFF
}

다섯 번 째:
CSS 표 스타일 의 5
CSS 코드 스타일 부분:

/* Table Head */
#table-5 thead th {
background-color: rgb(156, 186, 95);
color: #fff;
border-bottom-width: 0;
}

/* Column Style */
#table-5 td {
color: #000;
}
/* Heading and Column Style */
#table-5 tr, #table-5 th {
border-width: 1px;
border-style: solid;
border-color: rgb(156, 186, 95);
}

/* Padding and font style */
#table-5 td, #table-5 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

여섯 번 째 종류:
CSS 표 스타일 의 6
CSS 스타일 코드 부분:

/* Table Head */
#table-6 thead th {
background-color: rgb(128, 102, 160);
color: #fff;
border-bottom-width: 0;
}

/* Column Style */
#table-6 td {
color: #000;
}
/* Heading and Column Style */
#table-6 tr, #table-6 th {
border-width: 1px;
border-style: solid;
border-color: rgb(128, 102, 160);
}

/* Padding and font style */
#table-6 td, #table-6 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

일곱 번 째 종류:
CSS 표 스타일 의 7
CSS 스타일 코드 부분:

/* Table Head */
#table-7 thead th {
background-color: rgb(81, 130, 187);
color: #fff;
border-bottom-width: 0;
}

/* Column Style */
#table-7 td {
color: #000;
}
/* Heading and Column Style */
#table-7 tr, #table-7 th {
border-width: 1px;
border-style: solid;
border-color: rgb(81, 130, 187);
}

/* Padding and font style */
#table-7 td, #table-7 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}

이상 7 가지 색상 의 CSS 표 스타일 부분 은 우리 자신의 필요 에 따라 서로 다른 색상 부분 을 직접 복사 하여 행렬 의 수정 을 추가 할 수 있 습 니 다.그리고 아래 TABLE 표 부분 에 추가:
Name
City
Phone
Albert Ellis
New York
+1 718 000000
Marcus Aurelius
Rome
+1 718 000000
Epictetus
Greece
+1 718 000000
Aristotle
Greece
+1 718 000000