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

学習ポイント:

1. テーブル要素の概要

2. テーブル分析の構築

講師: Li Yanhui

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

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

テーブルの基本構造には少なくとも 3 つの要素が必要です: f5d188ed2c074f8b944552db028f98a1、a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c、その他の要素はオプションの補助要素として存在します。 ...

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

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

tbody

tfoot

tr

を意味します

th

td

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>

説明: f5d188ed2c074f8b944552db028f98a1 要素はテーブルの宣言を表します。 ;tr> 要素はテーブルの行を表し、説明: b4d429308760b6c2d20d6300079ed38e は主にタイトル行を追加するセルであり、その実際の機能は中央揃えと内部テキストを太字にします。ここでは共通の属性スタイルが使用されます。これは主に、後で説明する CSS スタイル設定に使用されます。 b4d429308760b6c2d20d6300079ed38eb6c5a531a458a2e790c1fd6421739d1c はすべてセルに属し、2 つのマージ属性 (colspan、rowspan など) を含みます。

gt;基本的なテーブルの構築		要素はセルを表します。デフォルトでは、テーブルには境界線がないため、境界線を表示するには、f5d188ed2c074f8b944552db028f98a1 要素に border 属性を追加し、それを 1 に設定します。
2.b4d429308760b6c2d20d6300079ed38eタイトル セルをテーブルに追加します	<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>

3.ae20bdd317918ca68efdc799512a9b39ヘッダーを追加します

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

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

4.06669983c3badb677f993a8c29d18845テーブル脚部の追加

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

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

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

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

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

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

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

説明: 63bd76834ec05ac1f4c0ebbeaafb0994 要素は表にタイトルを追加します。

7.879b49175114808d868f5fe5e24c4e0b列の設定

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

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

8.581cdb59a307ca5d1e365becba940e05より柔軟な列設定

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

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