テーブルタグ(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 上級プログラミング: 変数とスコープ

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

推薦する

Docker x509 の安全でないレジストリ問題を解決する

Docker をインストールした後、会社が構築したプライベート サーバー Harbor からプルしよ...

Linux での Apache サービスの展開と構成

目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...

JDBC 探索 SQLException 分析

1. SQLExceptionの概要JDBC を使用してデータ ソース (この記事のデータ ソースは...

Nginx リバース プロキシと負荷分散の実践

リバースプロキシリバースプロキシとは、プロキシサーバーを介してユーザーのアクセス要求を受信し、ユーザ...

高速レイアウトのための CSS ビューポート単位

CSS ビューポート ユニットはここ数年登場しており、時が経つにつれて、ますます多くの開発者が使用し...

mysql 5.7.18 winx64 パスワード変更

MySQL 5.7.18 が正常にインストールされた後、バージョン 5.7 では空のパスワードでのロ...

163 メールボックスログインボックスインタラクティブデザインの改善体験と共有

LOFTER のコンテストで、ログイン ボックスを再設計できると言及されているのを見ました。過去 2...

MySQLのグローバルロックとテーブルロックに関する詳細な理解

序文ロックの範囲に応じて、MySQL のロックは、グローバル ロック、テーブル ロック、行ロックに大...

docker を使用した pxc クラスターのインストールに関する詳細なチュートリアル

目次序文事前準備ディレクトリを作成するcustom.cnf を作成する証明書を作成するpxc クラス...

mysql 5.7.18 winx64 無料インストール設定方法

1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...

Tomcat が IDEA のコンソールで文字化けを起こし、IDEA エンコーディングを UTF-8 に設定する方法

1. まず、TomcatログのエンコーディングとIdeaログ表示コンソールのエンコーディングを区別す...

Linux ファイアウォールの状態確認方法の例

Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...

MySQLで数千万のテストデータを素早く作成する方法

述べる:この記事で扱うデータ量は 100 万です。数千万のデータが必要な場合は、量を増やすだけで済み...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

HTML における src と href の違いについての簡単な説明

簡単に言うと、srcは「このリソースをロードしたい」という意味で、hrefは「このリソースに関連付け...