コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTML テーブルの知識の概要

小云云
リリース： 2017-11-17 14:29:28
オリジナル
2035 人が閲覧しました

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

1. <テーブル>マーク

a、基本フォーマット<テーブル属性1=「属性値」>/テーブル> 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 ,マーク

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

b. 使用方法は? 属性の挿入位置は

属性の直後、 表の行の前

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

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

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

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

3,

マーク

は、テーブルの各行を

... タグで表し、 タグの各行は複数の タグ内にネストされ、ペアで指定する必要があります。
をネストできます。 ; または タグ

b、オプションの属性

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

ボタン: 上に配置

上: 下に配置

中央: に配置center

4、

a、

 および は両方とも
はヘッダー タグで、通常は最初の行または列に配置されます。 は太字になりません。セルの特定のデータを示すデータマーク

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 テーブル プロパティの包括的な紹介

HTML テーブルの再発見

HTML テーブルの詳細な紹介

HTML テーブル レイアウトの実際の使用方法

テーブルレイアウト例

以上がHTML テーブルの知識の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
html 要約する シート
ソース：php.cn
前の記事：CSS、JS サイコロ宝くじのソースコード 次の記事：jsでHTMLをPDFに変換する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート