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

HTMLでテーブル(表)を作成する方法

HTMLの<table>タグは、Webページ上に表(テーブル)を作成するために使用される要素です。このタグの中に、行や列といったテーブルの構造を定義するさまざまなタグを記述していくことで、表を組み立てます。

tableタグの主な属性一覧

<table>タグで利用できる主な属性は以下のとおりです。なお、これらの属性はいずれもHTML5では非推奨(Deprecated)となっており、現在では見た目の調整はCSSで行うことが推奨されています。

属性説明
abbrabbreviated_text非推奨 − セル内のコンテンツの省略形(短縮版)を指定します。
alignright
left
center
justify
char
非推奨 − テーブルの視覚的な配置(揃え位置)を指定します。
bgcolorrgb(x,x,x)
#hexcode
colorname
非推奨 − テーブルの背景色を指定します。
borderピクセル数非推奨 − 枠線の太さを指定します。「0」を指定すると枠線は表示されません。
cellpaddingピクセル数 または %非推奨 − セルの境界線とセル内のコンテンツとの間隔を指定します。
cellspacingピクセル数 または %非推奨 − セルとセルの間隔を指定します。
framevoid
above
below
hsides
lhs
rhs
vsides
box
border
非推奨 − border属性と組み合わせて使用し、テーブルを囲む外枠のどの部分を表示するかを指定します。
rulesnone
groups
rows
cols
all
非推奨 − border属性と組み合わせて使用し、テーブルのセル間にどの罫線を表示するかを指定します。
summaryテキスト非推奨 − テーブルの内容の概要(要約)を指定します。
widthピクセル数 または %非推奨 − テーブルの幅を指定します。

テーブルの作成例

次のコードを実行すると、HTMLでシンプルなテーブルを作成できます。この例では、CSSのborderプロパティを使って枠線を表示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>
   <body>
      <h3>Ranking</h3>
      <table>
         <th>Rank</th>
         <tr>
            <td>One</td>
         </tr>
         <tr>
            <td>Two</td>
         </tr>
      </table>
   </body>
</html>
  1. HTMLのbodyタグとは?基本の使い方と非推奨属性をわかりやすく解説

    HTMLの<body>タグは、Webページの本体(ボディ)部分を定義する要素です。ブラウザ上に実際に表示されるテキスト、画像、動画など、ページを構成するすべてのコンテンツは、このタグの中に記述します。 bodyタグの主な属性 かつてbodyタグには、ページ全体の見た目を制御するためのさまざまな属性が用意されていました。しかし、以下に挙げる属性はすべてHTML5で非推奨(Deprecated)となっています。現在では、これらの装飾的な指定はCSSで行うのが標準的な方法です。 属性値説明 alinkrgb(x,x,x)#xxxxxxカラーネーム非推奨 - ドキュメント内のアクテ

  2. HTMLテーブル(表)の作り方|table・tr・th・tdタグの基本をわかりやすく解説

    Webページ上で表を作成するには、HTMLの<table>タグを使用します。テーブルは、行を表す<tr>タグ、見出しセルを表す<th>タグ、そしてデータセルを表す<td>タグを組み合わせて構成されます。 HTMLテーブルの基本構造 テーブルは以下の要素で構成されています。 <table>:テーブル全体を定義するコンテナ要素 <tr>(Table Row):テーブルの1行を定義します <th>(Table Header):見出しとなるセルを定義します。多くのブラウザでは太字かつ中央揃えで表示されます <t