HTML

【HTML】のtableタグとは？使い方を解説

この記事では、<table>タグの基本的な使用法と、テーブル内でのデータの配置方法について説明します。

tableタグとは？

<table>タグは、ウェブページ上に表を作成するために使用されます。
テーブルを使用すると、データを視覚的に整理し、読みやすくすることができます。

tableタグの基本的な使い方

<table>タグは、テーブル全体を囲むために使用されます。

以下に、基本的な<table>タグの構造を示します。

<table>
  <!-- テーブルの中身 -->
</table>

テーブルの行とセル

テーブル内のデータは、行(<tr>)とセル(<td>)の組み合わせで作成されます。

1つの行は<tr>タグで定義され、行内のデータはセル(<td>)タグで囲まれます。

以下に、テーブル内に2つの行と3つのセルを持つ例を示します。

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
  </tr>
  <tr>
    <td>セル4</td>
    <td>セル5</td>
    <td>セル6</td>
  </tr>
</table>

テーブルの見出し

テーブルに見出しを追加する場合、見出し行(<th>)を使用します。

見出しセル(<th>)は、通常のデータセル(<td>)と異なり、太字で表示されることがあります。

以下に、テーブル内に見出し行を追加した例を示します。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>国籍</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>25</td>
    <td>日本</td>
  </tr>
  <tr>
    <td>Smith</td>
    <td>30</td>
    <td>アメリカ</td>
  </tr>
</table>

テーブルの属性

<table>タグには、さまざまな属性を追加することもできます。

たとえば、border属性を使用してテーブルの境界線を表示することができます。

他にも、width属性やalign属性を使用して、テーブルの幅や配置を指定することができます。

<table border="1" width="100%" align="center">
  <!-- テーブルの中身 -->
</table>

  • border: テーブルの境界線の太さを指定します。値として0を指定すると境界線を非表示にすることもできます。
  • width: テーブルの幅を指定します。値としてpx（ピクセル）や%（パーセント）などを指定できます。
  • align: テーブル全体の水平方向の配置を指定します。値としてleft、center、rightを指定できます。

これらの属性を使用することで、テーブルの見た目やレイアウトをカスタマイズすることができます。

テーブルに関するタグの一覧

  • <table>: 表の開始を示す要素です。
  • <tr>: 表の行を示す要素です。
  • <th>: テーブルのヘッダセル（列の見出し）を示す要素です。
  • <td>: テーブルのデータセル（実際のデータ）を示す要素です。

この基本構造をベースに、複数の行や列を追加することで、より複雑な表を作成することができます。

まとめ

以上がHTMLの<table>タグについての基本的な解説です。

<table>タグは、データの整理や表示に非常に便利です。さまざまな属性や要素を活用して、魅力的なテーブルを作成してみてください。

 

 

-HTML