- 前に書かれている：Bilibili dark horse programmer pink Teacherのチュートリアルを参照してください
- アドレス：https : //www.bilibili.com/video/BV14J4114768?t=328&p=26
目次
テーブル（使用します）
- テーブル機能：
- 存在は合理的です。表形式はまだ一般的に使用されるラベルですが、レイアウトには使用されません。表形式のデータを表示および表示することは一般的です。
- データを非常に規則正しく読みやすく表示できるからです。
- 特にバックグラウンドでデータを表示する場合、テーブルを上手に使用することが非常に重要です。更新されたシンプルなテーブルは、複雑なデータを非常に整理された方法で表示できます。divレイアウトも実行できますが、便利なテーブルは常にありません。
テーブルを作成
- テーブルを作成するための基本的な構文：
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table>
- テーブル、行、セルの構成を深く理解するため。
- 上記の文法では、HTMLタグには、table、tr、tdという3つの基本的なペアがあります。これらは、テーブルを作成するための基本的なタグです。これらは必須であり、以下で詳しく説明します。
テーブル テーブルラベルの定義に使用 tr テーブルの行を定義するために使用され、テーブルタグでネストする必要があります td テーブルのセルを定義するために使用され、<tr> </ tr>タグにネストする必要があります
- 文字tdは、データセルの内容であるテーブルデータを示します。テーブルの最も適切な場所は、データの格納です。
- 総括する：
- テーブルの主な目的は、特別なデータを表示することです
- 完全なテーブルは、テーブルラベル（テーブル）、行ラベル（tr）、セルラベル（td）で構成され、列ラベルはありません。
- タイプ<td> </ td>のセルのみを<tr> </ tr>にネストできます
- <td> </ td>タグはコンテナのようなもので、すべての要素を保持できます
テーブル属性
- 頻繁に使用しないテーブルの属性がいくつかあります。ここでは、セルスペースとセルパディングに焦点を当てています。
- 多くの場合、3つのパラメーターは0であり、3つのパラメーターであるボーダーセルパディングセルスペース（通常、開発）は0です。
- 場合
<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center"> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr> <td>刘德华</td> <td>男</td> <td>55</td> </tr> <tr> <td>郭富城</td> <td>男</td> <td>52</td> </tr> <tr> <td>张学友</td> <td>男</td> <td>58</td> </tr> <tr> <td>黎明</td> <td>男</td> <td>18</td> </tr> <tr> <td>刘晓庆</td> <td>女</td> <td>63</td> </tr> </table>
ヘッダーセルラベルth
- 効果：
- 通常、ヘッダーセルはテーブルの最初の行または列にあり、テキストは太字で中央に配置されます
- 文法：
- ヘッダータグ<th> </ th>を使用して、対応するセルタグ<td> </ td>を置き換えます。
- ケース：
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0"> <tr> <th>姓名</th> <th>性别</th> <th>电话</th> </tr> <tr> <td>小王</td> <td>女</td> <td>110</td> </tr> <tr> <td>小明</td> <td>男</td> <td>120</td> </tr> </table>
- thもセルですが、通常のtdセルとは異なり、テキスト自体を中央揃えして太字にします。
表のタイトルのキャプション
- 定義と使用法
<table> <caption>我是表格标题</caption> </table>
- 注意：
- caption要素は、テーブルのタイトルを定義します。通常、タイトルは中央に配置され、テーブルに表示されます
- キャプションタグはテーブルタグの直後に続く必要があります
- このタグは表でのみ意味があります
セルを結合する（難易度）
セルを結合する2つの方法
銀行間合併 rowspan = "結合されたセルの数" 列間でマージ colspan = "結合されたセルの数"
セルの順序を結合
- マージの順序は、上、下、左、右の順です。
マージセルの三部作
- まず、行全体または列全体をマージするかどうかを決定します
- によると、最初の左と右の最初から下にターゲットセルを見つけてから、マージと、マージするセルの数を書き込みます
- 比如：<td colspan = "3"> </ td>
- 余分なセルを削除する
要約表
ラベル名 定義 説明 <表> </表> フォームラベル ただ四角い箱 <tr> </ tr> テーブル行ラベル 行ラベルはテーブルラベル内でのみ意味があります <td> </ td> 細胞ラベル セルラベルはコンテナレベルの要素であり、何でも置くことができます <th> </ th> ヘッダーセルラベル セルのままですが、中のテキストは中央揃えで太字になります <caption> </ caption> テーブルタイトルタグ 表のタイトル、表の後に、表の中央を揃えます clospanとrowspan 属性のマージ セルを結合するために使用されます
- テーブルは、HTMLで表形式のデータを定義する方法を提供します。
- テーブルは行のセルで構成されます。
- テーブルには列要素がなく、列の数は行のセルの数によって異なります。
- CSSの役割であるテーブルの外観については心配しないでください。
- テーブル学習の要件：テーブル構造を手動で記述でき、セルを簡単に結合できます。
テーブル分割構造（理解）
- より複雑なテーブルの場合、テーブルの構造は比較的複雑であるため、テーブルはヘッダー、本文、脚注の3つの部分に分かれています。そして、これらの3つの部分はそれぞれ、テーブル構造をより明確に区別できるように、thead、tbody、tfootでマークされています。
- 注意：
- <thead> </ thead>：テーブルのヘッドを定義するために使用されます。タイトルのようなものを置くために使用されます。<thead>には<tr>タグが必要です！
- <tbody> </ tbody>：テーブルの本体を定義するために使用されます。データ本文を入れます。
- <tfoot> </ tfoot>表の脚注などを付けます。
- 上記のタグはすべてtableタグに配置されます。
