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

HTML テーブルタグ

WBOY
リリース： 2024-09-04 16:20:22
オリジナル
1228 人が閲覧しました

HTML テーブルは、セルの行と列に関してテキスト、画像、リンクなどのデータを取得または定義する方法を提供します。 HTML テーブルは、

を使用して作成できます。タグ。デフォルトでは、テーブルのデータは左揃えになります。このトピックでは、HTML テーブル タグについて学習します。

テーブルは、

を使用して作成できます。タグ。

  • 番目>タグは表の見出しを定義します。
タグは、行の作成に使用されるテーブル行を指定します。

テーブル データは、テーブルのコンテンツテーブル>内で構造化できます。多数のテーブル要素を含む

構文

<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
</table>
ログイン後にコピー

HTML テーブルタグの例

以下に HTML テーブル タグの例を示します

1.基本的なテーブルの使用法

例:

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

拡張子 .html を付けてコードを保存し、ブラウザで開きます。次の出力が表示されます:

HTML テーブルタグ

2.表のキャプション

表のキャプションは、<caption>

タグを使用して指定できます。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードは以下の出力を表示します:

HTML テーブルタグ

3.表のセル間隔

表のセルのスペースは、cellspacing 属性を使用して定義できます。 cellpacing 属性は、表のセル間のスペースを指定します。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードは次の出力を表示します:

HTML テーブルタグ

4.表のセルのパディング

表のセルのパディングは、cellpadding 属性を使用して定義できます。表のセルの境界線とデータの間の cellpadding 属性の距離。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードは以下の出力を表示します:

HTML テーブルタグ

5.列と行のスパン属性

rowspan 属性を使用すると、テーブルの 2 つ以上の行を 1 つの行にマージできます。また、colspan 属性を使用すると、テーブルの列を 1 つの列にマージできます。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>
ログイン後にコピー

コードにより次の出力が表示されます:

HTML テーブルタグ

6.テーブルの背景

bgcolor 属性を使用してテーブルの背景を作成できます。表のセルの境界線は、border-color 属性を使用して指定できます。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードを実行すると、以下の出力が表示されます:

HTML テーブルタグ

7.テーブルの高さと幅

width 属性と height 属性を使用して、テーブルの高さと幅を設定できます。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードは次の出力を表示します:

HTML テーブルタグ

8.テーブルセルのスタイリング

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
table#mytable tr:nth-child(even) {
background-color: #FAD7A0;
}
table#mytable tr:nth-child(odd) {
background-color: #E67E22;
}
table#mytable th {
color: white;
background-color: teal;
}
</style>
<body>
<table id="mytable" border = "1" width = "450" height = "350">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードを実行します。以下の出力が得られます:

HTML テーブルタグ

8.ネストされたテーブル

あるテーブルを別のテーブル内で使用できることを、ネストされたテーブルと呼びます。

ネストされたテーブルの以下の例を考えてみましょう:

例

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250">
<tr>
<td>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
ログイン後にコピー

上記のコードは次の出力を表示します:

HTML テーブルタグ

テーブルの属性

以下の属性は次のとおりです:
  • align: この属性は、要素内のコンテンツの配置を提供します。
  • bgcolor: この属性はテーブルの背景色を指定します。
  • border: この属性は、表のセルの境界線を指定します。
  • cellpadding: この属性は、表のセルと表のコンテンツの間のパディングを表示します。
  • cellspacing: この属性は、表のセル間のスペースを示します。
  • frame: 外側の境界線のどの部分が表示されるかを指定します。
  • rules: これは、内側の境界線のどの部分を表示するかを指定します。
  • sortable: この属性は、テーブルがソート可能であることを通知します。
  • 概要: どのような種類のテーブル コンテンツが存在するかを示します。
  • width: この属性はテーブルの幅を示します。
  • height: この属性はテーブルの高さを指定します。

結論

これまで、HTML のさまざまなタイプのテーブル タグについて学習してきました。この例では、テーブルのスタイル設定、あるテーブルを別のテーブル内にネストする、テーブルの高さと幅の設定、テーブルのセルにスペースとパディングを追加する、テーブルの背景色の適用などの使用方法を示しました。

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

関連ラベル：
html html5 HTML Tutorial HTML Properties HTML tags
ソース：php
前の記事：HTML画像タグ 次の記事：HTMLのメタタグ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
、、
タグは、列の作成に使用されるテーブル データ セルを指定します。