表のセル間隔とセルパディングの違いの詳細な説明

テーブルとは何ですか?セルセルで構成されています。表では、<td> の数は、<tr> の各行に囲まれたセルセルの数によって決まります。さらに、CSS スタイル <style type="text/css">table tr td,th{border:1px solid #000;}; を追加する前は、デフォルトのテーブルはブラウザーにテーブルラインなしで表示されます。

HTML での一般的な表の記述方法: A. <tr>…</tr>: 表の行。行の数は tr ペアの数と同じです。B. <td>…</td>: 表のセル。行には複数の <td>…</td> ペアが含まれ、行の列数を示します。C. <th>…</th>: 表の先頭のセル、表のヘッダー。テキストはデフォルトで太字で中央揃えになります。D. <table summary="表の紹介テキスト">/*概要の内容はブラウザーに表示されません。その機能は、表の読みやすさ（セマンティクス）を向上させ、検索エンジンが表の内容を理解できるようにし、スクリーンリーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。 */ E.caption タグを使用して、表にタイトルと概要を追加します。タイトルは表の内容を説明するために使用されます。タイトルは表の上部に表示されます。

 <表の境界線="" セル間隔="" セルパディング="">
    <tr><th>ヘッダー</th></tr>
     <tr><td>データ</td></tr>
 </テーブル>

<表の境界線="" セル間隔="" セルパディング="" 概要="">
         <キャプション></キャプション>
         <tr><th>今日は金曜日です/th></tr>
         <tr><td>今日は金曜日です</td></tr>
 </テーブル>

話題に戻りましょう。セルパディングとセル間隔の違いです。まず、次の表の画像とセル間隔コードの比較を見てみましょう。

<!DOCTYPE HTML>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>表のセル間隔の違い</title>
        <スタイル タイプ="text/css">
            テーブル{
                下部マージン: 50px;
            }
            .ceshi{
                境界線の間隔: 20px;
                /*表内の隣接するセルの境界線間の距離を指定します。 */
            }
        </スタイル>
    </head>
    <テーブルの幅="600" セル間隔="0" ボーダーカラー="#333" ボーダー="1">
        <caption>最初のセル</caption>
        <tr>
            <td>テスト 1</td>
            <td>テスト 2</td>
            <td>テスト 3</td>
        </tr>
    </テーブル>
    <テーブルの幅="600" セル間隔="20" ボーダーカラー="#333" ボーダー="1">
        <caption>2 番目のセル</caption>
        <tr>
            <td>テスト 1</td>
            <td>テスト 2</td>
            <td>テスト 3</td>
        </tr>
    </テーブル>
    <テーブル幅="600" ボーダーカラー="#333" ボーダー="1" クラス="ceshi">
        <caption>3 番目のセル</caption>
        <tr>
            <td>テスト 1</td>
            <td>テスト 2</td>
            <td>テスト 3</td>
        </tr>
    </テーブル>
</html>

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

<!DOCTYPE HTML>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>表内のセルパディングの違い</title>
        <スタイル タイプ="text/css">
            テーブル{
                下部マージン: 50px;
            }
        </スタイル>
    </head>
    <本文>
        <テーブルの幅="600px" 境界線="1" 境界線の色="#ccc" セルパディング="0">
            <tr>
                <th>私は幸せなセルテーブルです</th>
                <th>私は幸せなセルテーブルです</th>
                <th>私は幸せなセルテーブルです</th>
            </tr>
        </テーブル>
        <テーブルの幅="600px" 境界線="1" 境界線の色="#ccc" セルパディング="20">
            <tr>
                <th>私は幸せなセルテーブルです</th>
                <th>私は幸せなセルテーブルです</th>
                <th>私は幸せなセルテーブルです</th>
            </tr>
        </テーブル>
    </本文>
</html>

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

例: 要約: cellspacing はセル間の距離を表し、cellpadding はセルのコンテンツと境界線の間の距離を表します。前者はマージンのようなもので、後者はパディングのようなものです。ネスト (セル) - テーブルの内容。ネストパディング (テーブルの塗りつぶし) (cellpadding) - ネストとネストスペースを分離するために使用される、ネストの外側の距離を表します。ネストスペース (テーブルの間隔) (cellspacing) - テーブル境界線とネストパディングの間の距離を表します。これは、ネストパディング間の距離でもあります。

拡張 1: 表の行と列を結合するにはどうすればよいでしょうか? colspan は列をまたいで結合し、rowspan は行をまたいで結合します。

コード表示:

<!DOCTYPE html>
<html>
    <ヘッド>
        <メタ文字セット="utf-8">
        <title>colspan と rowspan の違い</title>
        <スタイル タイプ="text/css">
            テーブル{
                マージン: 0 自動;
                下部マージン: 50px;
                テキスト配置: 中央;
            }
        </スタイル>
    </head>
    <本文>
    <テーブルの幅="600" セルパディング="10" セル間隔="2" 境界線="1" 境界線の色="#ccc">
        <caption>通常の表示: 1 行 3 列</caption>
        <tr>
            <td>何と言っていいか分からない</td>
            <td>何と言っていいか分からない</td>
            <td>何と言っていいか分からない</td>
        </tr>
    </テーブル>
    <テーブルの幅="600" セルパディング="10" セル間隔="2" 境界線="1" 境界線の色="#ccc">
        <caption> 1 行 2 列を表示したいのですが、どうすればよいでしょうか。 colspan は列をまたいで結合します</caption>
        <tr>
            <td>何と言っていいか分からない</td>
            <td colspan="2">何と言っていいか分からない</td>
            <!-- <td>何と言っていいか分からない</td> -->
        </tr>
    </テーブル>
    <!-- ========無慈悲な境界線================================================================== -->
    <テーブルの幅="600" セルパディング="10" セル間隔="2" 境界線="1" 境界線の色="#ccc">
        <caption>通常の表示: 2 行 2 列</caption>
        <tr>
            <td>何と言っていいか分からない</td>
            <td>何と言っていいか分からない</td>
        </tr>
        <tr>
            <td>何と言っていいか分からない</td>
            <td>何と言っていいか分からない</td>
        </tr>
    </テーブル>
    <テーブルの幅="600" セルパディング="10" セル間隔="2" 境界線="1" 境界線の色="#ccc">
        <caption>1 行 2 列を表示する必要がありますが、どうすればよいでしょうか? Rowspan は行をまたいで結合します</caption>
        <tr>
            <td rowspan="2">何と言っていいか分からない</td>
            <td>何と言っていいか分からない</td>
        </tr>
        <tr>
            <!-- <td>何と言っていいか分からない</td> -->
            <td>何と言っていいか分からない</td>
        </tr>
    </テーブル>
    </本文>
</html>

拡張機能 2: 表の境界線を結合するにはどうすればよいでしょうか?境界線の折りたたみ: 折りたたみ;

<!-- 表のセルを結合 -->
    <スタイル タイプ="text/css">
        テーブル{
            境界線の折りたたみ: 折りたたみ;
            /* 境界線の折りたたみ: 分離; */
            /* テーブルの行とセルの境界線が 1 つの境界線に結合されているか、標準 HTML のように分離されているかを示します。 */
        }
    </スタイル>
    <テーブルの幅="600" セルパディング="10" セル間隔="2" 境界線="1" 境界線の色="#ccc">
        <t本文>
            <tr>
                <td>セル 1</td>
                <td>セル 2</td>
                <td>セル 3</td>
            </tr>
        </tbody>
    </テーブル>

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

/* ユーザーエージェントスタイルシート */
        /* テーブル {
            表示: テーブル;
            境界線の折りたたみ: 分離;
            境界線の間隔: 2px;
            境界線の色: グレー;
        } */
        
/* border="1" はデフォルトで border="1px" になります
        上境界線の幅: 1px;
        右境界線の幅: 1px;
        境界線の下の幅: 1px;
        左境界線の幅: 1px; */
        
/* bordercolor はオブジェクトの境界線の色を返すか設定します bordercolor: W3C - 文字列 
        要素の境界線の色を指定します。色名または RGB カラーコードのいずれかを指定します。 
*/

表のセル間隔とセルパディングの違いについて詳しく説明したのはこれで終わりです。表のセル間隔とセルパディングの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: フロントエンドの vue+express ファイルのアップロードとダウンロードの例

>>: MySQL データベースのパフォーマンス最適化の概要