> 웹 프론트엔드 > 프런트엔드 Q&A > 테이블 CSS 설정

테이블 CSS 설정

PHPz
풀어 주다: 2023-05-21 09:35:37
원래의
1712명이 탐색했습니다.

웹 개발에서 테이블은 일반적으로 데이터나 정보를 표시하는 데 사용되는 일반적인 HTML 요소입니다. 표를 더욱 아름답고 읽기 쉽게 만들기 위해 CSS 스타일을 통해 사용자 정의할 수 있습니다. 이번 글에서는 테이블의 CSS 스타일을 설정하는 방법을 소개하겠습니다.

1. 기본 스타일 설정

  1. 표 테두리 스타일 설정
table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}
로그인 후 복사
  1. 표 너비 및 높이 설정
table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}
로그인 후 복사
  1. 표 머리글 및 표 내용 스타일 설정

표 머리글(thead) 및 표 내용( tbody ), 다양한 스타일을 설정할 수 있습니다. 아래와 같이:

table thead th {
  background-color: #f2f2f2; /*设置表头背景色*/
  font-weight: bold; /*设置表头字体加粗*/
}

table tbody td {
  padding: 10px; /*设置单元格内边距*/
}
로그인 후 복사

2. 고급 스타일 설정

  1. 테이블 얼룩말 교차 스타일 설정

CSS를 사용하여 테이블의 짝수 행과 홀수 행의 배경색을 다르게 하여 쉽게 구별할 수 있습니다.

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

table tr:nth-child(odd) {
  background-color: #fff; /*设置奇数行背景色*/
}
로그인 후 복사
  1. 표 텍스트 정렬 및 줄 바꿈 설정

표의 텍스트 정렬 및 텍스트 줄 바꿈도 CSS를 통해 설정할 수 있습니다.

table th {
  text-align: center; /*设置表头文字居中对齐*/
}

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}
로그인 후 복사
  1. 테이블 셀 병합 스타일 설정

아래 그림과 같이 테이블의 두 셀을 병합하여 보다 복잡한 데이터 표현을 표시할 수 있습니다.

테이블 CSS 설정

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>
로그인 후 복사

위는 여러 테이블 CSS 스타일 설정 방법에 대한 소개입니다. 모든 사람에게 도움이 되기를 바랍니다. CSS의 유연한 사용을 통해 테이블에 다양한 스타일과 시각 효과를 제공하여 페이지를 더욱 아름답고 읽기 쉽게 만들 수 있습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿