HTML

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

tableタグ使い方

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

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

HTML テーブルタグの備忘録

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

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

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

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

3列×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行が追加された形で表示することができます。

3列×2行


<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>

テーブルタグは記述は少々手間はかかりますが、テーブルタグを自動で作成してくれるWebサイトもありますので利用してみてください。

それではー!

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

にほんブログ村 IT技術ブログ IT技術メモへ

SEからの脱出日記 - にほんブログ村

%d人のブロガーが「いいね」をつけました。