スタイルシートの基本的な CSS プロパティ-CSSチュートリアル-php.cn

スタイルシートの基本的な CSS プロパティ

王林

リリース： 2023-09-02 10:25:01

転載

1297 人が閲覧しました

CSS を使用してテーブルのスタイルを定義できます。次のプロパティは、通常、

とその要素のスタイルに使用されます -

border
CSS 境界線プロパティは、境界線 -width、border-style、および border を定義するために使用されます。 - 色。
border-collapse
この属性は、

要素の境界線を共有するか分離するかを指定するために使用されます。

caption

caption-side プロパティは、テーブルのタイトルボックスを垂直方向に配置するために使用されます。

empty-cells

このプロパティは、テーブル内の空のセルの表示を指定するために使用されます。

table-layout strong>
ブラウザがテーブルの行、列、セルをレイアウトするために使用するアルゴリズムを定義します。

例

次の例は、テーブルのスタイルを示しています。

リアルタイムデモンストレーション

<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
   border: thin solid;
   padding: 5px;
   font-style: italic;
}
caption {
   caption-side: bottom;
}
td {
   box-shadow: inset 0 0 6px green;
}
</style>
</head>
<body>
<table>
<caption>Demo caption</caption>
<tr>
<td>demo</td>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td>demo</td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

出力

これにより、次の出力が得られます。 -

样式表的基本 CSS 属性

Example

ライブデモンストレーション

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   float: left;
}
table {
   border: 3px solid black;
}
td {
   border: 3px solid lightgreen;
}
th {
   border: 3px solid lightblue;
}
#t2 {
   border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Team Rankings</h2>
<div>
<table id="t1">
<tr>
<th>Team (Test)</th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>Australia</td>
<td>2</td>
</tr>
</table>    
</div>
<div>
<table id="t2">
<tr>
<th>Team (ODI) </th>
<th>Rank </th>
</tr>
<tr>
<td>India </td>
<td>1 </td>
</tr>
<tr>
<td>England</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>

ログイン後にコピー