テーブルタグ(TAGS)の詳細な紹介

テーブルタグ(TAGS)の詳細な紹介
テーブルの基本構文

<table>...</table> - テーブルを定義します
<tr> - テーブル行を定義します
<th> - テーブルヘッダーを定義します
<td> - テーブル要素(テーブルの特定のデータ)を定義します

境界線のある表:


コードをコピー
コードは次のとおりです。

<表の境界線>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B


境界線のない表:

コードをコピー
コードは次のとおりです。

<テーブル>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

食べ物飲む甘い
B

テーブルスパン

複数の列にまたがる表要素 <th colspan=#>


コードをコピー
コードは次のとおりです。

<表の境界線>
<tr><th colspan=3> モーニングメニュー</th>
<tr><th>食べ物</th> <th>飲み物</th> <th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

モーニングメニュー
食べ物飲む甘い
B

複数の行にまたがる表要素 <th rowspan=#>



コードをコピー
コードは次のとおりです。

<表の境界線>
<tr><th rowspan=3> モーニングメニュー</th>
<th>食べ物</th> <td>あ</td></tr>
<tr><th>ドリンク</th> <td>B</td></tr>
<tr><th>甘い</th> <td>C</td></tr>
</テーブル>
モーニングメニュー食べ物
飲むB
甘い

テーブルサイズの設定

<表の境界線=#>

境界線のサイズ設定:


コードをコピー
コードは次のとおりです。

<表の境界線=10>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

<表の境界線の幅=# 高さ=#>

テーブルサイズの設定:


コードをコピー
コードは次のとおりです。

<表の境界線の幅=170 高さ=100>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

<表の境界線のセル間隔=#>

テーブル要素のギャップ設定:


コードをコピー
コードは次のとおりです。

<表の境界線のセル間隔=10>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

<表の境界線のセルパディング=#>

テーブル内部の空白設定:


コードをコピー
コードは次のとおりです。

<表の境界線のセルパディング=10>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

表内のテキストの配置/レイアウト

<tr align=#>

<th align=#> #=左、中央、右

<td align=#>

コードをコピー
コードは次のとおりです。

<表の境界線の幅=160>
<tr>
<th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr>
<td align=left>あ</td>
<td align=center>は</td>
<td align=right>C</td>
</テーブル>

食べ物飲む甘い
B

<tr valign=#>

<th valign=#> #=上、中、下、ベースライン

<td valign=#>

コードをコピー
コードは次のとおりです。

<表の境界線の高さ=100>
<tr>
<th>食べ物</th><th>飲み物</th>
<th>甘い</th><th>その他</th>
<tr>
<td valign=top>あ</td>
<td valign=middle>ば</td>
<td valign=bottom>C</td>
<td valign=baseline>だ</td>
</テーブル>

食べ物飲む甘い他の
B

ページ上の表の配置/レイアウト (フローティング テーブル)

<テーブルの位置を左揃え>


コードをコピー
コードは次のとおりです。

<テーブルの位置合わせ="左" 境界線>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

私のお気に入りは…<br> クッキー、チョコレートなど。
食べ物飲む甘い
B

私のお気に入り...
クッキー、チョコレートなど。

<表の配置=右>

食べ物飲む甘い
B

私のお気に入り...
クッキー、チョコレートなど。

<table vspace=# hspace=#> #=スペース値


コードをコピー
コードは次のとおりです。

<テーブルの位置合わせ="左" 境界線 vspace=20 hspace=30>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

私のお気に入りは…<br> クッキー、チョコレートなど。
食べ物飲む甘い
B

私のお気に入り...
クッキー、チョコレートなど。

表のタイトル

<caption align=#> ... </caption> #=左、中央、右

コードをコピー
コードは次のとおりです。

<表の境界線>
<caption align=center>ランチ</caption>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

ランチ

食べ物飲む甘い
B

<caption valign=#> ... </caption> #=上、下

valign=top がデフォルトです。


コードをコピー
コードは次のとおりです。

<表の境界線>
<caption valign=bottom>ランチ</caption>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

食べ物飲む甘い
B
ランチ

<<:  JavaScript 上級プログラミング: 変数とスコープ

>>:  体験をデザインする: ボタンには何があるか

推薦する

Vueが学生管理機能を実装

この記事では、学生管理を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次の...

初心者のためのウェブサイト構築入門 - ウェブサイト構築に必要な条件とツール

今日は、初心者の次のような質問に答えます。学ぶ勇気さえあれば、自分のウェブサイトを構築するのは簡単で...

Element-ui の組み込み 2 つのリモート検索 (ファジークエリ) の使用方法の説明

問題の説明フロントエンドリモート検索やファジークエリと呼ばれる種類のクエリがあります。 Ele.me...

Flex レイアウトで適応型ページを作成する (構文と例)

Flex レイアウトの紹介英語の Flex はフレキシブル ボックス、つまり伸縮性のあるボックスを...

Ubuntu での mysql のインストールと使用 (一般版)

Ubuntu のバージョンに関係なく、MySQL データベースのインストールは基本的に同じです。具...

MySQL 悲観的ロックと楽観的ロックの実装

目次序文実際の戦闘1. ロックなし2. 悲観的ロック3. 楽観的ロック要約する序文悲観的ロックと楽観...

Node.js のイベント モジュールに関する知識ポイントのまとめ

Node の研究と応用を通じて、NodeJS はシングルスレッド、イベント駆動型、非ブロッキング I...

srcまたはcss背景画像のurl値はbase64でエンコードされたコードです

ウェブ上の一部の画像の src または CSS 背景画像 URL の後に、data:image/pn...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...

MySQLのビューとインデックスの使い方と違いの詳細な説明

MySQL ビュー簡単に言えば、MySQL ビューは SELECT コマンドを定義するためのショート...

MySQL 学習ノート ヘルプ ドキュメント

システムヘルプを表示help contents mysql> ヘルプコンテンツ; ヘルプ カテ...

HTMLチュートリアル、簡単に学べるHTML言語

1. <body background=画像ファイル名 bgcolor=color text=...

ウェブサイトのパフォーマンスを向上させるためのウェブサーバーの改善

<br />このシリーズの最初のセクションでは、Web サイトのパフォーマンスを向上させ...