HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLテーブルに水平ヘッダーを設定する方法

HTMLのテーブルには、水平（横方向）ヘッダーと垂直（縦方向）ヘッダーの両方を設定することができます。水平ヘッダーを作成するには、すべての<th>要素を単一の<tr>タグ（つまり1行）の中に記述し、その行をテーブルの最上部に配置します。これにより、各列の見出しがテーブルの上端に横一列で表示されます。

HTMLテーブルに水平ヘッダーを設定する方法

サンプルコード

以下のコードを実行して、テーブルに水平ヘッダーを設定する方法を実際に確認してみましょう。従業員の名前・年齢・担当技術という3つの列見出しを持つテーブルの例です。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Employee Details</h1>
      <table>
         <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Technology</th>
         </tr>
         <tr>
            <td>Amit</td>
            <td>27</td>
            <td>Database</td>
         </tr>
         <tr>
            <td>Sachin</td>
            <td>34</td>
            <td>Marketing</td>
         </tr>
      </table>
   </body>
</html>

実行結果

このコードをブラウザで表示すると、「Name」「Age」「Technology」という見出しが最上行に横並びで表示され、その下に各従業員のデータが整然と配置されたテーブルが描画されます。

HTMLテーブルに水平ヘッダーを設定する方法


  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n