ホームページ > ウェブフロントエンド > htmlチュートリアル > 第6章 テーブル要素_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 11:19:47
オリジナル
1014 人が閲覧しました

学習ポイント:

1. テーブル要素の概要

2. テーブル分析の構築

講師: Li Yanhui

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

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

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

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>
ログイン後にコピー
説明:
gt;基本的なテーブルの構築

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

<thead>    <tr>        <th>姓名</th>        <th>性别</th>        <th>婚姻</th>    </tr></thead>
ログイン後にコピー

説明:

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

4.テーブル脚部の追加

<tfoot>    <tr>        <td colspan="3">统计:共两名</td>    </tr></tfoot>
ログイン後にコピー

説明:

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

5.

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

<tbody>    <tr>        <td>张三</td>        <td>男</td>        <td>未婚</td>    </tr>    <tr>        <td>李四</td>        <td>女</td>        <td>已婚</td>    </tr></tbody>
ログイン後にコピー

説明:

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

6.

列の設定

<colgroup span="2" style="background:red;">
ログイン後にコピー

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

8.

より柔軟な列設定

<colgroup>    <col>    <col style="background:red;" span="1"></colgroup>
ログイン後にコピー

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

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

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

<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 など) を含みます。

3.

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

<caption>这是一个人物表</caption>
ログイン後にコピー

説明:

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

7.
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート