テーブルとは何ですか?表内の の数は、各行の で囲まれたセルの数によって決まります。さらに、CSS スタイル table tr td,th{border:1px Solid #000;};# # を追加する前に、デフォルトのテーブル table がテーブル行なしでブラウザに表示されます。 </p>#HTML での一般的なテーブルの記述方法: A.<tr>…</tr>: テーブルの行、複数の行と同数の tr テーブルのペア; B.<td>…< ;/td> : テーブルのセル。行には <td>...</td> のペアがいくつか含まれており、行内に列が何個あるかを示します。C.<th>...< ;/th>: 表のヘッダー セル内の表ヘッダー、テキストはデフォルトで太字で中央に表示されます; D.<table summary="表の紹介テキスト">/*概要の内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。 / セル間隔コードの比較: <p></p> <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <table border="" cellspacing="" cellpadding=""> <tr><th>Header</th></tr> <tr><td>Data</td></tr> </table></pre><div class="contentsignin">ログイン後にコピー</div></div><p style="text-align: center">コードの比較。上の 2 つの表はセル間隔の設定が異なるだけで、1 つは「0」、もう 1 つは「20」です。表示される結果は、最初のテーブルの各セル間の距離は 0、2 番目のテーブルの各セル間の距離は 20 です。拡張: 2 番目のテーブルは 3 番目のテーブルと一致しますが、3 つのテーブルは一致しません。セルスペースが設定されています。border-spacing: 20px; は、cellspacing="20" と同じ結果になることがわかりました。例: 概要: cellpacing 属性は、テーブル内のセル間のギャップを指定するために使用されます。このプロパティのパラメータ値は、セル ギャップが占めるピクセル数を示す数値です。 <img alt="" src="https://img.php.cn/upload/article/000/000/046/c760bf2a3b096203b15c661ad5197a6a-0.png"/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><table border="" cellspacing="" cellpadding="" summary=""> <caption></caption> <tr><th>今天星期五/th></tr> <tr><td>today is Friday</td></tr> </table></pre><div class="contentsignin">ログイン後にコピー</div></div></p><p></p><p style="text-align: center"> 上記のコードを実行した結果から判断すると、2 つのテーブルにはセルパディング コード値が異なるだけです。最初のテーブルでは、「私は幸せなセル テーブルです」という単語が表示されます。 " 2 番目のテーブルの単語 "I am a happy cell table" は、それが配置されているセルから遠く離れています。これは、cellpadding="0" が設定されているためです。つまり、cellpadding="20" であるためです。 、「私は幸せなセルテーブルです」とそれが配置されているセルの境界線の間の距離は20ピクセルです。簡単に言うと、cellpadding の値は、テーブル内のセルがその境界線から内側にどれだけの空白スペースを保持するかに等しく、セル内の要素がそれらの空白スペースに入ることはありません。 ||cellpadding 属性は、セルの内容とセルの境界の間の空白の距離のサイズを指定するために使用されることに注意してください。この属性のパラメータ値も数値であり、セルの内容と上下の境界線の間の空白距離の高さが占めるピクセル数と、セルの内容と上下の境界線の間の空白距離の幅が占めるピクセル数を表します。セルの内容と左右の境界線。 <img alt="" src="https://img.php.cn/upload/article/000/000/046/c760bf2a3b096203b15c661ad5197a6a-1.png"/></p>例: 概要: cellpacing はセル間の距離を表し、cellpadding はセルの内容と境界線の間の距離を表します。前者はマージンのように理解され、後者はパディングのように理解されます。ネスト (セル) --テーブルの内容; ネスト パディング (テーブルの充填) (セルパディング) -- ネストとネスト スペースを区切るために使用されるネストの外側の距離を表します; ネスト スペース (テーブル間隔) (セル間隔) -- テーブルの境界線とネストを表しますパディング距離はネストフィラー間の距離でもあります<p></p>拡張 1: テーブルの行と列をマージするにはどうすればよいですか? Colspan は列全体をマージし、rowspan は行全体をマージします。<p></p><p></p><p style="max-width:90%">コード表示: <img alt="" src="https://img.php.cn/upload/article/000/000/046/c760bf2a3b096203b15c661ad5197a6a-2.png"/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!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. */ } 第一个单元格 测试1 测试2 测试3 第二个单元格 测试1 测试2 测试3 第三个单元格 测试1 测试2 测试3
