コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
目次
例
出力
Example
ホームページ ウェブフロントエンド CSSチュートリアル スタイルシートの基本的な 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>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 サイトの他の関連記事を参照してください。

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

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    AI Hentai Generator

    AI Hentai Generator

    AIヘンタイを無料で生成します。

    もっと見る

    人気の記事

    R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最高のグラフィック設定
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    アサシンのクリードシャドウズ：シーシェルリドルソリューション
    2週間前 By DDD
    R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.チャットコマンドとそれらの使用方法
    1 か月前 By 尊渡假赌尊渡假赌尊渡假赌
    もっと見る

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト（SublimeText3）

    もっと見る

    ホットトピック

    Gmailメールのログイン入り口はどこですか？
    7530
    15
    CakePHP チュートリアル
    1378
    52
    Steamのアカウント名の形式は何ですか
    82
    11
    Win11 Activation Key Permanent
    54
    19
    NYTの接続はヒントと回答です
    21
    76
    もっと見る
    Related knowledge
    GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

    最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

    Redwood.jsと動物相を使用してイーサリアムアプリを構築します Redwood.jsと動物相を使用してイーサリアムアプリを構築します Mar 28, 2025 am 09:18 AM

    最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

    Eleventyで独自のBragdocを作成します Eleventyで独自のBragdocを作成します Mar 18, 2025 am 11:23 AM

    開発者としての段階に関係なく、私たちが完了したタスクは、大小を問わず、個人的および専門的な成長に大きな影響を与えます。

    Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

    それは＆＃039; Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

    CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

    「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

    ブラウザから有効なCSSプロパティ値を取得できますか？ ブラウザから有効なCSSプロパティ値を取得できますか？ Apr 02, 2025 pm 06:17 PM

    私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

    粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

    先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

    特異性について話すために（x、x、x、x）を使用しましょう（x、x、x、x） 特異性について話すために（x、x、x、x）を使用しましょう（x、x、x、x） Mar 24, 2025 am 10:37 AM

    先日、エリック・マイヤーとおしゃべりをしていたので、形成期のエリック・マイヤーの話を思い出しました。 CSS特異性に関するブログ投稿を書きました

    See all articles