HTML テーブルタグの使い方 備忘録

こんばんは、今日はHTMLのテーブルタグの備忘録です。テーブルタグは表などをWebページ上で表示するのに便利なタグです。HTMLで表形式で表示させたい場合のコードを備忘録としています。

そのままコピペしても利用できますので必要があればコピペしてください。

HTML　テーブルタグの備忘録

Tableを構成する要素は主に４つです。下記の４つのタグを使用してテーブルタグを完成させます。

1. <table>タグ・・・大元となるタグです。
2. <tr>タグ　・・・ trタグは列を表します。このタグの間に書かれたものが同じ列となる
3. <th>タグ　・・・１つのセルを表すタグで 見出しとなり太字で中央揃いになる
4. <td>タグ　・・・１つのセルを表すタグで 通常の文となり左揃いとなる

テーブルタグ3列×1行のコード

まずは、見出しが３列×項目1行の場合の記述コードです。

<table border>
<tr>
<th bgcolor=”#7fffd4″>果物</th>
<th bgcolor=”#7fffd4″>野菜</th>
<th bgcolor=”#7fffd4″>主食</th>
</tr>

<tr>
<td>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ばなな</li>
</ul>
</td>

<td>
<ul>
<li>きゃべつ</li>
<li>レタス</li>
<li>ねぎ</li>
</ul>
</td>

<td>
<ul>
<li>パン</li>
<li>白米</li>
<li>麺</li>
</ul>
</td>
</tr>

</table>

テーブルタグ　3列×2行のコード

次は、3列×2行のテーブルですが、コード記述のポイントは<tr>タグで囲むと1行が追加された形で表示することができます。

<table border>
<tr>
<th bgcolor=”#7fffd4″>果物</th>
<th bgcolor=”#7fffd4″>野菜</th>
<th bgcolor=”#7fffd4″>主食</th>
</tr>

<tr>
<td>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ばなな</li>
</ul>
</td>

<td>
<ul>
<li>きゃべつ</li>
<li>レタス</li>
<li>ねぎ</li>
</ul>
</td>

<td>
<ul>
<li>パン</li>
<li>白米</li>
<li>麺</li>
</ul>
</td>
</tr>

<tr>
<td>
<ul>
<li>いちご</li>
<li>れもん</li>
<li>ぱいん</li>
</ul>
</td>

<td>
<ul>
<li>にがうり</li>
<li>もやし</li>
<li>ぴーまん</li>
</ul>
</td>

<td>
<ul>
<li>五穀米</li>
<li>雑穀米</li>
<li>もち米</li>
</ul>
</td>
</tr>

</table>

HTML テーブルタグの使い方　まとめ

テーブルタグは記述は少々手間はかかります。テーブルタグを自動で作成してくれるTAGインデックスというサイトもありますので利用してみてください。それではー！

良ければ過去記事も見てみてください↓

はじめてのCSS作成　備忘録Webページを作成する上で必須のCSSの備忘録です。CSS（Cascading Style Sheets）は、カスケーディング・スタイル・シートと呼ばれウェブページのスタイルを指定するための言語になります。HTMLとCSSを組み合わせて使用することで細かくスタイルやデザインを指定することができる言語です。 ...

ABOUT ME

なお

フルスタックエンジニアを目指すサラリーマン。インフラ、WEBを中心に色んなIT関連情報に手を出したいと思います。

BLOG：https://nw-engineer.work/