css3のテーブル属性とは何ですか？-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

css3のテーブル属性とは何ですか？

青灯夜游

Dec 15, 2021 pm 03:16 PM

css3

css3 テーブル属性: 1. border-collapse; 2. border-spacing; 3. caption-side; 4. empty-cells; 5. table-layout; 6. width; 7. padding; 8.テキスト整列など

css3のテーブル属性とは何ですか？

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

1.CSS テーブル

CSS を使用すると、HTML テーブルをより美しくすることができます。 CSS テーブルの境界線を指定するには、border 属性を使用します。

省略された境界線プロパティは、1 つの宣言ですべての境界線プロパティを設定します。

設定できるプロパティは (順番に) border-width、border-style、border-color です。 (つまり、境界線の幅、境界線のスタイル、境界線の色)

上記の値のいずれかが欠落していても問題ありません。たとえば、、ボーダー: #FF0000; は許可されます。

#1.1 境界属性

##値説明境界線の幅を指定します##境界線のスタイルを指定します##border-color


border-width
border-style
境界線の色を指定します

#1.2 border-width 属性

#ValueDescriptionthin細い境界線を定義します。中デフォルト。中程度の境界線を定義します。 thick太い枠線を定義します。 length#1.3 境界線スタイル属性





境界線の幅をカスタマイズできます。

値説明境界線を定義しません。「なし」と同じ。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。破線を定義します。ほとんどのブラウザでは実線として表示されます。実線を定義します。 #double二重線を定義します。二重線の幅は、border-width の値と同じです。 groove3D 溝の境界線を定義します。効果はborder-colorの値によって異なります。 ridge3D 尾根の境界を定義します。効果はborder-colorの値によって異なります。 inset3D 差し込み枠を定義します。効果はborder-colorの値によって異なります。アウトセット3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。 #1.4 境界線の色属性

	none
	hidden
	点線
	dashed
	solid

値

説明color背景色を指定します。小さな例です:


transparent	境界線の色を透明にすることを指定します。これはデフォルトの
	<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS简单学习</title> <style type="text/css"> table,th,td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>英文名</th> <th>中文名</th> </tr> <tr> <td>HTML</td> <td>超文本标记语言</td> </tr> <tr> <td>CSS</td> <td>层叠样式表</td> </tr> </table> </body> </html>

transparent

境界線の色を透明にすることを指定します。これはデフォルトの

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>英文名</th>
				<th>中文名</th>
			</tr>
			<tr>
				<td>HTML</td>
				<td>超文本标记语言</td>
			</tr>
			<tr>
				<td>CSS</td>
				<td>层叠样式表</td>
			</tr>
		</table>
	</body>
</html>

上記の例では、テーブルが二重枠があります。これは、table 要素と th/td 要素に別々の境界があるためです。

テーブルの単一の境界線を表示するには、border-collapse プロパティを使用します。次のように:

#1.5 border-collapse 属性

値説明

collapse 可能であれば、境界線は 1 つの境界線に結合されます。 border-spacing および empty-cells プロパティの個別デフォルト値は無視されます。国境は分離されます。 border-spacing および empty-cells プロパティは無視されません

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table {
				border-collapse: collapse;
			}
			table,th,td {
				border: 1px solid black;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>英文名</th>
				<th>中文名</th>
			</tr>
			<tr>
				<td>HTML</td>
				<td>超文本标记语言</td>
			</tr>
			<tr>
				<td>CSS</td>
				<td>层叠样式表</td>
			</tr>
		</table>
	</body>
</html>

1.6 border-spacing 属性

（1）作用：该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate，否则将忽略这个属性。尽管这个属性只应用于表，不过它可以由表中的所有元素继承。

（2）可能的值：

值

描述

length length

规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

如果定义一个length参数，那么定义的是水平和垂直间距。

如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。

1.7 caption-side属性

（1）作用：设置表格标题的位置，该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。

（2）可能的值：

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。

（3）浏览器的兼容性：除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 caption-side属性。

1.8 empty-cells 属性

（1）作用：该属性定义了不包含任何内容的表单元格如何表示。如果显示，就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate，否则将忽略这个属性。

（2）可能的值：

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。

（3）浏览器的兼容性：除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。

1.9 table-layout属性

（1）作用：来显示表格单元格、行、列的算法规则，该属性指定了完成表布局时所用的布局算法。

（2）两种算法：

固定表格布局: fixed

#优点：允许浏览器更快地对表格进行布局, （在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。通过使用固定表格布局，用户代理在接收到第一行后就可以显示表格。）；

#缺点：不太灵活。

自动表格布局：automatic

#优点：更能反映传统的 HTML，（在自动表格布局中，列的宽度是由列单元格中没有折行的最宽的内容设定的。）；

#缺点：自动算法比较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容。

（3）可能的值：

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

2.CSS表格的宽度和高度（width、height）

width和height属性定义表格的宽度和高度。

下面的例子是设置30％的宽度，30像素的th元素，20像素的td元素的高度的表格：

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			table {
				width: 30%;
			}
			th {
				height: 30px;
			}
			td {
				height: 20px;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

3.CSS表格的文字对齐方式（text-align）

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心。

vertical-align属性设置垂直对齐方式，比如顶部，底部或中间。

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			th {
				width: 40%;
				height: 30px;
				text-align: center;
			}
			td {
				width: 40%;
				height: 20px;
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

4.CSS表格填充（padding）

padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。

值	说明
length	规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
%	规定基于父元素的宽度的百分比的填充
inherit	指定应该从父元素继承padding

小实例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			th,td {
				padding: 15px;
			}
		</style>
	</head>
	
	<body>
		<table>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

5.CSS表格的背景颜色及字体颜色（background-color、color）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			table,th,td {
				border: 1px solid black;
			}
			th {
				background-color: burlywood;
				color: aqua;
			}
			td {
				background-color: chartreuse;
				color: brown;
			}
			caption {
				caption-side: bottom;
			}
		</style>
	</head>
	
	<body>
		<table>
			<caption>表1.1-学生个人信息表</caption>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>31</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>43</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>24</td>
			</tr>
		</table>
	</body>
</html>

6.CSS表格多属性综合练习

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>CSS简单学习</title>
		<style type="text/css">
			/*对应整个表格的样式*/
			#LOL {
				font-family: "楷体", sans-serif;
				width: 50%;
				height: 100%;
				text-align: center;
				border-collapse: collapse;
			}
			/*对应表格中的边框线的样式*/
			#LOL th,#LOL td {
				font-size: 20px;
				border: 1px solid #00FFFF;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 5px;
				padding-right: 10px;
			}
			/*对应表格表头的样式*/
			#LOL th {
				font-size: 30px;
				padding-top: 3px;
				padding-bottom: 3px;
				padding-left: 5px;
				padding-right: 10px;
				background-color: #7FFF00;
				color: deeppink;
			}
			/*对应表格中行为a的列的样式*/
			#LOL tr.a td {
				background-color: #DEB887;
				color: #FF0000;
			}
			/*对应表格中行为b的列的样式*/
			#LOL tr.b td {
				background-color: antiquewhite;
				color: #FF1493;
			}
			/*对应表格标题的样式*/
			caption {
				font-size: 16px;
				caption-side: bottom;
			}
		</style>
	</head>
	
	<body>
		<table id="LOL">
			<caption>表6.66-英雄联盟娱乐信息表</caption>
			<tr>
				<th>英雄名称</th>
				<th>定位</th>
				<th>推荐符文</th>
				<th>可选神话装备</th>
			</tr>
			<tr class="a">
				<td>熔岩巨兽</td>
				<td>辅助</td>
				<td>不灭之握</td>
				<td>霜火护手</td>
			</tr>
			<tr class="b">
				<td>战争女神</td>
				<td>AD Carry</td>
				<td>致命节奏</td>
				<td>海妖杀手</td>
			</tr>
			<tr class="a">
				<td>战争之影</td>
				<td>打野</td>
				<td>征服者</td>
				<td>三项之力</td>
			</tr>
			<tr class="b">
				<td>诺克萨斯之手</td>
				<td>上单</td>
				<td>征服者</td>
				<td>渴血战斧</td>
			</tr>
			<tr class="a">
				<td>疾风剑豪</td>
				<td>中单</td>
				<td>征服者</td>
				<td>不朽盾弓</td>
			</tr>
		</table>
	</body>
</html>

（学习视频分享：css视频教程）

以上がcss3のテーブル属性とは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ReactのSEOに優しい性質：検索エンジンの可視性の向上Apr 26, 2025 am 12:27 AM

はい、Reactapplicationscanbeseo-frendlywithpropertrategies.1）useServer-siderendering（ssr）withtoolslikenext.jstogeneratefullhtmlforindexing.2）explmentStaticSiteSite-generation（SSG）forcontent-heavysitestoprededopRederpageattiTiTeTietLe.3）

Reactのパフォーマンスボトルネック：遅いコンポーネントの識別と最適化Apr 26, 2025 am 12:25 AM

反応性能のボトルネックは、主に非効率的なレンダリング、不必要な再レンダリング、コンポーネントの内部重量の計算によって引き起こされます。 1）ReactDevtoolsを使用して遅いコンポーネントを見つけ、React.Memoの最適化を適用します。 2）EFFECTを最適化して、必要に応じて実行することを確認します。 3）メモリ処理には、usememoとusecallbackを使用します。 4）大きなコンポーネントを小さなコンポーネントに分割します。 5）ビッグデータリストについては、仮想スクロールテクノロジーを使用してレンダリングを最適化します。これらの方法により、Reactアプリケーションのパフォーマンスを大幅に改善できます。

Reactの代替品：他のJavaScriptUIライブラリとフレームワークの探索Apr 26, 2025 am 12:24 AM

パフォーマンスの問題、学習曲線、またはさまざまなUI開発方法の探索のために、誰かが反応する代替品を探すことができます。 1）Vue.JSは、統合の容易さと軽度の学習曲線で称賛され、小規模および大規模なアプリケーションに適しています。 2）AngularはGoogleによって開発されており、強力なタイプのシステムと依存噴射を備えた大規模なアプリケーションに適しています。 3）Svelteは、ビルド時に効率的なJavaScriptにコンパイルすることにより、優れたパフォーマンスとシンプルさを提供しますが、そのエコシステムはまだ成長しています。代替案を選択するときは、プロジェクトのニーズ、チームエクスペリエンス、プロジェクトの規模に基づいて決定する必要があります。

Keys and Reactの調整アルゴリズム：パフォーマンスの向上Apr 26, 2025 am 12:21 AM

KeysinReactarespecialattributedignedInedInementionArrays forStableIdentity、重要なもの、curtialforthereconciliationalgorithmはfichupdatedoMedifficly.1）keyshelpreprackChanges、追加、OrRemovalsinlists.2）

Reactプロジェクトに必要なボイラープレートコード：セットアップオーバーヘッドの削減Apr 26, 2025 am 12:19 AM

toreduceSetUpOverHeadinReactProjects、usetoolslikecreatereActapp（cra）、next.js、gatsby、orstarterkits、およびmaintainAmodularStructur E.1）crasimplifiessetupwithasinglecommand.2）next.jsandgatsbyoffermorefeaturesbutalearningcurve.3）starterkitsprovidecomprehensi

USESTATEの理解（）：React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AM

usestate（）isareacthookusedtomeStateinfunctionalComponents.1）itInitializeSandUpDatestate、2）colledatttheToplevelofComponents、3）canleadto'stalestate'ifnotusedly、and4）cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates

Reactを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AM

ReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1）コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。

Reactでのデバッグ：一般的な問題の特定と解決Apr 25, 2025 am 12:09 AM

debugReactapplicationivivivity、EtheseStrategies：1）AddressPropdrillingWithContextapiorredux.2）HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3）最適化合物を使用して、最適化合物を使用してください

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、