コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド CSSチュートリアル CSS を使用したテーブルのスタイル設定

CSS を使用したテーブルのスタイル設定

PHPz
PHPz
Aug 19, 2023 pm 02:29 PM

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

とその要素のスタイルを定義するために使用されます:

  • border

    CSS の border プロパティは、境界線の幅、境界線を定義するために使用されます。スタイルと境界線の色。

  • border-collapse

    この属性は、

要素に共有の境界線を付けるか独立した境界線を付けるかを指定するために使用されます。

  • caption

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

  • empty-cells

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

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

    • #例

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

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

    <!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: &#39;Bookman Old Style&#39;, serif;
}
th {
   letter-spacing: 1.9px;
}
#one {
   border-right: thick solid blue;
}
td {
   text-align: center;
}
</style>
</head>
<body>
<h2>Employee List</h2>
<div>
<table>
<tr>
<th id="one">Employee</th>
<th>Department</th>
</tr>
<tr>
<td>John </td>
<td>Marketing</td>
</tr>
<tr>
<td>Brad</td>
<td>Finance</td>
</tr>
<tr>
<td>Tim </td>
<td>IT</td>
</tr>
<tr>
<td>Steve</td>
<td>Operations</td>
</tr>
</table>
</div>
</body>
</html>
    ログイン後にコピー

    Output

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

    Styling Tables Working with CSS

    Example

    ライブ デモ

    <!DOCTYPE html>
<html>
<head>
<style>
table {
   float: left;
   empty-cells: hide;
   box-shadow: inset 0 0 4px orange;
}
tr {
   box-shadow: inset 0 0 10px greenyellow;
}
td {
   font-style: italic;
   box-shadow: inset 0 0 8px red;
}
table,td {
   margin: 6px;
   padding: 6px;
   border: 1px solid black;
}
table
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
<tr>
<td>demo</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>demo</td>
</tr>
<tr>
<td></td>
<td>demo</td>
<td></td>
</tr>
</table>
</body>
</html>
    ログイン後にコピー

    Output

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

    Styling Tables Working with 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.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
    4週間前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.最高のグラフィック設定
    4週間前 By 尊渡假赌尊渡假赌尊渡假赌
    アサシンのクリードシャドウズ：シーシェルリドルソリューション
    2週間前 By DDD
    R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
    4週間前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.チャットコマンドとそれらの使用方法
    4週間前 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メールのログイン入り口はどこですか？
    7518
    15
    CakePHP チュートリアル
    1378
    52
    Steamのアカウント名の形式は何ですか
    80
    11
    Win11 Activation Key Permanent
    53
    19
    NYTの接続はヒントと回答です
    21
    67
    もっと見る
    Related knowledge
    GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

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

    ショー、Don＆＃039; t Tell ショー、Don＆＃039; t Tell Mar 16, 2025 am 11:49 AM

    あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

    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からのこのフレーミングが好きです。

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

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

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

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

    See all articles