LabEx
ログイン無料登録

HTML テーブルの行

HTMLHTMLBeginner
オンラインで実践に進む

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

表は、構造化された形式でデータを提示するために使用できます。任意の表の基本コンポーネントは、セルの行を定義する表の行 () 要素です。表の行は、表 (

) 要素の中に囲まなければなりません。この実験では、HTML の表の行を作成する方法を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を書く方法 を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

HTML テーブル構造の作成

HTML テーブルを作成するには、まずテーブルの構造を定義する必要があります。index.html という名前の HTML ファイルを作成して始めましょう。次のコードをファイルに追加します。

<!doctype html>
<html>
  <head>
    <title>My Table</title>
  </head>

  <body>
    <table>
      <tr>
        <th>Header Cell 1</th>
        <th>Header Cell 2</th>
      </tr>

      <tr>
        <td>Data Cell 1</td>
        <td>Data Cell 2</td>
      </tr>
    </table>
  </body>
</html>

このコードでは、2 行 2 列の HTML テーブルを作成しました。最初の行には 2 つのヘッダーセル (

要素を追加する必要があります。たとえば、既存の 要素の間に次のコードを追加して、テーブルに別の行を追加します。

<tr>
  <td>Data Cell 3</td>
  <td>Data Cell 4</td>
</tr>

これで、テーブルには 3 行あり、各行には 2 つのセルが含まれます。

表の行にスタイルを追加する

CSS を使って表の行にスタイルを追加することができます。偶数行に背景色を追加するには、次のスタイルを 要素に追加します。

<style>
  tr:nth-child(even) {
    background-color: lightgray;
  }
</style>

このコードは、表の 2 行目ごとに lightgray の背景色を追加します。

表の行をマージする

rowspan 属性を使って、2 つ以上の隣接する行を 1 つの行にマージすることができます。たとえば、最初の 2 行を 1 つの行にマージしたいとしましょう。最初の

要素を次のコードに置き換えます。

<tr>
  <th rowspan="2">Header Cell 1</th>
  <th>Header Cell 2</th>
</tr>

最初のヘッダーセルの rowspan="2" 属性により、最初の 2 行が 1 つの行にマージされます。

表セルのヘッダーを作成する

表でヘッダーセルを作成するには、

) が含まれ、2 番目の行には 2 つのデータセル () が含まれています。

さらに行を追加する

テーブルにさらに行を追加するには、テーブルにさらに

要素を使用できます。ヘッダーセルは通常、列の内容を説明するために使用されます。最初の列にヘッダーセルを追加するには、2 行目の最初の 要素を次のコードに置き換えます。

<th scope="row">Data Cell 1</th>
 要素の `scope="row"` 属性は、これが最初の行のヘッダーセルであることを指定します。

まとめ

この実験では、HTML の表の行を作成し、CSS を使って表をカスタマイズする方法を学びました。また、隣接する行をマージし、表内にヘッダーセルを作成する方法も学びました。これらのスキルを使えば、Web ページに美しく構造化された表を作成できるようになりました。

関連 HTML コース
初心者のための HTML

初心者のための HTML

HTML
初級
HTML のクイックスタート

HTML のクイックスタート

HTML
初級
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

HTMLCSSJavaScript
初級