PHP에서 테이블에 수평선을 추가하는 방법

PHPz
풀어 주다: 2023-04-03 16:10:01
원래의
1369명이 탐색했습니다.

PHP에서는 CSS 스타일을 추가하여 테이블에 수평선을 추가할 수 있습니다.

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 제어하는 ​​데 사용되는 언어이며 HTML 요소에 스타일을 추가할 수 있습니다. 특정 CSS 스타일을 추가하면 테이블 요소가 웹 페이지에 수평선이 있는 테이블로 표시될 수 있습니다.

다음은 표에 수평선을 추가하는 단계입니다.

1단계: HTML 표 요소 만들기

먼저, 표 태그 및 기타 관련 태그를 사용하여 HTML로 표 요소를 만듭니다.

다음은 간단한 HTML 테이블 예입니다.

<table>
  <tr>
    <th>姓名</th>
    <th>性别</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>男</td>
    <td>28</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>女</td>
    <td>32</td>
  </tr>
</table>
로그인 후 복사

위 코드에서는 이름, 성별, 나이 등 세 개의 열과 두 개의 데이터 행을 포함하는 table 요소를 통해 간단한 데이터 테이블이 생성됩니다.

2단계: CSS 스타일 추가

다음으로, PHP에 CSS 스타일을 추가하여 테이블에 수평선을 추가하세요.

다음은 CSS 스타일을 사용하여 표에 가로선을 추가하는 예입니다.

<style type="text/css">
table {
  border-collapse: collapse;
  width: 100%;
}

table th, table td {
  border: 1px solid #ccc;
}

table th {
  background-color: #f7f7f7;
  font-weight: bold;
}

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

table tr:hover {
  background-color: #eaeaea;
}
</style>
로그인 후 복사

위 코드에서는 표 스타일을 정의하고 표 테두리와 너비를 설정합니다. 동시에 테이블 헤더와 내용 셀의 테두리 스타일, 테이블 헤더의 배경색 및 굵은 효과가 정의됩니다. 짝수 행의 배경색을 설정하고 마우스를 올리면 수평선이 있는 표의 효과를 얻을 수 있습니다.

3단계: HTML 테이블 요소에 CSS 스타일 적용

마지막으로 위의 CSS 스타일을 HTML 테이블 요소에 적용합니다.

다음은 완전한 PHP 코드 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>PHP Table Style</title>
  <meta charset="UTF-8">
  <style type="text/css">
    table {
      border-collapse: collapse;
      width: 100%;
    }

    table th, table td {
      border: 1px solid #ccc;
    }

    table th {
      background-color: #f7f7f7;
      font-weight: bold;
    }

    table tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    table tr:hover {
      background-color: #eaeaea;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>28</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>32</td>
    </tr>
  </table>
</body>
</html>
로그인 후 복사

위의 PHP 코드를 실행하면 웹 페이지에 수평선이 있는 데이터 테이블이 표시됩니다.

요약

PHP에서는 CSS 스타일을 추가하여 표에 수평선을 추가할 수 있습니다. 표 테두리, 짝수 행 배경색, 마우스 호버 효과 등 스타일 속성을 설정하면 표 요소를 웹 페이지에 가로줄이 있는 표로 표시할 수 있습니다.

위 내용은 PHP에서 테이블에 수평선을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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