HTMLのtableタグ【表を作ってみる】超初心者が基本構造を把握

ドットインストールでプログラミング学習中です。

ドットインストール#18 tableタグで表を作ってみようにて、tableタグについて学んだので、基本構造を紹介します。

基本の骨組みの理解は重要。基本知識をしっかりしておけば、応用していけますもんね。

結論、こんな感じの表を作ってみます。

好きな映画

名前 あらすじ ポイント
ショーシャンクの空に 無実の罪の受刑者の脱獄 「希望」。信念を持って、粘り強く行動する
ターミネーター2 未来から来たアンドロイドの戦い 自己消去のラスト「機械のプログラム」が人の心にも思える

好きな映画を表にしてみました。

以下の記事内にコードを貼っておくので、WordPressで試してみてください。

コードエディターを使う

WordPressの投稿画面の右上、コードエディターにてコピペして作成すればOKです。

では、順番に見ていきましょう。

HTMLにて、まずは「tableの中身」を作る

表の中身を作る手順

手順は大きく5つ。

  • table作成手順①:表の中身全体をtableタグで囲む
  • table作成手順②:見出し部分全体と、本体部分全体をタグで囲む
  • table作成手順③:それぞれの行・横列をtrタグで囲む
  • table作成手順④:見出しの部分のセルをthタグで囲む
  • table作成手順⑤:本体の中身のセルをtdタグで囲む

結論、コードの完成版はコレ。

<p>好きな映画</p>
<table>
<thead>
<tr>
<th>名前</th>
<th>あらすじ</th>
<th>ポイント</th>
</tr>
</thead>
<tbody>
<tr>
<td>ショーシャンクの空に</td>
<td>無実の罪の受刑者の脱獄</td>
<td>「希望」。信念を持って、粘り強く行動する</td>
</tr>
<tr>
<td>ターミネーター2</td>
<td>未来から来たアンドロイドの戦い</td>
<td>自己消去のラスト「機械のプログラム」が人の心にも思える</td>
</tr>
</tbody>
</table>

表のタイトルは<p></p>で囲っています。<p>好きな映画</p>の部分ですね。それ以下の表の部分について、手順を書きます。

では、順番に見ていきましょう!

table作成手順①:表の中身全体をtableタグで囲む

<table>表の中身全体が入ります</table>

<table>と</table>で表の中身となる全体を挟み込む。

table作成手順②:見出し部分全体と、本体部分全体をタグで囲む

<thead>見出し部分の全体が入ります</thead>

theadは、テーブルヘッダーの略。

<tbody>本体部分の全体が入ります</tbody>

tbodyは、テーブルボディの略。

table作成手順③:それぞれの行・横列をtrタグで囲む

<tr>それぞれの行・横列全体が入ります</tr>

trは、テーブルロー(row 行・横列という意味)の略。

table作成手順④:見出しの部分のセルをthタグで囲む

<th>それぞれの見出し部分のセルが入ります</th>

thは、テーブルヘッダーセルの略。

table作成手順⑤:本体の中身のセルをtdタグで囲む

<td>本体の中身のセルが入ります</td>

tdは、テーブルデータセルの略。

そうすると、冒頭にも挙げましたが、こんな感じの表が出来上がり。

好きな映画

名前 あらすじ ポイント
ショーシャンクの空に 無実の罪の受刑者の脱獄 「希望」。信念を持って、粘り強く行動する
ターミネーター2 未来から来たアンドロイドの戦い 自己消去のラスト「機械のプログラム」が人の心にも思える

線を引いて、表を装飾(WordPressは自動でやってくれる)

表を装飾しよう

あとは、線を引けばOK。ただし、WordPressはtableのコードを作ると、自動で線を引いてくれます。

ちなみに、Atomエディタで作ってchromeにあげると、線は無いです。こんな感じ ↓ 。学習環境については【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンにて記事にしています。

線が無いchromeにあげた表

補足として説明すると、線を引くコードはtable作成手順①で作った<table></table>の<table>の方に入れる。こんな感じ。

<table border="1" cellspacing="0" cellpadding="6">

表の装飾には、いろいろなパターンがありますが、 ↑ 基本的な例を挙げています。

表の作り方は無料で学べる学習サイトのドットインストール#18 tableタグで表を作ってみようで紹介されています。見てみてください、では!