[CSS] 표 스타일(Table)

목차

CSS로 웹 페이지의 표를 화려하게 꾸미기 🎨📊

안녕하세요, 디자인 애호가 여러분! 🌟 오늘은 웹 페이지에 표(table)를 아름답게 디자인하는 방법에 대해서 알아보겠습니다. 표는 데이터를 정리하고 보여줄 때 굉장히 유용하지만, 기본 디자인만으로는 부족하게 느껴질 때가 많습니다. CSS의 마법으로 표를 더욱 생동감 있게 만들어봅시다!

 

1. 표의 테두리(Border) 스타일링

표와 각 셀의 테두리를 디자인하려면 border 속성을 활용합니다. 아래는 표 전체와 각 셀에 테두리를 적용하는 방법입니다.

/* 표 전체에 대한 테두리 */
table {
    border-collapse: collapse;  /* 셀 테두리를 하나로 합침 */
    width: 100%;
    border: 2px solid black;
}

/* 각 셀에 대한 테두리 */
td, th {
    border: 1px solid #dddddd;
    padding: 8px;
    text-align: left;
}

 

2. 표의 헤더 스타일링

표의 헤더는 강조하여 데이터의 구분을 명확하게 합니다. 배경색, 글꼴 스타일 등으로 구분하면 좋습니다.

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

 

3. 표의 줄 간격 조절하기

표의 셀 간격을 조절하려면 padding 속성을 활용하면 됩니다.

td, th {
    padding: 10px 15px;
}

 

4. 각 행에 다른 스타일 적용하기

짝수와 홀수 행에 다른 배경색을 적용하여 가독성을 높일 수 있습니다.

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

 

5. 표에 마우스 호버 효과 주기

표의 행에 마우스를 올렸을 때 효과를 주어, 사용자의 인터랙션을 유도합니다.

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

 

마치며

표는 정보를 구조적으로 표현하는 데에 굉장히 중요한 요소입니다. CSS를 통해 표의 디자인을 강조하면 웹 페이지의 전반적인 퀄리티를 높일 수 있습니다. 여러분의 웹 페이지에서 아름다운 표를 만들기를 바랍니다! 다음 포스트에서는 다른 디자인 요소에 대해 함께 알아보도록 하겠습니다. 항상 아름다운 디자인을 추구하는 여러분, 화이팅! 🌈📈🎉