ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用したテーブルのスタイル設定
CSS を使用したテーブルのスタイル設定
- PHPz転載
- 2023-08-19 14:29:04788ブラウズ
CSS を使用してテーブルのスタイルを定義できます。次のプロパティは、f5d188ed2c074f8b944552db028f98a1 とその要素のスタイルを定義するために使用されます:
-
border
CSS の border プロパティは、境界線の幅、境界線を定義するために使用されます。スタイルと境界線の色。
-
border-collapse
この属性は、f5d188ed2c074f8b944552db028f98a1 要素に共有の境界線を付けるか独立した境界線を付けるかを指定するために使用されます。
-
caption
caption-side プロパティは、テーブルのタイトル ボックスを垂直方向に配置するために使用されます。
-
empty-cells
このプロパティは、テーブル内の空のセルの表示方法を指定するために使用されます。
- table-layout は、テーブルの行、列、セルをレイアウトするときにブラウザーが使用するアルゴリズムを定義するために使用されます。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Bookman Old Style', serif;
}
th {
letter-spacing: 1.9px;
}
#one {
border-right: thick solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html>Outputこれにより、次の出力が得られます -
<!DOCTYPE html>
<html>
<head>
<style>
table {
float: left;
empty-cells: hide;
box-shadow: inset 0 0 4px orange;
}
tr {
box-shadow: inset 0 0 10px greenyellow;
}
td {
font-style: italic;
box-shadow: inset 0 0 8px red;
}
table,td {
margin: 6px;
padding: 6px;
border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>Output これにより、次の出力が得られます -
以上がCSS を使用したテーブルのスタイル設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSSのリセットと正規化の違いは？次の記事：CSSのリセットと正規化の違いは？