HTMLでテーブルを作成する-htmlチュートリアル-php.cn

HTML テーブルには、データを挿入、配置、表示できる多数の行と列があります。このデータは Web ページに表形式で表示されます。これらのテーブルは、アイテムのリストの表示、販売レポートなどの表形式のデータの表示、Web ページのセクションのレイアウトの作成など、データを整然とした方法で表示するのに役立ちます。

この記事では、次のタイプの HTML テーブルを作成する方法を学びます:

シンプルテーブル
ボーダーとパディングのあるテーブル
スタイル付きテーブル
キャプション付きの表
ネストされたテーブルを含むテーブル
列スパンと行スパンを含むテーブル
colgroup を含むテーブル

HTML でテーブルを作成するための基本事項

テキストエディターまたは HTML エディター: テキストエディターまたは Notepad++、Sublime Text、Visual Studio Code などの HTML エディターを開いて、HTML コードを作成して保存します。デフォルトのエディタとして Notepad++ を使用しましたが、任意のエディタを使用できます。
HTML ファイル: Notepad++ で新しいファイルを作成します。「table.html」またはその他の任意の名前を付けますが、ファイル名の末尾を「.html」にすることを忘れないでください。このファイルには、Web ページのコードを記述します。このファイルの作成にヘルプが必要な場合は、チュートリアル「HTML で Web ページをデザインする」を参照してください。
HTML コード: この記事では、さまざまなタイプのテーブルを作成するために必要なコードをすべて提供しました。コードをコピーして「table.html」ファイルに貼り付けるだけです。
Web ブラウザ: 「table.html」ファイルへの HTML コードの記述が完了したら、Web ページを表示してテストする必要があります。 Google Chrome、Mozilla Firefox、Microsoft Edge などの Web ブラウザを使用できます。この記事のすべての例では、Web ページを表示するために Google Chrome を使用しましたが、お好みのブラウザを選択することもできます。

HTML で使用されるタグ

HTML でテーブルを作成する前に、テーブルの作成と構造に使用されるタグを理解することが重要です。 HTML テーブルの作成に使用される主なタグは次のとおりです:

テーブル>

Examples of Tables in HTML

Example 1: Simple Table

Let’s create a basic HTML table that showcases product information. We will include two columns labeled “Product” and “Price.” The table will contain a single row displaying data for the product “Apple” with a price of $20.

To create a simple HTML table:

Open an HTML file in a text or HTML editor.
Add the

Tag

Description

Defines a table and its content.

Defines a title or caption for a table.

Groups the header content in a table.

Groups the body content in a table.

Groups the footer content in a table.

Defines a table row.

Defines a table header cell.

Defines a table data/cell.

Specifies a set of one or more columns in a table for the purpose of formatting.

Defines the attributes for a group of columns in a table.

タグ

説明

<表>

テーブルとその内容を定義します。

表のタイトルまたはキャプションを定義します。

<頭>

表内のヘッダーコンテンツをグループ化します。

本文のコンテンツを表にグループ化します。

表内のフッターコンテンツをグループ化します。

テーブルの行を定義します。

テーブルのヘッダーセルを定義します。

テーブルのデータ/セルを定義します。

書式設定の目的で、テーブル内の 1 つ以上の列のセットを指定します。

テーブル内の列のグループの属性を定義します。

element to define the table.

Use the

element to create table rows.

The

tag. For instance, you can use style=”background-color: #33cccc;” to set the background color to a nice shade of teal.

Code:

<table>
<tr>
<th style="background-color: #33cccc;">Country</th>
<th style="background-color: #33cccc;">Population</th>
<th style="background-color: #33cccc;">Capital</th>
</tr>
<tr>
<td>Spain</td>
<td>47 Million</td>
<td>Madrid</td>
</tr>
<tr>
<td>Finland</td>
<td>5.5 Million</td>
<td>Helsinki</td>
</tr>
</table>

ログイン後にコピー

Output:
HTMLでテーブルを作成する

Example 4: Table with Caption

Using an HTML table with a caption is a great way to present information on a webpage in a tidy and organized manner. It’s like giving your table a title or a brief description to help people grasp its content easily. To include a caption, all you have to do is use the

element defines table headers (column labels).

Use the

element to create table cells (data).

Insert the desired data within the table cells.

Save the file with the .html extension, and then open it in a web browser to view the table.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

Output:
The resultant table for product and price will be displayed as seen below:
HTMLでテーブルを作成する

To add an additional column to the table in the example, you can use the

element within your table’s column. This element is used to define header cells for the column.

And if you want to add a new row to the table, you can use the

element. This element is used to define regular cells within the table row.

Code:

<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$10</td>
<td>15</td>
</tr>
</table>

ログイン後にコピー

Output:
HTMLでテーブルを作成する

Let’s see how to add borders to an HTML table. This is a way to visually separate the different sections of the table and make it easier to read and understand.

Example 2: Table with Borders and Padding

In this example, we will add a table element and set the border and cellpadding attribute. We will use the border attribute and set the width of the table’s border to 1 pixel. For the cellpadding attribute, we will use 5 pixels of padding for the content inside each cell.

Code:

<table border="1" cellpadding="5">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Michael</td>
<td>27</td>
<td>Alaska</td>
</tr>
<tr>
<td>Evelyn</td>
<td>32</td>
<td>Ohio</td>
</tr>
</table>

ログイン後にコピー

Output:
HTMLでテーブルを作成する

Example 3: Table with Styling

If you want to improve the appearance of your table, you can use CSS (Cascading Style Sheets) to add various styles and formatting.

One way to enhance the table is by giving different cells a background color. To do this, you can simply add the style attribute with the background-color property inside the opening

tag and place it right below the tag.

Code:

<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
caption {
background-color: #33cccc;
padding: 8px;
font-weight: bold;
}
</style>
<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>Margot Mitchell</td>
<td>Manager</td>
<td>$60,000</td>
</tr>
<tr>
<td>Ryan Arnett</td>
<td>Developer</td>
<td>$50,000</td>
</tr>
</table>

ログイン後にコピー

Output:
HTMLでテーブルを作成する

Example 5: Table with Nested Tables

In HTML, when we talk about a nested table, it means we have a table placed inside another table. So, basically, some cells in the outer table contain a whole new table structure within them. If you want to include a nested table, you just need to insert another table inside any cell of your main table. To understand better, here is an example:

Code:

<table border="1">
<tr>
<th style="background-color: #33cccc;">Device</th>
<th style="background-color: #33cccc;">Brand</th>
<th style="background-color: #33cccc;">Specifications</th>
</tr>
<tr>
<td>Smartphone</td>
<td>Apple</td>
<td>
<table border="1">
<tr>
<th style="background-color: #fddb5d;">Model</th>
<th style="background-color: #fddb5d;">Storage</th>
</tr>
<tr>
<td>iPhone 12 Pro</td>
<td>256GB</td>
</tr>
<tr>
<td>iPhone SE</td>
<td>128GB</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Laptop</td>
<td>HP</td>
<td>15.6" Display</td>
</tr>
<tr>
<td>Tablet</td>
<td>Samsung</td>
<td>10.5" Display</td>
</tr>
</table>

ログイン後にコピー

Output:
HTMLでテーブルを作成する

Example 6: Table with Col Span and Row Span

In HTML, the “colspan” and “rowspan” give you the power to merge or split cells horizontally (colspan) and vertically (rowspan) to create more advanced table structures.

If you want to merge cells horizontally, simply use “colspan” followed by the number of cells you want to merge. And if you want to merge cells vertically, you can use “rowspan” along with the number of cells you want to merge.

To use the colspan and rowspan attributes, you can add them directly within the

element to group columns in an HTML table. We can also use the tag within the tag to set a background color for specific columns. To implement this, you can simply add a right after the opening

elements that you want to merge.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.football {
background-color: #33cccc;
}
.tennis {
background-color: #33cccc;
}
.lebron {
background-color: #fddb5d;
}
.heading {
background-color: #808080; /* Grey */
color: #fff; /* White */
}
</style>
</head>
<body>
<table>
<tr>
<th class="heading">Sport</th>
<th colspan="2" class="heading">Player</th>
</tr>
<tr>
<td rowspan="2" class="football">Football</td>
<td>Lionel Messi</td>
<td>Cristiano Ronaldo</td>
</tr>
<tr>
<td>Neymar</td>
<td>Harry Kane</td>
</tr>
<tr>
<td class="tennis" rowspan="2">Tennis</td>
<td>Novak Djokovic</td>
<td>Rafael Nadal</td>
</tr>
<tr>
<td>Serena Williams</td>
<td>Naomi Osaka</td>
</tr>
<tr>
<td>Basketball</td>
<td colspan="2" class="lebron">LeBron James</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

Output:
HTMLでテーブルを作成する

Example 7: Table with Colgroup

In HTML, we use the

tag.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: #a9a9a9;">
<col style="background-color: #fddb5d;">
<col style="background-color: #33cccc;">
</colgroup>
<tr>
<th>City</th>
<th>Country</th>
<th>Continent</th>
</tr>
<tr>
<td>New York</td>
<td>United States</td>
<td>North America</td>
</tr>
<tr>
<td>London</td>
<td>United Kingdom</td>
<td>Europe</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
<td>Asia</td>
</tr>
</table>
</body>
</html>

ログイン後にコピー

Output:
HTMLでテーブルを作成する