表の CSS スタイルとは何ですか?-フロントエンドQ&A-php.cn

表の CSS スタイルとは何ですか?

青灯夜游

リリース： 2022-07-27 19:41:33

オリジナル

4801 人が閲覧しました

CSS テーブルスタイル: 1. テーブルの境界線を単一の境界線に結合するかどうかを設定できる border-collapse スタイル; 2. 分割されたセル境界間の距離を指定する border-spacing スタイル境界線モデル ; 3. キャプション側のスタイル、表のタイトルの位置を設定します; 4. 空のセルのスタイル、表の空のセルに境界線と背景を表示するかどうかを規定します; 5. 表レイアウトのスタイル、内容を設定しますテーブルレイアウトのレイアウトアルゴリズムを完了するときに使用されます。

表の CSS スタイルとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS を使用して HTML テーブルをより美しくします。

##テーブルの CSS スタイル属性

属性border-collapseborder- spacingcaption-sideempty-cellstable-layout ## 1. border-collapse 属性

説明	CSS
テーブルの境界線を結合するかどうかを指定します	2
隣接するセルの境界線間の距離を指定します	2
表タイトルの位置を指定します	2
テーブル内の空のセルに境界線と背景を表示するかどうかを指定します	2
テーブルに使用されるレイアウトアルゴリズムを設定します	2

border-collapse 属性は、テーブルの境界線を 1 つの境界線に結合するか、標準 HTML のように個別に表示するかを設定します。

#値説明可能であれば、境界線は結合されます。 1 つの単一の境界線にまとめます。 border-spacing および empty-cells プロパティのデフォルト値は無視されます。国境は分離されます。 border-spacing 属性と empty-cells 属性は無視されません。border-collapse 属性の値を親要素から継承することを指定します例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			.box  {
				border-collapse: collapse;
			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table><br><br>
		<table class="box">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

ログイン後にコピー

	collapse
	個別
	inherit

表の CSS スタイルとは何ですか? 2. border-spacing 属性

(1) 機能: このプロパティは、分離境界モデルのセル境界間の距離を指定します。このプロパティは、border-collapse が分離に設定されていない限り無視されます。このプロパティはテーブルにのみ適用されますが、テーブル内のすべての要素に継承されます。
(2) 可能な値:

値説明#長さ長さ

隣接するセルの境界線間の距離を指定します。 px、cm などの単位を使用します。負の値は許可されません。

長さパラメータを定義すると、水平方向と垂直方向の間隔が定義されます。

2 つの長さパラメータが定義されている場合、最初のパラメータは水平方向の間隔を設定し、2 番目のパラメータは垂直方向の間隔を設定します。

#例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			table,
			td,
			th {
				border: 1px solid black;
			}
			.box  {
				border-collapse:separate;
				border-spacing:10px 50px;

			}
		</style>
	</head>
	<body>

		<table>
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table><br><br>
		<table class="box">
			<tr>
				<th>Firstname</th>
				<th>Lastname</th>
			</tr>
			<tr>
				<td>Peter</td>
				<td>Griffin</td>
			</tr>
			<tr>
				<td>Lois</td>
				<td>Griffin</td>
			</tr>
		</table>
	</body>
</html>

ログイン後にコピー

##3、キャプション側属性

表の CSS スタイルとは何ですか?

(1) 機能: 表タイトルの位置の設定この属性は、表フレームに対する表タイトルの配置位置を指定します。表のタイトルは、表の前（または後）のブロックレベル要素であるかのように表示されます。

(2) 可能な値:

値

デフォルト値。表のタイトルを表の上に配置します。

説明

#top

#bottom

表のタイトルを表の下に配置します。

(3) ブラウザの互換性: IE を除くすべての主流ブラウザは、caption-side 属性をサポートします。 Internet Explorer 8 (以降) では、!DOCTYPE が指定されている場合、caption-side 属性がサポートされます。

4. empty-cells 属性

(1) 機能: この属性は、コンテンツを含まない表のセルをどのように表現するかを定義します。表示される場合、セルの境界線と背景が描画されます。このプロパティは、border-collapse が分離に設定されていない限り無視されます。

(2) 可能な値:

#非表示しないでください空のセルの周囲に境界線を描きます。 #show# (3) ブラウザの互換性: IE を除くすべてのブラウザは空のセル属性をサポートします。 Internet Explorer 8 (以降) では、!DOCTYPE が指定されている場合、empty-cells 属性がサポートされます。

##値	説明

空のセルの周囲に境界線を描きます。デフォルト。

5. table-layout 属性

(1) 機能: テーブルのセル、行、列のアルゴリズムルールを表示します。属性テーブルのレイアウトを完了するときに使用されるレイアウトアルゴリズムを指定します。 #(2) 2 つのアルゴリズム:

固定テーブルレイアウト: 固定

#利点: ブラウザがテーブルをより速くレイアウトできるようになります (固定テーブル内)レイアウトの場合、水平レイアウトはテーブルの幅、列の幅、テーブルの境界線の幅、およびセルの間隔にのみ依存し、セルの内容とは関係ありません。固定テーブルレイアウトを使用すると、ユーザーエージェントは次の最初の行を表示できます。 Table.);

#欠点: あまり柔軟性がありません。

自動テーブルレイアウト: 自動

#利点: 従来の HTML をより反映します (自動テーブルレイアウトでは、列の幅は、列の幅が存在しないという事実によって決まります)。列セル内の行区切り最も幅の広いコンテンツが設定されます。);

#欠点: 自動アルゴリズムは、最終的なレイアウトを決定する前にテーブル内のすべてのコンテンツにアクセスする必要があるため、時間がかかります。

(3) 可能な値:

##Value ＃＃＃＃＃＃デフォルト。列の幅はセルの内容によって設定されます。