HTML テーブルの使用方法の簡単な分析

この記事の内容は HTML Table の使い方を簡単に分析したもので、困っている友人に役立つことを願っています。


定義と使用法

table タグは HTML テーブルを定義します。 table标签定义 HTML 表格。

创建表格的四要素：table、tr、th、td

<table> <p>整个表格以<code><table>标记开始、<code> 标记结束。

<tr> <p>Table row。表格的一行，有几对 tr 表格就有几行。</p> <h3><code><td> <p>Table data。表格的一个单元格，一行中包含几对 td ，一行中就有几列。</p> <h3><code><th> <p>Table head。表格的头部的一个单元格，表格表头。</p> <h2 id="额外元素">额外元素</h2> <h3><code><tbody>、<code><thead>、<code><tfoot><p>表格结构，如果不加<code><thead> </thead> <tbody> <tfooter> , 表格将在加载完后才显示。加上这些， <code>tbody包含行的内容优先显示，不必等待表格结束后再显示。
同时，如果表格很长，用tbody分段，可以一部分一部分地显示。
（通俗理解 table 可以按结构一块块的显示，不用等整个表格加载完后显示。）

<caption></caption>

表格标题

属性

border

表格边框的宽度。
建议设置为 0 后自行 CSS 添加边框样式。

cellpadding

表格单元边界与单元内容之间的间距（内边距）。
建议设置为 0 后自行 CSS 添加内边距样式。

cellspacing

单元格之间的间距。

实例

使用CSS3实现表格隔行变色

使用 CSS3的 :nth-child(n)

テーブルを作成する 4 つの要素: table、tr、th、td

<table> <br>テーブル全体は <code><table> タグで始まり、<code> タグ。

<tr> <p class="post-topheader custom- pt0">表の行。テーブルの行には tr のペアがいくつかあり、テーブルには複数の行があります。 </p> <h3><code><td><p class="mb20">テーブル データ。テーブルのセルには、1 行に複数の td ペアが含まれ、1 行に複数の列が含まれています。 <a href="http://www.php.cn/div-tutorial-407162.html" target="_blank" title="HTML的格式及标签介绍"><h3><code><th>テーブルヘッド。テーブルの先頭にあるセル、テーブルヘッダー。 <h2 id="追加要素">追加要素</h2> <h3 id="code-tbody-code-thead-code-tfoot-h-gt-p-class-mb-テーブル構造-code-thead-tfooter-が追加されていない場合-テーブルはロード後に表示されます-これらの追加により-テーブルの末尾が表示されるのを待たずに-code-tbody-code-に含まれる行の内容が最初に表示されます-a-href-http-www-php-cn-div-tutorial-html-target-blank-title-如何来简述html的基本结构-附代码-同時に-テーブルが非常に長い場合は-code-tbody-code-を使用してテーブルを分割し-部分ごとに表示します-a-平たく言えば-テーブル全体がロードされるのを待たずに-構造に従ってテーブルを部分的に表示できます-h-code-caption-caption-code"><code><tbody>、<code><thead>、<code><tfoot> h3><p class="mb20">テーブル構造、<code><thead> <tfooter> が追加されていない場合、テーブルはロード後に表示されます。これらの追加により、テーブルの末尾が表示されるのを待たずに、<code>tbody に含まれる行の内容が最初に表示されます。 同時に、テーブルが非常に長い場合は、tbody を使用してテーブルを分割し、部分ごとに表示します。 (平たく言えば、テーブル全体がロードされるのを待たずに、構造に従ってテーブルを部分的に表示できます。)

<caption></caption>

Table title

属性

border

🎜 テーブルの境界線の幅。 🎜これを 0 に設定し、CSS を使用して境界線スタイルを自分で追加することをお勧めします。 🎜

cellpadding

🎜 表のセル境界とセルの内容の間のスペース (パディング)。 🎜 0 に設定し、CSS を使用してパディング スタイルを自分で追加することをお勧めします。 🎜

cellspacing

🎜 セル間の間隔。 🎜🎜例🎜

CSS3 を使用して、交互の行の表の色を変更する

🎜🎜CSS3 の :nth-child(n) を使用しますcode> pseudo-class セレクターは、テーブル内の交互の行の色を変更する効果を実現できます。 🎜n 奇数行/列、偶数行/列、または指定した行/列をそれぞれ表す、奇数、偶数、または任意の数値を入力できます🎜🎜関連推奨事項: 🎜🎜🎜 HTML 形式とタグの概要🎜🎜🎜🎜簡単な方法HTMLの基本構造(コード付き)を説明します🎜🎜🎜🎜

以上がHTML テーブルの使用方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。