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

HTMLでテーブル本体（tbody）を表示する方法

HTMLでテーブル本体（ボディ）を表示するには、<tbody>タグを使用します。<tbody>タグは、テーブルに本体部分を追加するための要素です。通常は<thead>タグ（ヘッダー）や<tfoot>タグ（フッター）と組み合わせて使用し、テーブル全体を「ヘッダー」「フッター」「本体」の各部分に分けて構造化します。

<tbody>タグの属性一覧

<tbody>タグには、以下のような属性が定義されています。

属性値説明
alignright
left
center
justify
char		非推奨 − 視覚的な水平方向の配置を指定します。
char文字非推奨 − テキストを揃える基準となる文字を指定します。align="char" を指定した場合に使用されます。
charoffピクセル または %非推奨 − char属性で指定した最初の文字からのオフセット（ピクセルまたはパーセント値）を指定します。align="char" を指定した場合に使用されます。
valigntop
middle
bottom
baseline		非推奨 − 垂直方向の配置を指定します。

※上記の属性はいずれも現在では非推奨（Deprecated）となっています。配置の制御には、CSSの text-align プロパティや vertical-align プロパティを使用することが推奨されています。

使用例

以下のコードを実行すると、HTMLでテーブル本体を表示できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML tbody Tag</title>
   </head>
   <body>
      <table style = "width:100%" border = "1">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
            <tr>
               ...more rows here containing four cells...
            </tr>
         </tbody>
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
            <tr>
               ...more rows here containing four cells...
            </tr>
         </tbody>
      </table>
   </body>
</html>

このように、<tbody>タグを使うことでテーブルのデータ行を明確にグループ化でき、複数の<tbody>を設置して行をまとめて管理することも可能です。ヘッダーやフッターと組み合わせることで、意味的に正しくアクセシビリティの高いテーブル構造を作成できます。

  1. HTMLでテーブルの列を結合する方法｜colspan属性の使い方を解説

    HTMLでテーブルの列を結合（マージ）するには、<td>タグにcolspan属性を使用します。この属性を指定することで、隣接するセル同士を横方向にまとめることができます。 例えば、4行4列のテーブルがある場合でも、colspan属性を使えば、2つや3つのセルを簡単に結合できます。 例1：基本となるテーブルを作成する まずは、colspan属性を使う前の状態として、3行3列のシンプルなテーブルをHTMLで作成してみましょう。 <!DOCTYPE html> <html>    <head>     &nbs

  2. HTMLでテーブルのセルを結合する方法：colspanとrowspanの使い方

    HTMLでテーブルのセルを結合するには、colspan属性とrowspan属性を使用します。それぞれの役割は以下の通りです。rowspan属性：セルが縦方向（行）にまたがる行数を指定しますcolspan属性：セルが横方向（列）にまたがる列数を指定しますどちらの属性も<td>タグ内に記述し、値は数値で指定します。例えば、rowspan=2と指定すれば2行分、colspan=2と指定すれば2列分のセルが結合されます。例1：通常のテーブルを作成するまず、HTMLで3行×3列のシンプルなテーブルを作成してみましょう。<!DOCTYPE html> <html> &n