テーブルのセルスペースとセルパディングの違い-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

テーブルのセルスペースとセルパディングの違い

Guanhui

Jun 28, 2020 pm 06:09 PM

cellpaddingtable

テーブルのセルスペースとセルパディングの違い

テーブルとは何ですか?表内の

の数は、各行ので囲まれたセルの数によって決まります。さらに、CSS スタイル : テーブルの行、複数の行と同数の tr テーブルのペア; B.… : テーブルのセル。行には ... のペアがいくつか含まれており、行内に列が何個あるかを示します。C....: 表のヘッダーセル内の表ヘッダー、テキストはデフォルトで太字で中央に表示されます; D./*概要の内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーンリーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。 / セル間隔コードの比較:

 <table border="" cellspacing="" cellpadding="">
    <tr><th>Header</th></tr>
     <tr><td>Data</td></tr>
 </table>

コードの比較。上の 2 つの表はセル間隔の設定が異なるだけで、1 つは「0」、もう 1 つは「20」です。表示される結果は、最初のテーブルの各セル間の距離は 0、2 番目のテーブルの各セル間の距離は 20 です。拡張: 2 番目のテーブルは 3 番目のテーブルと一致しますが、3 つのテーブルは一致しません。セルスペースが設定されています。border-spacing: 20px; は、cellspacing="20" と同じ結果になることがわかりました。例: 概要: cellpacing 属性は、テーブル内のセル間のギャップを指定するために使用されます。このプロパティのパラメータ値は、セルギャップが占めるピクセル数を示す数値です。

<table border="" cellspacing="" cellpadding="" summary="">
         <caption></caption>
         <tr><th>今天星期五/th></tr>
         <tr><td>today is Friday</td></tr>
 </table>

上記のコードを実行した結果から判断すると、2 つのテーブルにはセルパディングコード値が異なるだけです。最初のテーブルでは、「私は幸せなセルテーブルです」という単語が表示されます。 " 2 番目のテーブルの単語 "I am a happy cell table" は、それが配置されているセルから遠く離れています。これは、cellpadding="0" が設定されているためです。つまり、cellpadding="20" であるためです。、「私は幸せなセルテーブルです」とそれが配置されているセルの境界線の間の距離は20ピクセルです。簡単に言うと、cellpadding の値は、テーブル内のセルがその境界線から内側にどれだけの空白スペースを保持するかに等しく、セル内の要素がそれらの空白スペースに入ることはありません。 ||cellpadding 属性は、セルの内容とセルの境界の間の空白の距離のサイズを指定するために使用されることに注意してください。この属性のパラメータ値も数値であり、セルの内容と上下の境界線の間の空白距離の高さが占めるピクセル数と、セルの内容と上下の境界線の間の空白距離の幅が占めるピクセル数を表します。セルの内容と左右の境界線。

例: 概要: cellpacing はセル間の距離を表し、cellpadding はセルの内容と境界線の間の距離を表します。前者はマージンのように理解され、後者はパディングのように理解されます。ネスト (セル) --テーブルの内容; ネストパディング (テーブルの充填) (セルパディング) -- ネストとネストスペースを区切るために使用されるネストの外側の距離を表します; ネストスペース (テーブル間隔) (セル間隔) -- テーブルの境界線とネストを表しますパディング距離はネストフィラー間の距離でもあります

拡張 1: テーブルの行と列をマージするにはどうすればよいですか? Colspan は列全体をマージし、rowspan は行全体をマージします。

コード表示:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>table中cellspacing的区别</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
            .ceshi{
                border-spacing: 20px;
                /*Specifies the distance between the borders of adjoining cells in a table. */
            }
        </style>
    </head>
    <table width="600" cellspacing="0" bordercolor="#333" border="1">
        <caption>第一个单元格</caption>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
            <td>测试3</td>
        </tr>
    </table>
    <table width="600" cellspacing="20" bordercolor="#333" border="1">
        <caption>第二个单元格</caption>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
            <td>测试3</td>
        </tr>
    </table>
    <table width="600" bordercolor="#333" border="1" class="ceshi">
        <caption>第三个单元格</caption>
        <tr>
            <td>测试1</td>
            <td>测试2</td>
            <td>测试3</td>
        </tr>
    </table>
</html>

拡張 2: テーブルの境界線をマージするにはどうすればよいですか? border-collapse: Collapse;

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>tabl表格中cellpadding的区别</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
            <tr>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
            </tr>
        </table>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
            <tr>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
                <th>我是快乐的cell表格</th>
            </tr>
        </table>
    </body>
</html>

最後に、Chrome ブラウザでは、システムのデフォルトのテーブルの境界線の色は灰色、境界線の間隔は 2 などです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>colspan与rowspan的区别</title>
        <style type="text/css">
            table{
                margin: 0 auto;
                margin-bottom: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>正常展示：一行三列</caption>
        <tr>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>现在要展示一行二列,怎么办？colspan跨列合并</caption>
        <tr>
            <td>说点啥了,不知道</td>
            <td colspan="2">说点啥了,不知道</td>
            <!-- <td>说点啥了,不知道</td> -->
        </tr>
    </table>
    <!-- ========无情分割线========================================================== -->
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>正常展示：二行二列</caption>
        <tr>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
        <tr>
            <td>说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc">
        <caption>现在要展示一行二列,怎么办?rowspan跨行合并</caption>
        <tr>
            <td rowspan="2">说点啥了,不知道</td>
            <td>说点啥了,不知道</td>
        </tr>
        <tr>
            <!-- <td>说点啥了,不知道</td> -->
            <td>说点啥了,不知道</td>
        </tr>
    </table>
    </body>
</html>

推奨チュートリアル: 「
CSS チュートリアル

」

以上がテーブルのセルスペースとセルパディングの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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