PHPで表に水平線を追加する方法
- PHPzオリジナル
- 2023-04-03 14:40:261426ブラウズ
PHP では、CSS スタイルを追加することでテーブルに水平線を追加できます。
CSS (Cascading Style Sheets) は、Web ページのスタイルとレイアウトを制御するために使用される言語であり、HTML 要素にスタイルを追加できます。特定の CSS スタイルを追加すると、Web ページ上でテーブル要素を水平線のあるテーブルとして表示できます。
表に水平線を追加する手順は次のとおりです:
ステップ 1: HTML 表要素を作成する
まず、HTML で表要素を作成します。 table タグとその他の関連タグを使用して実現します。
以下は簡単な 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>
上記のコードでは、名前、性別、年齢の 3 つの列と 2 つの列を含む単純なデータ テーブルが 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: CSS スタイルを HTML テーブル要素に適用する
最後に、上記の 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 コードを実行すると、Web ページ上に水平線のデータ テーブルを表示できます。
概要
PHP では、CSS スタイルを追加することで表に水平線を追加できます。表の枠線、偶数行の背景色、マウスホバー効果などのスタイル属性を設定することで、Webページ上で表要素を横線の表として表示できます。
以上がPHPで表に水平線を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。