表を HTML にインポートするにはどうすればよいですか?

HTMLに表を挿入する方法

ウェブページに情報を構造化して表示するために、表は欠かせない要素です。外部ファイルから表をインポートする方法を含め、HTMLに表を挿入する方法はいくつかあります。この記事では、様々な方法と、それぞれの使用例について詳しく説明します。

1. HTMLコードを使って表を作成する

最も基本的な方法は、HTMLの

、、
、タグを使って表を直接作成することです。

例:


<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>田中太郎</td>
    <td>30</td>
  </tr>
</table>

出力:

名前 年齢
田中太郎 30

2. 別のHTMLファイルから表をインポートする

別のHTMLファイルから表をインポートして、同じスタイルシートを使用するには、HTMLの<object>タグを使用し、表を含むHTMLファイルのURLを指定します。

例:

table.html:


<table>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
</table>

index.html:


<object data="table.html"></object>

この例では、<object>タグのdata属性を使用して、表を含むHTMLファイルのURLを指定しています。

出力:

index.htmlにtable.htmlの内容が表示されます。

よくある質問

1. 表のスタイルをCSSで変更するにはどうすればよいですか？

<style>タグを使用して、HTMLファイルにCSSを追加するか、外部CSSファイルにリンクします。表の要素（table、tr、td、th）を選択し、希望のスタイルを適用します。

2. 別のウェブサイトから表をインポートできますか？

セキュリティ上の理由から、別のウェブサイトから表を直接インポートすることはできません。ただし、表のデータをコピーしてHTMLファイルに貼り付けることはできます。

3. 表のセルを結合するにはどうすればよいですか？

colspan属性（列の結合）またはrowspan属性（行の結合）を使用します。これらの属性は、結合する列数または行数を指定します。