CSS로 테이블 스타일을 지정하는 방법

웹 디자인에서 테이블은 일반적으로 사용되는 요소 중 하나입니다. 테이블을 사용하면 정보와 데이터를 더 잘 표시할 수 있습니다. 그러나 표를 사용할 때 스타일을 설정하지 않으면 페이지가 단조롭고 지루해져서 정보 전달에 도움이 되지 않습니다. 따라서 이 기사에서는 CSS를 사용하여 테이블 스타일을 지정하는 방법을 보여줍니다.

1. 테이블의 기본 스타일 설정

table 태그를 사용하여 테이블을 정의한 다음 CSS를 사용하여 스타일을 설정할 수 있습니다. 다음은 가장 기본적인 테이블의 코드 예입니다.

<table>
    <tr>
        <th>数字</th>
        <th>字母</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
</table>

이 코드는 2개의 열과 3개의 행을 포함하는 테이블을 정의합니다. 위쪽 행은 헤더이고 아래쪽 2개 행은 테이블 내용입니다. 다음으로, 표 테두리 설정, 셀 패딩, 셀 사이의 거리(셀 간격) 등 표의 기본 스타일을 설정할 수 있습니다.

table {
    border-collapse: collapse;  /* 合并边框 */
    border-spacing: 0;  /* 设置单元格之间的距离为 0 */
    width: 100%;
}

th, td {
    padding: 8px;  /* 设置单元格内边距 */
    border: 1px solid #ccc;  /* 设置边框 */
}

위 코드에서는 border-collapse:collapse를 사용하여 테이블 테두리를 병합하여 더욱 깔끔하게 만들었습니다. border-spacing: 0은 셀 사이의 거리를 0으로 설정하여 테이블을 더욱 컴팩트하게 만듭니다. 너비: 100%를 설정하면 표가 브라우저 창 크기에 맞춰 조정됩니다. 다음으로 th,td 선택기를 사용하여 셀 스타일을 지정합니다. padding: 8px를 설정하면 셀의 패딩 크기를 조정하여 표 내용을 더욱 아름답게 만들 수 있습니다. border: 1px solid #ccc를 설정하여 셀의 테두리를 설정합니다. 여기서는 회색 색상(#ccc)이 사용됩니다. border-collapse: collapse 合并表格边框，使其看起来更整洁。border-spacing: 0 设置单元格之间的距离为 0，使表格看上去更紧凑。设置 width: 100% 可以使表格自适应浏览器窗口的大小。接下来，我们使用 th,td 选择器来设置单元格的样式。设置 padding: 8px 可以调整单元格的内边距大小，让表格内容更加美观。设置 border: 1px solid #ccc 可以为单元格设置边框，这里使用了灰色的颜色（#ccc）。

2. 设置表头样式

表头是表格的重要组成部分，通常将其标记为 <th> 元素。我们可以对表头进行单独设置样式。

th {
    background-color: #f2f2f2;  /* 设置表头背景颜色 */
    font-weight: bold;  /* 设置表头文本加粗 */
    text-align: left;  /* 设置表头文本左对齐 */
}

在上面的代码中，我们使用了 background-color: #f2f2f2 设置表头的背景颜色。设置 font-weight: bold 可以让表头的文本加粗，使其更加突出。使用 text-align: left 可以将表头文本左对齐。

3. 设置表格交替行样式

为了让表格更容易阅读，我们可以为表格的奇偶行设置交替的样式。

tr:nth-child(even) {
    background-color: #f2f2f2;  /* 设置偶数行背景颜色 */
}

在上面的代码中，我们使用了 nth-child(even) 伪类选择器来选择表格的偶数行，然后设置其背景颜色为灰色（#f2f2f2）。

4. 设置表格鼠标悬停状态样式

当鼠标悬停在表格行上时，我们可以为其设置不同的样式，以增加交互性。

tr:hover {
    background-color: #ddd;  /* 设置鼠标悬停状态的背景颜色 */
}

在上面的代码中，我们使用了 hover

테이블 헤더 스타일 설정
🎜테이블 헤더는 테이블의 중요한 부분이며 일반적으로 <번째> 요소로 표시됩니다. 테이블 헤더의 스타일을 개별적으로 지정할 수 있습니다. 🎜rrreee🎜위 코드에서는 background-color: #f2f2f2를 사용하여 테이블 헤더의 배경색을 설정했습니다. font-weight:bold를 설정하면 헤더 텍스트를 굵게 만들어 더욱 눈에 띄게 만들 수 있습니다. 헤더 텍스트를 왼쪽으로 정렬하려면 text-align: left를 사용하세요. 🎜
🎜표의 교대 행 스타일 설정🎜🎜🎜표를 더 쉽게 읽을 수 있도록 표의 홀수 행과 짝수 행에 교대 스타일을 설정할 수 있습니다. 🎜rrreee🎜위 코드에서는 nth-child(even) 의사 클래스 선택기를 사용하여 테이블의 짝수 행을 선택한 다음 배경색을 회색(#f2f2f2)으로 설정했습니다. 🎜
🎜표 마우스오버 상태 스타일 설정🎜🎜🎜마우스가 표 행 위에 있을 때 다양한 스타일을 설정하여 상호작용성을 높일 수 있습니다. 🎜rrreee🎜위 코드에서는 hover 의사 클래스 선택기를 사용하여 마우스 오버 행을 선택한 다음 배경색을 회색(#ddd)으로 설정했습니다. 🎜🎜위의 단계를 통해 테이블의 스타일을 설정하여 더욱 아름답고 깔끔하게 만들 수 있습니다. 물론 필요에 따라 글꼴 크기, 색상 조정 등 더 많은 스타일 설정을 할 수도 있습니다. 일반적으로 테이블 스타일을 사용하면 페이지를 더욱 다채롭게 만들고 읽고 이해하기 쉽게 만들 수 있습니다. 🎜

위 내용은 CSS로 테이블 스타일을 지정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!