編集可能な HTML テーブルを作成する
この記事では、HTML テーブルの作成と、そのセルを編集可能にする方法について説明します。
HTML テーブルにセルを作成する
Web ページを作成するとき、データ表現用のテーブルを作成する必要がある場合があります。 HTML は、それを実現するために table 属性を提供します。
テーブルにセルを作成する構文は次のとおりです。
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
上記のコードでは、いくつかの要素を見ることができます。 <tr> は、テーブルの行を作成するためのものです。 この内部では、行内のセルを構築するために使用される <td> 要素を使用しています。
完全な HTML コード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>HTML Table</title>
</head>
<body>
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
</body>
</html>
ご覧のとおり、1つのセルを含むテーブルを取得しました。 ただし、スタイルを指定していないため、プレーン テキストとして表示されます。
セルにいくつかのスタイルを追加しましょう。
table {
background-color: rgb(139, 220, 247);
width: auto;
}
td{
border: 1px solid #000000;
text-align: center;
padding: 16px;
}
上記の出力では、テーブル セルとして表示されます。
HTML で編集可能なテーブルを作成する
場合によっては、ユーザーがテーブルのセルの内容を変更しなければならないことがあります。
HTML の table 要素は、ユーザーが編集可能なセルを作成できる contenteditable プロパティを提供します。 これを使用すると、表のセルを簡単に編集できます。
contenteditable 属性を使用してセルを編集可能にする構文は次のとおりです。
構文：
contenteditable = "value"
contenteditable 属性の値として true または false を指定できます。 値が true の場合、セルは編集可能ですが、値が false の場合、セルは編集できません。
同じスタイルの前の例を使用して、それを行う方法を見てみましょう。 それに応じて、セルのデータを変更できます。
<table>
<tr>
<td contenteditable="true">This is a cell</td>
</tr>
</table>
上記のコード例では、<td> 要素内に contenteditable 属性を追加しました。 次に、値を true に設定します。
その結果、以下のように編集可能なセルを作成できます。 セルを編集するには、セルをダブルクリックします。
contenteditable 属性の値として false を指定するとどうなるか見てみましょう。
<table>
<tr>
<td contenteditable="false">This is an editable cell</td>
</tr>
</table>
ご覧のとおり、テーブルのデータまたはコンテンツは編集できなくなりました。 true と false の両方の値は、さまざまな場合に重要です。
一部の開発者は、テーブルを使用してフォームやその他のものを作成します。 一部のデータをそのままにしておく必要がある場合があります。その場合、開発者は false 値を使用できます。
上記の例のように、ユーザーが変更できるデータがある場合は、true オプションを使用できます。
それでは、true と false の両方を使用できるテーブルを作成しましょう。
たとえば、講師が Web ページ上に 3 人の学生のデータを格納するテーブルが必要であると仮定して、それを実装します。 列ヘッダーとして学生 ID、名前、および成績が必要であり、名前および成績列の下に追加するデータは編集可能でなければなりません。
その理由は、彼が名前を不正確に入力する可能性があるためです。 また、生徒から再訂正を求められる可能性があるため、成績を変更する必要がある場合もあります。
次のコード チャンクを使用してテーブルを作成してみましょう。
<table>
<!-- Creating the first row as table headers -->
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<!-- Creating the second row -->
<tr>
<td>001</td>
<td>Simon Nick</td>
<td>A</td>
</tr>
<!-- Creating the third row -->
<tr>
<td>002</td>
<td>John Robbert</td>
<td>C</td>
</tr>
<!-- Creating the fourth row -->
<tr>
<td>007</td>
<td>Chris Henderson</td>
<td>B</td>
</tr>
</table>
テーブルにいくつかのスタイルを追加することで、テーブル セルを個別に表示できます。
table {
background-color: beige;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
今、私たちの表は以前よりもはっきりと見えます。
次のステップは、編集可能なセルを設定することです。 以下のように、関連する値を持つ関連するセルに contenteditable 属性を追加しましょう。
<table>
<!-- Creating the first row as table headers -->
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">001</td>
<td contenteditable="true">Simon Nick</td>
<td contenteditable="true">A</td>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">002</td>
<td contenteditable="true">John Robbert</td>
<td contenteditable="true">C</td>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">007</td>
<td contenteditable="true">Chris Henderson</td>
<td contenteditable="true">B</td>
</tr>
</table>
上記のコードのように、Name と Grade に関連するすべてのセルに true 値を持つ contenteditable 属性を設定しました。
上記のコードを実行すると、Student ID セルを除くすべてのセルが以下のように編集可能になります。
Names と Grades を編集する際の出力:
Student ID セルを編集しようとしたときの出力:
ご覧のとおり、contenteditable の値が false であるため、Student ID セルを編集できません。
まとめ
この記事では、HTML テーブルを作成する方法と、いくつかの例を使用してそのテーブルを編集可能にする方法について説明しました。 また、true と false の値とともに contenteditable 属性を使用する方法も学びました。
編集可能なセルが必要な場合は、値として true を割り当てます。その機能が必要ない場合は、値として false を設定するか、属性を削除します。
JavaScript を使用してセルを編集可能にすることができますが、これは目標を達成するための簡単な方法です。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.