ホームページ >ウェブフロントエンド >CSSチュートリアル >テーブルのセルスペースとセルパディングの違い
テーブルのセルスペースとセルパディングの違い
- Guanhui転載
- 2020-06-28 18:09:555455ブラウズ
テーブルとは何ですか?表内の b6c5a531a458a2e790c1fd6421739d1c の数は、各行の a34de1251f0d9fe1e645927f19a896e8 で囲まれたセルの数によって決まります。さらに、CSS スタイル 080b747a20f9163200dd0a7d304ba388table tr td,th{border:1px Solid #000;};# # を追加する前に、デフォルトのテーブル table がテーブル行なしでブラウザに表示されます。
#HTML での一般的なテーブルの記述方法: A.a34de1251f0d9fe1e645927f19a896e8…fd273fcf5bcad3dfdad3c41bd81ad3e5: テーブルの行、複数の行と同数の tr テーブルのペア; B.b6c5a531a458a2e790c1fd6421739d1c…69a4a538b0b8a585eeb41f2e34eabb36 : テーブルのセル。行には b6c5a531a458a2e790c1fd6421739d1c...b90dd5946f0946207856a8a37f441edf のペアがいくつか含まれており、行内に列が何個あるかを示します。C.b4d429308760b6c2d20d6300079ed38e...25d0b01bcc5cf6d8486e4103351aeefe/*概要の内容はブラウザでは表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。 / セル間隔コードの比較: <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 属性は、セルの内容とセルの境界の間の空白の距離のサイズを指定するために使用されることに注意してください。この属性のパラメータ値も数値であり、セルの内容と上下の境界線の間の空白距離の高さが占めるピクセル数と、セルの内容と上下の境界線の間の空白距離の幅が占めるピクセル数を表します。セルの内容と左右の境界線。 
コード表示: 
<!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 サイトの他の関連記事を参照してください。