웹사이트를 돋보이게 하는 5가지 CSS 테이블 디자인

정보를 효과적으로 전달하기 위해서는 깔끔하고 매력적인 테이블이 중요합니다. 이 글에서는 다양한 스타일의 CSS 테이블 디자인을 소개합니다. 간단하고 심플하게 정보를 전달하기 위해 아래 테이블 디자인을 사용하시길 바랍니다.

 

1. 그림자와 둥근 모서리가 있는 테이블

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

/* 1. 그림자와 둥근 모서리가 있는 테이블 */
.table1 {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    overflow: hidden;
}

.table1 th, .table1 td {
    padding: 10px;
    text-align: left;
}

.table1 thead {
    background-color: #f4f4f4;
}

2. 줄무늬 배경이 있는 테이블

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Data 7	Data 8	Data 9

/* 2. 줄무늬 배경이 있는 테이블 */
.table2 {
    width: 100%;
    border-collapse: collapse;
}

.table2 th, .table2 td {
    padding: 10px;
    text-align: left;
}

.table2 thead {
    background-color: #333;
    color: #fff;
}

.table2 tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

3. 테이블 행 강조와 호버 효과

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Data 7	Data 8	Data 9

/* 3. 테이블 행 강조와 호버 효과 */
.table3 {
    width: 100%;
    border-collapse: collapse;
}

.table3 th, .table3 td {
    padding: 10px;
    text-align: left;
}

.table3 thead {
    background-color: #4CAF50;
    color: white;
}

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

4. 테이블 셀 경계선과 색상 강조

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Data 7	Data 8	Data 9

/* 4. 테이블 셀 경계선과 색상 강조 */
.table4 {
    width: 100%;
    border-collapse: collapse;
}

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

.table4 thead {
    background-color: #6c7ae0;
    color: white;
}

5. 색상 블록 테이블

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Data 7	Data 8	Data 9

/* 5. 색상 블록 테이블 */
.table5 {
    width: 100%;
    border-collapse: collapse;
}

.table5 th, .table5 td {
    padding: 10px;
    text-align: left;
}

.table5 thead {
    background-color: #FF5733;
    color: white;
}

.table5 tbody tr:nth-child(1) td {
    background-color: #FFBD69;
}

.table5 tbody tr:nth-child(2) td {
    background-color: #FFC300;
}

.table5 tbody tr:nth-child(3) td {
    background-color: #FFD966;
}

 

이제, 위의 CSS 코드와 HTML 코드를 블로그 글에 추가하여 사용하면 됩니다. 각 테이블은 고유한 스타일로 디자인되어 있으며, 블로그에 다양하고 매력적인 테이블을 추가할 수 있습니다.