BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

表中のcesllspacingとcellpaddingの違いについて

2022-01-25 18:02:06

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

htmlでよくある表の書き方。A. <tr>...</tr>: 表の行、数行に数組のtr表がある； B. <td>...</td>: 表のセル、行には数組の <td& gt;...</td> があり、一行に数列あることを示す； C. <th> ... </th>: セルの表の見出し、テキストはデフォルトで太字、中央揃え； D. <table summary="table summary text"> ;/* 概要の内容はブラウザで表示されません。その役割は、テーブルの可読性（セマンティック）を高め、検索エンジンがテーブルの内容をより良く読めるようにすることですが、同時にスクリーンリーダーをより良くして、特別なユーザーがテーブルの内容を読めるようにすることでもあります。*/ E.captionタグは、テーブルにタイトルと要約を追加し、タイトルは、テーブルの内容を説明するために、表示位置のタイトル：テーブルの上に 

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


<table border="" cellspacing="" cellpadding="" summary="">
         <caption></caption>
         <tr><th>Today Friday/th></tr>
         <tr><td>today is Friday</td></tr>
 </table>

cellpadding と celspacing の違いの話題に戻るために、まず、次のテーブル画像のセットと celspacing のコードを比較して見てください。 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>The difference between celspacing in table</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>first cell</caption>
        <tr>
            <td>test1</td>
            <td>Test 2</td>
            <td>Test 3</td>
        </tr>
    </table>
    <table width="600" cellspacing="20" bordercolor="#333" border="1">
        <caption> second cell</caption>
        <tr>
            <td>test1</td>
            <td>Test 2</td>
            <td>Test 3</td>
        </tr>
    </table>
    <table width="600" bordercolor="#333" border="1" class="ceshi">
        <caption>third cell</caption>
        <tr>
            <td>test1</td>
            <td>Test 2</td>
            <td>Test 3</td>
        </tr>
    </table>
</html>

コードを比較し、上2つのテーブルのみcelspacing設定が異なっている、"0"用1、"20"用1、結果は各セル間の距離の最初のテーブルが0、各20の第二テーブルの各セル間の距離は、下に拡張：第二テーブルと第三テーブル一貫性が、第三テーブルがcelspacing設定していない、我々はこのボーダー間隔が判明：20pxのとcelspacing = " 20 " 同じ結果、例えば、"。 g. 要約 cellspacing属性は、表のセル間のスペースを指定するために使用されます。この属性のパラメータ値は数値で、セルの隙間が占めるピクセル・ポイント数を示します。 

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>tabl table cellpadding difference</title>
        <style type="text/css">
            table{
                margin-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="0">
            <tr>
                <th>I am happy cell form</th>
                <th>I am happy cell form</th>
                <th>I am happy cell form</th>
            </tr>
        </table>
        <table width="600px" border="1" bordercolor="#ccc" cellpadding="20">
            <tr>
                <th>I am happy cell form</th>
                <th>I am happy cell form</th>
                <th>I am happy cell form</th>
            </tr>
        </table>
    </body>
</html>

上記のコードから結果を表示するために実行します。2つのフォームのみcellpaddingコードの値が異なっている、＆quotの最初のフォーム;私は幸せなセルフォーム＆quot;それが0であるセルからの言葉は、セットのcellpadding = "0＆quot; 理由である、＆quotの第二形態は、"私は幸せです。私は幸せなセルフォーム＆quot;これらの単語は、それが配置されているセルから遠い、それはcellpadding = "20＆quot;、つまり、＆quot;私は幸せなセルフォーム＆quotですそれが国境から20ピクセルの距離であるセルからです。簡単に言えば、cellpaddingの値は、空白のセルの数を保持するために、独自の国境からテーブル内のセルの数に等しい、セル内の要素は、それらの空白を入力することはありません。|セルパディングプロパティは、セルの内容とセル境界との間のマージン距離のサイズを指定するために使用されていることに注意してください。このプロパティの値も数値であり、セル内容と上下の境界の間の空白の高さが占めるピクセル数と、セル内容と左右の境界の間の空白の幅が占めるピクセル数を示す。

例 概要：celspacingはセルとセルの間の距離を表し、cellpaddingはセルコンテンツとボーダーの間の距離を表す；前者はマージンのように、後者はパディングのように理解される；ネスト（セル）-表のコンテンツ；ネストフィル（テーブルフィル）（セルパディング）-ネストとネストスペースを分けるために使われる、距離外のネストを表す；ネストスペース（テーブルスペース）（celspacing）-テーブルボーダーに代わり、ネストのホワイト距離もまたネストのホワイト

Extension 1: テーブルの行と列をマージするには？ colspanは列を、rowspanは行をマージします。

コードのショーケースです。 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>difference between colspan and 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"& gt;
        <caption> Normal display: one row, three columns</caption>
        <tr>
            <td>Say something, I don't know</td>
            <td>Say something, I don't know</td>
            <td>Say something, don't know</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"& gt;
        <caption> Now I want to show one row and two columns, what should I do? colspan merge across columns</caption>
        <tr>
            <td>Say something, don't know</td>
            <td colspan="2"> Say something, I don't know</td>
            <! -- <td>Say something, I don't know</td> -->
        </tr>
    </table>
    <! -- ======== relentless divider ========================================================== -->
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"& gt;
        <caption> Normal display: two rows and two columns</caption>
        <tr>
            <td>Say something, I don't know</td>
            <td> Say something, I don't know</td>
        </tr>
        <tr>
            <td>Say something, I don't know</td>
            <td> Say something, I don't know</td>
        </tr>
    </table>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"& gt;
        <caption> Now I want to show one row and two columns, what should I do? rowspan is merged across rows</caption>
        <tr>
            <td rowspan="2">Say something, I don't know</td>
            <td>Say something, don't know</td>
        </tr>
        <tr>
            <! -- <td>Say something, don't know</td> -->
            <td> Say something, I don't know</td>
        </tr>
    </table>
    </body>
</html>

Extension 2: テーブルのボーダーを統合するには？ border-collapse: collapse; 

<! -- Merge table cells -->
    <style type="text/css">
        table{
            border-collapse: collapse;
            /* border-collapse: separate; */
            /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */
        }
    </style>
    <table width="600" cellpadding="10" cellspacing="2" border="1" bordercolor="#ccc"& gt;
        <tbody>
            <tr>
                <td>cell1</td>
                <td>cell2</td>
                <td>cell3</td>
            </tr>
        </tbody>
    </table>

最後にクロームでは、テーブルのボーダーカラーをグレー、ボーダー間隔を2などにデフォルトで設定されています。 

/* user agent stylesheet */
        /* table {
            display: table;
            border-collapse: separate;
            border-spacing: 2px;
            border-color: grey;
        } */
        
/* border="1" default equals border="1px"
        border-top-width: 1px;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-left-width: 1px; */
        
/* bordercolor returns or sets the border color of the object
        bordercolor:W3C - String 
        Specifies the color of the border of the element. Specify either a color name or RGB color code. 
*/

tableのcesllspacingとcellpaddingの違いについては、この記事でまとめています。tableにおけるcesllspacingとcellpaddingの違いについては、スクリプトハウスの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します