테이블 CSS 설정

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

1. 기본 스타일 설정

1. 표 테두리 스타일 설정

table {
  border-collapse: collapse;  /*合并单元格边框*/
  border: 1px solid #ddd;  /*设置边框样式*/
}

2. 표 너비 및 높이 설정

table {
  width: 100%; /*设置表格的宽度*/
  height: auto; /*设置表格的高度*/
}

3. 표 머리글 및 표 내용 스타일 설정

표 머리글(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; /*设置奇数行背景色*/
}

2. 표 텍스트 정렬 및 줄 바꿈 설정

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

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

table td {
  text-align: left; /*设置表格内容文字左对齐*/
  white-space: nowrap; /*设置文本不换行*/
}

3. 테이블 셀 병합 스타일 설정

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

<table>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>第一行第二列</td>
    <td>第一行第三列</td>
  </tr>
  <tr>
    <td colspan="2">第二行合并单元格</td>
  </tr>
</table>

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

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