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

HTMLテーブル内でHTMLタグを使う方法をわかりやすく解説

HTMLでは、テーブルのセル（<td>）の中に、他のHTMLタグを自由に埋め込むことができます。ポイントは、追加するタグが必ず <td> タグの内側で開き、内側で閉じるという点です。

例えば、セル内に段落を作りたい場合は <p>〜</p> を、箇条書きリストを作りたい場合は <ul>〜</ul> を記述します。このようにすることで、単なるテキストだけでなく、リスト・画像・リンクなども含んだ、情報量の多い表を作成できます。

テーブル内で使える主なHTMLタグ

  • <p> … 段落を追加する
  • <ul> / <ol> / <li> … 箇条書きリストや番号付きリストを追加する
  • <a> … リンクを追加する
  • <img> … 画像を表示する

サンプルコード

以下のコードは、HTMLテーブルのセル内で <ul>〜</ul> を使用し、各技術カテゴリに対応する項目を箇条書きで表示する例です。実際にブラウザで実行して動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td { border: 1px solid black; width: 400px; }
      </style>
   </head>
   <body>
      <h1> Total Points</h1>
      <table>
         <tr>
            <th>Technologies</th>
            <th>Points</th>
         </tr>
         <tr>
            <td>Programming Languages
               <ul>
                  <li>C++</li>
                  <li>Java</li>
                  <li>C</li>
               </ul>
            </td>
            <td>100</td>
         </tr>
         <tr>
            <td>Database
               <ul>
                  <li>MySQL</li>
                  <li>Oracle</li>
                 <li>CouchDB</li>
              </ul>
            </td>
            <td>50</td>
         </tr>
      </table>
   </body>
</html>

コードの解説

このサンプルでは、「Programming Languages」のセルに <ul> タグを使って C++、Java、C の3つの言語を箇条書きで表示しています。同様に「Database」のセルにも MySQL、Oracle、CouchDB のリストを配置しています。

また、<style> 内のCSSで table, th, td に境界線と幅を指定することで、見やすい表に仕上げています。このように、テーブルのセル内にHTMLタグを組み合わせれば、柔軟で読みやすい表現が可能になります。

  1. HTMLのformtarget属性とは？使い方と指定できる値を徹底解説

    formtarget属性とは？HTMLのformtarget属性は、フォームを送信した後に受け取るレスポンス（結果ページ）をどこに表示するかを指定するための属性です。この属性を設定すると、<form>タグのtarget属性で指定した内容が上書きされます。なお、formtarget属性は <input type=submit> および <input type=image> でのみ使用できる点に注意してください。通常のテキスト入力欄などには指定できません。formtarget属性に指定できる値の一覧No.値説明1_blankレスポンスを新しいウィンドウまたは新し

  2. HTMLのformenctype属性とは？使い方とエンコード方式の違いを解説

    formenctype属性とは formenctype属性は、フォームデータをサーバーへ送信する際に、データをどのようにエンコードするかを指定するための属性です。HTML5で新たに導入された属性で、<input type=submit> および <input type=image> でのみ使用できます。 通常、フォーム全体のエンコード方式は <form> タグの enctype 属性で指定しますが、formenctype属性を使うことで、特定の送信ボタンごとに異なるエンコード方式を上書き指定することが可能です。 formenctype属性に指定できる値 f