HTMLのテーブルにテキストボックスを追加する方法

HTML CSS

HTMLのテーブルにテキストボックスを追加する方法

HTMLのテーブルにテキストボックスを追加する方法について、HTMLとCSSを分けて説明します。
以下に示すコード例では、テーブル内のセルにテキストボックスを配置しています。

まず、HTMLファイルを作成します。
ここでは、テーブルを定義し、各セルにテキストボックスを挿入しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テーブルにテキストボックスを追加する例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <table class="test-table">
    <thead>
      <tr>
        <th class="test-header">列1</th>
        <th class="test-header">列2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="test-cell">
          <input type="text" class="test-input" placeholder="入力してください">
        </td>
        <td class="test-cell">
          <input type="text" class="test-input" placeholder="入力してください">
        </td>
      </tr>
      <tr>
        <td class="test-cell">
          <input type="text" class="test-input" placeholder="入力してください">
        </td>
        <td class="test-cell">
          <input type="text" class="test-input" placeholder="入力してください">
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

次に、CSSファイルを作成し、テーブルとテキストボックスのスタイリングを行います。

/* styles.css */
.test-table {
  width: 100%;
  border-collapse: collapse;
}

.test-header {
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.test-cell {
  padding: 10px;
  border: 1px solid #ddd;
}

.test-input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
説明

この例では、HTMLでテーブルを作成し、そのセルにテキストボックスを配置しています。
inputタグのtype属性は「text」として、テキストボックスを表示するようにしています。
placeholder属性を使って、テキストボックス内にヒントを表示しています。

CSSファイルでは、テーブル、ヘッダー、セル、およびテキストボックスのスタイリングを行っています。
test-tableクラスでテーブル全体をスタイリングし、test-headerクラスでヘッダーセルの背景色やパディングを設定しています。
test-cellクラスでは、セルのパディングとボーダーを設定し、test-inputクラスでテキストボックスの幅やパディングを指定しています。

このコードを使用することで、HTMLテーブル内にテキストボックスを追加し、見た目を整えることができます。
テーブル内のセルにinput要素を追加することで、ユーザーが直接データを入力できるようになります。
また、CSSを使用して、テーブルの見た目やテキストボックスのスタイリングをカスタマイズすることができます。