会社概要のページ（company.html）をHTMLでコーディングしてみましょう。
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>
ブラウザで見表示を確認します。
<tr>タグの中身が横並び、<th>タグを使ったところが太字になりました。
テーブルの枠を表示する
見本のように、テーブルに枠線をつけてみましょう。
もっともシンプルに線をつけられる方法は、<table>タグに「border」という属性を指定することです。
ですが、実は、最新のHTMLでこの方法は非推奨。
スタイルシート（CSS）を使って調整することが推奨されています。
次のCSS編で、スタイルシートで線をつける方法に切り替えるまで、確認用として入れておきましょう。