CSS 설정 테이블

CSS는 웹페이지의 스타일을 제어하는 ​​데 사용되는 언어입니다. 웹페이지의 색상, 글꼴, 레이아웃 등 다양한 요소를 변경할 수 있습니다. 표는 웹 디자인에서 가장 일반적인 요소 중 하나이며 CSS는 표에 대한 정확한 스타일을 설정하는 데 도움이 되는 유연한 방법을 제공합니다.

예는 다음과 같습니다.

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>28</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>31</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

CSS를 통해 표의 스타일 설정:

/* 表格样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 宽度自适应 */
  margin: 20px 0; /* 留出一定的边距 */
  font-size: 16px; /* 字体大小 */
}

/* 表头样式 */
thead {
  background-color: #f2f2f2; /* 背景颜色 */
  font-weight: bold; /* 字体加粗 */
}

/* 表格单元格样式 */
td, th {
  border: 1px solid #ddd; /* 边框样式 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文字对齐方式 */
  width: 33.33%; /* 列宽自动平均分配 */
}

/* 鼠标悬浮样式 */
tr:hover {
  background-color: #f5f5f5; /* 背景颜色 */
}

위의 CSS 코드를 통해 표의 몇 가지 기본 스타일을 설정합니다.

• 표 테두리를 병합하여 표를 더욱 깔끔하게 만들고
• 테이블 헤더를 굵게 설정하고 배경색을 설정하여 데이터와 확실히 다르게 만듭니다.
• 테이블을 더 읽기 쉽고 이해하기 쉽게 만들기 위해 테이블 ​​셀 테두리, 패딩 및 행 높이를 설정합니다. 마우스 색상을 가리키면 테이블의 대화형이 더욱 향상됩니다.
• 위의 기본 스타일 외에도 CSS는 테이블 디자인 및 레이아웃에 사용할 수 있는 더 많은 스타일을 제공하며 필요에 따라 선택하여 적용할 수 있습니다.

간단히 말해서 CSS는 웹 디자인을 위한 중요한 도구 중 하나입니다. CSS의 기본 구문과 공통 속성을 숙지하는 것은 아름답고 읽기 쉽고 이해하기 쉬운 테이블을 디자인하는 데 중요합니다.

위 내용은 CSS 설정 테이블의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!