会社概要の作成と、tableタグを使った表の作成【HTMLの書き方入門】

会社概要のページ（company.html）をHTMLでコーディングしてみましょう。

company.htmlを新規作成
テーブル（table）を作成する

見出しの役割を持つセル
テーブルの枠を表示する

company.htmlを新規作成

会社概要のページも、作りはindex.htmlに似ていますね。
このような場合、イチから全て作る必要はありません。

ファイルを新規作成してください。
index.htmlの中身を、全てコピー＆ペーストしてしまいましょう。
名前を付けて保存で「company.html」と命名して保存します。

company.htmlのheadの、titleとdescriptionを変更します。
次に、ファーストビューの画像を変えましょう。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>会社概要｜エドべース株式会社</title>
  <meta name="description" content="エドべース株式会社の企業概要などを掲載しています。">
</head>

<body>
  <header>
    <h1>エドベース株式会社</h1>
    <nav>
      <ul>
        <li>ホーム</li>
        <li>会社概要</li>
        <li>お問い合わせ</li>
      </ul>
    </nav>
  </header>

  <img src="images/company.png" alt="エドベース株式会社-会社概要トップ画像">

  <main>
    ~ 以下略 ~

次に<main>タグの中身。
ここが、index.htmlとは大きく異る部分です。

この赤線の部分をテーブルと言います。
テーブルの基本構造・作り方を学びましょう。

テーブル（table）を作成する

テーブルは「表組み」のことを指します。
身近なところで言えば、エクセルの表。これをHTMLで表現するイメージです。

では、HTMLでテーブルを表現する方法を見てみましょう。
テーブルを作るために最低限必要なタグは<table> <tr> <td> の３つです。

<table>
  <tr>
    <td>山田さん</td>
    <td>女性</td>
    <td>東京都</td>
  </tr>
  <tr>
    <td>伊藤さん</td>
    <td>女性</td>
    <td>千葉県</td>
  </tr>
  <tr>
    <td>高橋さん</td>
    <td>男性</td>
    <td>東京都</td>
  </tr>
</table>

ブラウザで見ると、こんな風に表示されます。

タグと表示を見合わせてみましょう。

タグ	タグの意味
table	このタグ内をテーブル(表)として扱う
tr	行の始まりから終わりまでを示す
td	tdタグで囲った部分をセルとして扱う

見出しの役割を持つセル

上のタグ説明も<table>タグを使って作っています。
太字になっている部分がありますよね。

これは、<strong>タグを使って強調しているのではありません。
<th>タグを使って「見出しの役割があるセル」だと定義しています。

<th>タグを使えば、会社概要部分の表が作れそうです。
company.htmlの<main>タグ内に書いてみましょう。

<main>
    <table>
        <tr>
            <th>会社名</th>
            <td>エドベース株式会社</td>
        </tr>
        <tr>
            <th>英語表記</th>
            <td>Edbase Co. Ltd.</td>
        </tr>
        <tr>
            <th>代表取締役</th>
            <td>吉田 光利</td>
        </tr>
    </table>
</main>