table 홀수, 짝수 행과 열 구분하기

CSS를 사용하여 table의 홀수 행(odd row)과 짝수 행(even row), 그리고 홀수 열(odd column)과 짝수 열(even column)에 스타일을 적용하는 예제를 보여드리겠습니다. nth-child() 선택자를 활용하면 쉽게 스타일을 적용할 수 있습니다.

1. 홀수/짝수 행 스타일 적용

먼저 홀수와 짝수 행에 스타일을 적용하는 예제입니다.

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3
Row 3, Cell 1	Row 3, Cell 2	Row 3, Cell 3
Row 4, Cell 1	Row 4, Cell 2	Row 4, Cell 3

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
    </tr>
    <tr>
        <td>Row 3, Cell 1</td>
        <td>Row 3, Cell 2</td>
        <td>Row 3, Cell 3</td>
    </tr>
    <tr>
        <td>Row 4, Cell 1</td>
        <td>Row 4, Cell 2</td>
        <td>Row 4, Cell 3</td>
    </tr>
</table>

/* 테이블 기본 스타일 */
table {
    width: 60%;
    margin: 20px auto;
    border-collapse: collapse;
    text-align: center;
}

th, td {
    padding: 10px;
    border: 1px solid #dddddd;
}

/* 홀수 행 스타일 */
tr:nth-child(odd) {
    background-color: #f2f2f2; /* 연한 회색 */
}

/* 짝수 행 스타일 */
tr:nth-child(even) {
    background-color: #e6e6e6; /* 조금 더 진한 회색 */
}

위 코드에서는 nth-child(odd)와 nth-child(even)을 사용하여 각각 홀수와 짝수 행에 다른 배경색을 적용했습니다.

2. 홀수/짝수 열 스타일 적용

이번에는 홀수와 짝수 열에 스타일을 적용하는 예제입니다.

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3
Row 3, Cell 1	Row 3, Cell 2	Row 3, Cell 3
Row 4, Cell 1	Row 4, Cell 2	Row 4, Cell 3

HTML

위와 동일한 HTML 코드를 사용합니다.

CSS (열에 스타일 적용)

/* 테이블 기본 스타일 */
table {
    width: 60%;
    margin: 20px auto;
    border-collapse: collapse;
    text-align: center;
}

th, td {
    padding: 10px;
    border: 1px solid #dddddd;
}

/* 홀수 열 스타일 */
td:nth-child(odd), th:nth-child(odd) {
    background-color: #f2f2f2; /* 연한 회색 */
}

/* 짝수 열 스타일 */
td:nth-child(even), th:nth-child(even) {
    background-color: #e6e6e6; /* 조금 더 진한 회색 */
}

이 코드는 nth-child(odd)와 nth-child(even)을 활용해 열에 스타일을 적용하는 방식입니다. 헤더(th)에도 같은 스타일을 적용하여 일관성을 유지했습니다.

 

요약

• tr:nth-child(odd) / tr:nth-child(even) : 홀수/짝수 행에 스타일 적용
• td:nth-child(odd) / td:nth-child(even) : 홀수/짝수 열에 스타일 적용

이를 통해 원하는 대로 테이블의 행과 열에 스타일을 쉽게 적용할 수 있습니다.