HTMLタグの基礎-2
2021/12/24
2021年度新人研修シリーズ 第1弾
『HTMLタグの基礎-1』 はこちらから
http://www.kenes.co.jp/blog/detail/2-HTMLタグの基礎-1
『HTMLタグの基礎-2』では、HTMLで「テーブル、リスト、画像」を作成・表示する方法をご紹介します!
<table>タグを<tr>タグ・<td>タグと合わせて使うと、簡単に表を作成できます。
テーブルは主に以下のタグ要素で構成されています。

- <table>:テーブル全体
border属性:表の外枠の枠線の太さ cellpadding属性:セル内の余白 cellspacing属性:セルとセルの間隔 - <thead>:テーブルのヘッダー
- <tbody>:テーブルの本体
- <tfoot>:テーブルのフッター
- <tr>:行の作成
- <th>:見出しのセル
文字が強調され、中央揃えで表示される - <td>:データのセル
rowspan属性:縦のセルを結合 colspan属性:横のセルを結合
こちらが、サンプルコードと画面イメージです。

リストは<ul>で箇条書きリスト、<ol>で番号付きリストが作成できます。
ちなみに、私は<ol>タグに「o」が入っているので、箇条書きの「●」だと勘違いしそうになりました。
こちらが、サンプルコードと画面イメージです。

<img>タグで画像の挿入ができます。<img>タグには以下のような属性があります。
- src属性:画像ファイルのURL
- alt属性:画像の説明文 画像が上手く表示されなかった場合、ここで指定した説明文が表示される
- height属性:画像の高さ
- width属性:画像の幅
こちらが、サンプルコードと画面イメージです。

担当者:はる