ホームページ > 記事 > ウェブフロントエンド > HTML テーブルの知識の概要

HTML テーブルの知識の概要

小云云オリジナル: 2017-11-17 14:29:281972ブラウズ

プログラマーの扉に足を踏み入れるために、私たちが通らなければならない道は HTML です。基本的な HTML をマスターすることによってのみ、次のテクノロジーをより良く学ぶことができます。そこで、今日は HTML テーブルに関連するあらゆる側面の知識を共有します。

1. c97ed25cbe2283fd0e9facdd8ee08567マーク

a、基本フォーマット9c560bd95ed8bf07513bdc490e254bea/テーブル> b、テーブルマーク属性

; : テーブルの幅を表す値は、親要素のピクセル (px) または 100% (%) です。親要素のレベル要素の割合(%)

Border属性：表の外枠の幅を示します

Align属性：表の表示位置、値leftが左に表示されCenterが上に表示されます。中央右が右側に表示されますデフォルトの左

Cellspacing属性: Cell time Spacing、デフォルト2px、単位ピクセル

cellpadding属性: セルの内容とセルの境界線の間の距離を表示、単位ピクセル

frame属性: の表示距離を制御しますtable border

void（デフォルト値）はボーダーなしを意味します

上は上ボーダーのみを意味します

下は下ボーダーのみを意味します

hsidesは上ボーダーと下ボーダーのみを意味します

lhsは左ボーダーのみを意味します

rhs は右側の境界線のみを意味します

vsides は左側と右側のみを意味します Border

box には 4 つの境界線がすべて含まれます

border には 4 つの境界線がすべて含まれます

rules 属性: セル間の分割線を表示するかどうか、および表示する方法を制御します

なし(デフォルト値) 分割線なしを意味します

all はすべての分割線を含む

rows は行分割線のみを意味します

clos は列分割線のみを意味します

groups は行結合列グループ間の分割線のみを意味します

c, make aシンプルなウェブページのレイアウト

2 ,63bd76834ec05ac1f4c0ebbeaafb0994マーク

a、いつ使うの？使用する場合表にタイトルを使用する必要がある場合は、63bd76834ec05ac1f4c0ebbeaafb0994 マークを使用できます

b. 使用方法は? 63bd76834ec05ac1f4c0ebbeaafb0994 属性の挿入位置は f5d188ed2c074f8b944552db028f98a1 属性の直後、a34de1251f0d9fe1e645927f19a896e8 表の行の前

; Top: タイトルは表の先頭に配置されます

ボタン: タイトルが表に配置されます下部

左: タイトルが表の左側に配置されます

右: タイトルが表の右側に配置されます

3, a34de1251f0d9fe1e645927f19a896e8マーク

は、テーブルの各行を a34de1251f0d9fe1e645927f19a896e8...fd273fcf5bcad3dfdad3c41bd81ad3e5 タグで表し、a34de1251f0d9fe1e645927f19a896e8 タグの各行は複数の b6c5a531a458a2e790c1fd6421739d1c をネストできます。 ; または b4d429308760b6c2d20d6300079ed38e タグ

b、オプションの属性

レベルを設定します配置形式: align="color value"

ボタン: 上に配置

上: 下に配置

中央: に配置center

4、b4d429308760b6c2d20d6300079ed38e

a、b6c5a531a458a2e790c1fd6421739d1c および b4d429308760b6c2d20d6300079ed38e は両方とも a34de1251f0d9fe1e645927f19a896e8 タグ内にネストされ、ペアで指定する必要があります。 b4d429308760b6c2d20d6300079ed38e はヘッダータグで、通常は最初の行または列に配置されます。b6c5a531a458a2e790c1fd6421739d1c は太字になりません。セルの特定のデータを示すデータマーク

d. 両方のマーク属性は同じです

e、属性

bgcolor: セルの背景を設定します

Align: セルの背景を設定します

valign: セルの垂直方向の配置を設定します

width: セルの幅を設定

Height: セルの高さを設定

rowspan: セルが占める行数を設定

clospan: セルが占める列数を設定

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="960" height="250" border="1" cellpadding="10" frame="box" >
        <caption>表格的标题</caption>
    <tr bgcolor="#ccc">
        <th bgcolor="red">班级</th>
        <th>姓名</th>
        <th>年级</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>四年级一班</td>
        <td>张三</td>
        <td>16</td>
        <td>80</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>李四</td>
        <td>16</td>
        <td>70</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>王五</td>
        <td>16</td>
        <td>60</td>
    </tr>
    </table>
</body>
</html>

上記はいくつか関連しています。最も基本的な HTML テーブルの内容については、上記のチュートリアルに従ってテーブルを完成させると、多くのことが得られると思います。

HTML テーブルの知識の概要

関連記事