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

HTMLでテーブルヘッダーを作成する方法｜thタグの基本とサンプルコード

HTMLでテーブルヘッダー（表の見出しセル）を作成するには、<th>〜</th>タグを使用します。テーブルヘッダーのタグは、表の行を定義する<tr>〜</tr>タグで囲まれ、さらにその<tr>タグは<table>タグの中に配置されるという構造になっています。

HTMLの表は「行」と「列」で構成されており、<tr>（行）、<th>（見出しセル）、<td>（データセル）といった要素を1つ以上組み合わせることで自由に作成できます。また、style属性を使ってCSSプロパティを追加すれば、表に罫線（ボーダー）を付けることも可能です。

テーブルヘッダーの基本的なルール

表の行は<tr>タグで定義し、見出しセルを作成する際には<th>タグを使います。<th>タグで囲まれたテキストは、多くのブラウザで自動的に太字かつ中央揃えで表示されるのが特徴です。なお、見出し行は通常、表の先頭に1行だけ配置するのが一般的です。

HTMLでテーブルヘッダーを作成する方法｜thタグの基本とサンプルコード

サンプルコード

以下のコードを実行すると、HTMLでテーブルヘッダーを持つ表を作成できます。この例では<style>タグを使い、table・th・td要素に対して罫線のスタイルを指定しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
         }
      </style>
   </head>

   <body>
      <h1>Database</h1>
      <table>
         <tr>
            <th>Database</th>
            <th>Release Year</th>
         </tr>
         <tr>
            <td>MySQL</td>
            <td>1995</td>
         </tr>
      </table>
   </body>
</html>

表示結果

上記のコードをブラウザで開くと、「Database」と「Release Year」という2つの見出しセルを持つテーブルが表示され、各行に黒色の罫線が引かれた状態で確認できます。

HTMLでテーブルヘッダーを作成する方法｜thタグの基本とサンプルコード


  1. HTMLで非表示のコメントを作成する方法

    HTMLで非表示のコメントを作成するには、<!-- を記述してコメントを開始し、--> で閉じます。このタグの間に書かれた内容はすべてブラウザ上では非表示になります。コメント機能は、後からコードを見直したり修正したりする必要がある開発者にとって非常に便利です。適切なコメントを残しておくことで、コードの意図や構造を簡単に理解できるようになります。コメントは「自分自身へのメモ」と捉えることもできます。同時に、HTMLコードを一時的に無効化したい場合にも活用でき、コメントアウトされた部分はブラウザに一切表示されません。サンプルコード以下のコードを実行して、HTMLにおける非表示コメントの

  2. HTMLで参考文献（Bibliography）を作成する方法

    参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト