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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

王林

Sep 02, 2023 am 10:25 AM

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 id="Team-Rankings">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>

出力

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

样式表的基本 CSS 属性

以上がスタイルシートの基本的な CSS プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事はtutorialspointで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

indiebebとウェブメントApr 19, 2025 am 11:16 AM

indiewebは何かです！彼らは会議が近づいてきました。ニューヨーカーはそれについても書いています：

（開発者＆＃039; s）成長モデルApr 19, 2025 am 11:08 AM

Dennis Hambeukersの「デザイナーの成長モデル」の投稿が本当に好きです。デニスはこのモデルを発明したばかりですが、既存のアイデアとすべてに基づいています

Haunted：Webコンポーネント用のフックApr 19, 2025 am 11:06 AM

私はデイブとおしゃべりをしていたので、彼は幽霊について私に言った。それはフックですが、ネイティブのWebコンポーネント用です！かなりクールです。このようなものの存在だと思います

毎週のプラットフォームニュース：イベントタイミング、Web用のGoogle Earth、UndeadセッションCookieApr 19, 2025 am 10:57 AM

今週のニュースでは、ウィキペディアは3つのスロークリックハンドラーを特定するのに役立ちます。GoogleAthourがWebに登場し、CSSのSVGプロパティがより多くのサポートを得ることができます。

純粋なCSSによるマルチラインの切り捨てApr 19, 2025 am 10:50 AM

この記事のトリックはまだかなりきれいで賢いですが、これを行うための現在の標準化された方法があります。

CSSアニメーションライブラリApr 19, 2025 am 10:46 AM

ウェブ上で物事をアニメーション化するのに役立つ非常に多くのライブラリがあります。これらは、構文や

カラー入力：クロスブラウザーの違いに深く飛び込みますApr 19, 2025 am 10:40 AM

この記事では、要素内の構造、ブラウザの矛盾、特定のブラウザで特定の方法を見る理由、およびどのように見えるのか、どのように見えるのか、そして

（擬似）要素を親の境界箱に制限しますApr 19, 2025 am 10:39 AM

親（擬似）要素が親の境界箱の外に表示されないようにしたいと思ったことはありませんか？あなたが何を描くのに苦労しているのか

See all articles

ホットAIツール

ホットツール

MinGW - Minimalist GNU for Windows

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