第6章テーブル要素_html/css_WEB-ITnose-htmlチュートリアル-php.cn

学習ポイント:

1. テーブル要素の概要

2. テーブル分析の構築

講師: Li Yanhui

この章では、主にテーブル要素の使用法について説明します。 HTML5。テーブルの主な目的は、2 次元データをグリッド形式で表示することです。

1つ。テーブル要素の概要

テーブルの基本構造には少なくとも 3 つの要素が必要です: 、、

、その他の要素はオプションの補助要素として存在します。 ...

theadはテーブル本体を意味しますはテーブルの足はセルの行を意味しますはタイトル行を表しますセルはセルを意味しますとは、列は列のグループを表しますはテーブルのタイトルを表します

はタイトル行を意味します

tbody

tfoot

を意味します

col

colgroup

caption

2.テーブル解析の構築

1.gt;gt;

<table border="1">    <tr>        <td>张三</td>        <td>男</td>        <td>未婚</td>    </tr>    <tr>        <td>李四</td>        <td>女</td>        <td>已婚</td>    </tr></table>

ログイン後にコピー

説明:

gt;基本的なテーブルの構築

要素はテーブルの宣言を表します。 ;tr> 要素はテーブルの行を表し、ヘッダーを追加します

<thead>    <tr>        <th>姓名</th>        <th>性别</th>        <th>婚姻</th>    </tr></thead>

ログイン後にコピー

説明:

テーブルのヘッダー部分を制限し、標準化します。特に、将来テーブルヘッダーが動的に生成される場合、その位置は固定されず、この要素を使用してヘッダーを先頭に制限することができます。

4.テーブル脚部の追加

<tfoot>    <tr>        <td colspan="3">统计：共两名</td>    </tr></tfoot>

ログイン後にコピー

説明:

要素は、テーブルの下部に制限されたテーブルのテーブル脚部を生成します。

テーブル本体を追加します

<tbody>    <tr>        <td>张三</td>        <td>男</td>        <td>未婚</td>    </tr>    <tr>        <td>李四</td>        <td>女</td>        <td>已婚</td>    </tr></tbody>

ログイン後にコピー

説明:

要素には、主にテーブル以外のヘッダーとフッターの主要部分が含まれており、テーブルの形式を明確にするのに役立ちます。後続の CSS および JavaScript 制御をより効果的に支援します。

列の設定

<colgroup span="2" style="background:red;">

ログイン後にコピー

説明: 要素は特定の列を処理するもので、span 属性はどの列を処理するかを定義します。 1 は最初の列を表し、2 は最初の 2 列を表します。 2 番目の列を個別に設定する場合は、2 つを宣言し、最初の列を最初に処理し、列ポイントを 2 番目の位置に移動してから、2 番目の列を処理する必要があります。

より柔軟な列設定

<colgroup>    <col>    <col style="background:red;" span="1"></colgroup>

ログイン後にコピー

説明: 要素は単一の列を表し、1 つは列を表し、コントロールはより柔軟です。スパンを設定すると複数のカラムを制御します。

要素はセルを表します。デフォルトでは、テーブルには境界線がないため、境界線を表示するには、要素に border 属性を追加し、それを 1 に設定します。説明:

タイトルセルをテーブルに追加します

<table border="1" style="width:300px;">    <tr>        <th>姓名</th>        <th>性别</th>        <th>婚姻</th>    </tr>    <tr>        <td>张三</td>        <td>男</td>        <td>未婚</td>    </tr>    <tr>        <td>李四</td>        <td>女</td>        <td>已婚</td>    </tr></table>

ログイン後にコピー

は主にタイトル行を追加するセルであり、その実際の機能は中央揃えと内部テキストを太字にします。ここでは共通の属性スタイルが使用されます。これは主に、後で説明する CSS スタイル設定に使用されます。

はすべてセルに属し、2 つのマージ属性 (colspan、rowspan など) を含みます。

表のタイトルを追加します

<caption>这是一个人物表</caption>

ログイン後にコピー

説明:

要素は表にタイトルを追加します。

第6章 テーブル要素_html/css_WEB-ITnose

第6章テーブル要素_html/css_WEB-ITnose