PHP에서 테이블에 수평선을 추가하는 방법
- PHPz원래의
- 2023-04-03 14:40:261319검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!