【HTML入門】tableタグとは？基本的な作成方法と活用例

HTMLのtableタグは、表形式でデータを表示するための要素です。行と列で構成され、データを視覚的に整理するのに便利です。

tableタグの基本構造

基本的な構造は、<table>タグの中に行を表す<tr>タグを配置し、その中にセルを表す<td>タグを並べることで作成されます。また、表の見出しには<th>タグを使用し、ヘッダー行として視覚的に区別されます。

例えば、基本的なテーブルは以下のように構成されます。まず、<table>タグでテーブル全体を定義し、その中に複数の<tr>タグで行を定義します。各行の中には<td>タグを使用してセルを定義し、データを格納します。ヘッダー行を追加する場合は、<th>タグを使用して見出しを定義します。

さらに、テーブルにはborder属性やcellpadding、cellspacingなどの属性を追加して、見た目を調整することができます。CSSを用いてスタイリングすることで、より複雑で美しいデザインのテーブルを作成することも可能です。例えば、border属性を用いてセル間に線を引いたり、paddingを設定してセル内の余白を調整することができます。
また、テーブルのレイアウトをCSSグリッドやフレックスボックスを使ってカスタマイズすることもできます。