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

HTMLでテーブルに行を追加する方法【trタグの使い方と属性一覧】

HTMLでテーブルに新しい行を追加するには、<tr>タグを使用します。<tr>（table row）タグは、テーブル内の1行を定義するための要素で、行の中に<th>（見出しセル）や<td>（データセル）を配置して表を作成します。

<tr>タグで使用できる属性

<tr>タグには、かつて以下のような属性が用意されていました。ただし、これらはすべて非推奨（Deprecated）となっており、現在のHTML5では使用が推奨されていません。同様の表現を行う場合は、CSSでのスタイル指定に置き換えましょう。

属性 値 説明
align right
left
center
justify
char		 非推奨 － セル内テキストの水平方向の位置揃えを指定します。
bgcolor rgb(x,x,x)
#hexcode
色名		 非推奨 － テーブルセルの背景色を指定します。
char 文字 非推奨 － align="char" を指定した場合に、どの文字を基準にテキストを揃えるかを指定します。
charoff ピクセル または % 非推奨 － char属性で指定した最初の文字に対するオフセット（ピクセルまたはパーセント値）を指定します。align="char" と併用します。
valign top
middle
bottom
baseline		 非推奨 － セル内コンテンツの垂直方向の位置揃えを指定します。

現代の代替手段としてのCSS

これらの非推奨属性の代わりに、CSSの text-align（水平方向）、vertical-align（垂直方向）、background-color（背景色）などのプロパティを使うことで、より柔軟かつ保守しやすいスタイル指定が可能です。

サンプルコード

以下のコードを実行すると、HTMLテーブルに行を追加する方法を確認できます。ここでは、クリケット選手のランキング表を例にしています。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML trタグ</title>
   </head>
   <body>
      <table border = "1">
         <tr>
            <th>クリケット選手</th>
            <th>ランキング</th>
         </tr>
         <tr>
            <td>Virat Kohli</td>
            <td>1</td>
         </tr>
         <tr>
            <td>AB de Villiers</td>
            <td>2</td>
         </tr>
      </table>
   </body>
</html>

このように、行を追加したいだけ<tr>タグを繰り返し記述するだけで、自由にテーブルを拡張できます。各セルには<th>または<td>タグで内容を記述してください。

  1. HTMLでテーブルの境界線を作成するにはどうすればよいですか？

    HTMLで表（テーブル）の境界線を作成するには、かつては border 属性が使用されていました。しかし、HTML5 の登場によりこの属性は非推奨となりました。現在では、CSS の border プロパティを使って境界線を設定するのが標準的な方法です。table 要素だけでなく、<th> や <td> にも個別に境界線を指定しましょう。 サンプルコード 以下のコードを実行すると、HTML の表に境界線を表示できます。ここでは <style> タグ内で CSS を定義しています。 <!DOCTYPE html> <html> &nbs

  2. HTML Webページにオーディオプレーヤーを追加する方法

    HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの