テーブルとは何ですか？細胞細胞で構成されています。テーブルでは、<td>の数は、各行に包まれた細胞細胞の数に依存します<tr>！さらに、デフォルトのテーブルテーブルには、CSSスタイルが追加される前にブラウザに表示されるテーブルラインがありません。
HTMLの一般的なテーブルライティング方法：A。<tr>…</tr>：テーブルの行、いくつかのペアがあり、いくつかの行があります。 B. <td>…</td>：<td>…</td>のいくつかのペアを含むテーブルのセル。つまり、いくつかの列が連続してあります。 C. <th>…</th>：テーブルの頭、テーブルヘッダー、テキストが大胆で中央に表示されているセル。 D. <表の概要=表はじめにテキスト>/*要約の内容はブラウザに表示されません。その機能は、テーブルの読みやすさ（セマンティック化）を向上させ、検索エンジンがテーブルコンテンツをよりよく理解できるようにし、画面読者が特別なユーザーがテーブルコンテンツを読み取るのをよりよくできるようにすることです。 */ e.captionタグ、タイトルと概要をテーブルに追加し、タイトルはテーブルの内容、タイトルの表示場所を説明するために使用されます：テーブルの上
<テーブルボーダー= cellpacing = cellpadding => <tr> <th> header </th> </tr> <tr> <td> data </td> </tr> </table>
<テーブルボーダー= cellpacing = cellpadding = summary => <キャプション> </caption> <tr> <th>今日は金曜日です</td> </tr> </table>
トピックに戻って、CellPaddingとCellpacingの違いが、次のテーブル写真のセットとCellpacingコードの比較であるポイントに戻りましょう。
<！doctype html> <html> <head> <meta charset = utf-8> <title>テーブルのセルペーシングの違い</title> <style type = text/css> table {margin-bottom：50px; } .ceshi {border-pacing：20px; /*テーブル内の隣接するセルの境界間の距離を指定します。 */} </style> </head> <table width = 600 cellpacing = 0 bordercolor =＃333 border = 1> <caption>最初のセル</caption> <tr> <td>テスト1 </td> <td>テスト2 </td> <td>テスト3 </td> </tr境界= 1> <キャプション>セカンドセル</caption> <tr> <td>テスト1 </td> <td>テスト2 </td> <td>テスト3 </td> </tr> </table> <table width = 600 bordercolor =＃333 border = 1 class = class = ceshi> <キャプション2 </td> <td>テスト3 </td> </tr> </table> </html>コードを比較すると、2つの上部テーブルの設定は異なります。1つは0、もう1つは20です。最初のテーブルの各セル間の距離は0、2番目のテーブルの各セル間の距離は20です。2番目のテーブルは3番目のテーブルと一致していますが、セル間隔はありません。この境界間隔：20px。細胞間隔= 20の結果と同じです。例：概要：セル間隔属性を使用して、テーブルのセル間のギャップを指定します。このプロパティのパラメーター値は数字であり、セルギャップが占めるピクセルポイントの数を示します。
<！doctype html> <html> <head> <メタcharset = utf-8> <title>テーブルのセルパディングの違い</title> <style type = text/css> table {margin-bottom：50px; } </style> </head> <body> <table width = 600px border = 1 bordercolor =＃ccc cellpadding = 0> <tr> <th>私は幸せなセルテーブルです</th> <th> <th> <tr> <th>私は幸せなセルフォームです</th> <th>私は幸せなセルフォームです</th> <th>私は幸せなセルフォームです</th> <th>私は幸せなセルフォームです</th> </tr> </table> </body> </html> </html>上記のコードを実行している結果から判断すると、2つのテーブルはセルパディングコードの値が異なります。最初の表では、「I Am Happy Cell」という言葉は、それが配置されているセルから0です。つまり、CellPadding = 0が設定されているためです。 2番目の表では、「I Am Happy Cell」という言葉は、それがあるセルからはほど遠いです。つまり、私が幸せなセルの間の距離は20ピクセルです。簡単に言えば、セルパディングの値はどれだけ等しく、テーブル内のセルの境界から内側に残っているブランクの数、およびセル内の要素はそれらのブランクに入ることはありません。 ||セルパディングプロパティは、セル含有量とセル境界の間の空白の距離のサイズを指定するために使用されることに注意してください。このプロパティのパラメーター値も数であり、セル含有量と上限と下境界の間の空白の距離の高さで占めるピクセル数、およびセル含有量と左と右の境界の間の空白の距離の幅によって占めるピクセル数を示します。
例：概要：セルペースは細胞間の距離を表し、セルペードは細胞含有量と境界の間の距離を表します。前者はマージンのようなもので、後者はパディングのようなものです。巣（セル） - テーブルの内容。巣の詰め物（テーブルフィリング）（セルパッド） - 巣と巣の空間を分離するために使用される巣の外側の距離を表します。巣のスペース（テーブル間隔） - テーブルの境界と巣の詰め物との間の距離を表し、巣の詰め物の間の距離でもあります
拡張1：テーブルの行と列をマージする方法は？ Colspan Cross-Column Merge、Rowspan Cross-Row Merge
コード表示：
<！doctype html> <html> <head> <meta charset = utf-8> <title> colspanとrowspanの違い</title> <style type = text/css> table {margin：0 auto;マージンボトム：50px;テキストアライグ：センター; } </style> </head> <body> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =＃ccc> <caption>通常のディスプレイ：1つの列と3列</caption> <tr> <td>何も言わない、わからない、</td> <td>何かwidth = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =＃cc> <キャプション> 1列と2つの列を表示するにはどうすればよいですか？ colspan Cross-Column Merge </caption> <tr> <td>何かを言って、知らない</td> <td colspan = 2>何かを言わない、わからない</td> <！ - <td> ========================================================================================= ========================================================================================= ========================================================================================= ============================================================================================================================================ <td>何かを言って、知らないで</td> </tr> <tr> <td>何かを言って、何かを言わないで、何かを言わない、知らない</td> <td>何も言わない、知らない、</td> </tr </table> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 border = 1列？ rowspanクロスローウマージ</caption> <tr> <td rowspan = 2>何かを言わない、わからない</td> <td>何も言わない、わからない、</td> </tr> <tr> <！ - <td>何も言わないでください、</td> - > <td>拡張2：テーブルの境界線をマージする方法は？国境崩壊：崩壊;
<！ - テーブルセルのマージ - > <スタイルタイプ=テキスト/css>テーブル{border-collapse：collapse; /* border-collapse：分離; * / /*テーブルの列とセルの境界線が単一の境界線に結合されているのか、標準のHTMLのように分離されているのかを示します。 */} </style> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 bordercolor =＃ccc> <tbody> <tr> <td> cell 1 </td> <td> <td> <td> cell 3 </td> </tbody> </table> </table>最後に、Chromeブラウザでは、システムのデフォルトのテーブルボーダーカラーグレー、境界間隔は2などです。
/*ユーザーエージェントStyleSheet* / /* table {display：table;境界線崩壊：別々;境界面積：2px;ボーダーカラー：灰色; } * / / * border = 1デフォルトはborder = 1px border-top-width：1px;境界線幅：1px;境界線幅：1px;国境左翼：1px; * / /* bordercolorオブジェクトの境界色を返したり設定したりします。カラー名またはRGBカラーコードのいずれかを指定します。 */これは、テーブルのCESLLPACINGとCellPaddingの違いの詳細に関する記事です。テーブルでのCESLLPACINGおよびCELLPADDINGのより関連するコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！