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属性:画像の幅

こちらが、サンプルコードと画面イメージです。

担当者:はる