HTMLでリストやテーブル（表）を作っていこう！

リストを作成する<ul>/<ol>タグと<li>タグの組み合わせや<table>タグの使い方について説明していきます。

こちらのレッスンでは、タグを使ってリストと表の作り方を学んでいきます。

どちらも伝えたい情報をわかりやすく表現していくのに、とても有効な手段です。

人気のあるサイトやブログでは、どこもデザインが素敵で、ページのアクセントになっているものが多いのではないでしょうか。

ただテーブルについては、最初のうちは覚えるタグや要素が多くつまづきやすいです。

自身の経験から図解をたくさん取り入れて、すこしでもわかりやすく理解してもらえるように作りました。

このレッスンでリストとテーブルの土台となるHTMLでの作り方を見ていきましょう！

今回は新しいファイルを用意していきます。

いつものように好きな名前でファイルを作成後、ここまでタグを書いておいてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>フレンチトーストを作ろう！</title>
  </head>

  <body>
    <h1>フレンチトーストの作り方</h1>
  <body>
</html>

リストを表示させるタグ

HTMLでつくるリストは２種類あります。

それぞれの特徴と書き方を見ていきましょう。

料理長
箇条書きのリストと番号がついたリストの２種類があるよ

番号のないリストはulとliタグでつくる

ではbody要素内のh1タグの下にリストをマークアップしていきます。

<h1>フレンチトーストの作り方</h1>
<h2>材料</h2>
<ul>
  <li>食パン</li>
  <li>牛乳</li>
  <li>卵</li>
  <li>砂糖</li>
  <li>バター</li>
</ul>

表示させるとこのような箇条書きのリストが表示されます。

サンプル文でulタグを使ったリストの表示画像

２つの新しいタグが出てきました。

ulタグとliタグです。

ulタグはUnorderd List (順序のないリスト)の略で、箇条書きでリストを作成するタグです。

リスト全体を表し、リストの中身を<ul></ul>で囲みます。

そしてリストの中身に当たる部分、すなわち項目がliタグなのです。

liタグはまさにListの略で、<li>表示させたいリストの項目</li>のように囲みます。

表示したいリスト項目の数だけ<li></li>タグがあります。

リストつくるタグの使い方の基本

リストをつくるにはこの<ul>タグと<li>タグが必ず一緒に使われます。

どちらか一方でも欠けてしまうと、表示がおかしくなるので注意してください。

要点をまとめるのに、とてもよく使うタグなので、ぜひ使い方をマスターしましょう！

番号付きリストはolとliタグでつくる

先ほど作ったリストの下に、さらにもうひとつリストを作っていきます。

<h2>作り方</h2>
<ol>
  <li>食パンを半分に切る</li>
  <li>牛乳、卵、砂糖をボールに入れてかきまぜる</li>
  <li>２に食パンを両面浸す</li>
  <li>フライパンにパターを熱して溶かす</li>
  <li>両面きれいに焼けたらできあがり！</li>
</ol>

表示させてみると、こんどは番号付きのリストが表示されました。

olタグを使ったリストの表示画像

作り方の手順のように、順番に意味を持つリストをつくる場合はolタグとliタグを使います。

olはOrderd List (順序のあるリスト)の略で、さっきのulと対となるリストです。

構造はulとまったく一緒で、リストの中身であるliタグを<ol></ol>で囲みます。

番号を逆にするreversed属性

olタグで作ったリストは1から順番にリストが並んでいます。

これを番号の大きい順から小さく（カウントダウン）していきたいときは、reversed属性を使います。

reversed属性は値を書く必要がなく、<ol reversed>のように、olの開始タグの中に書くだけで大丈夫です。

reverse属性を使ったときの表示のされ方
番号がカウントダウンになりました

開始の番号を指定するstart属性

理由があって番号の途中からリストを始めたい、というときはstart属性を使います。

例えば「リスト番号を3からスタートしたい」というときは

<ol start=”3″>

のように、値に開始したい番号を指定します。

start属性を使ったときの表示のされ方
指定した’3’から番号が始まっています

リストを入れ子にしてみると？

リストは自由に入れ子にして、リストの中にさらにリストを、のように作ることも可能です。

このレッスンで作った２つのリストを１つのリストにまとめてみます。

このように書き直してみてください。

<h1>フレンチトーストの作り方</h1>
<ul>
  <li> 材料
    <ul>
      <li>食パン</li>
      <li>牛乳</li>
      <li>卵</li>
      <li>砂糖</li>
      <li>バター</li>
    </ul>
  </li>

  <li>作り方
    <ol>
      <li>食パンを半分に切る</li>
      <li>牛乳、卵、砂糖をボールに入れてかきまぜる</li>
      <li>２に食パンを両面浸す</li>
      <li>フライパンにパターを熱して溶かす</li>
      <li>両面きれいに焼けたらできあがり！</li>
    </ol>
  </li>
</ul>

表示してみます。

入れ子にしたときのリストの表示例

コードを見ると複雑で混乱してしまいそうですが、このような構造になっています。

入れ子のリストのタグの構造を詳しく図解

外側のリストの１行として中のリストが表示されています。

中のリストのまとまりは、外側のリストの<li></li>の中に書きます。

外側が<ul></ul>でできているので、’材料’と’作り方’は黒丸で並んでいますが、これを<ol></ol>に変えた場合、番号順で並びます。

このようにリストは入れ子にすることで、何階層にもできるのですが、読みやすさを考えると一階層くらいにしておいた方がいいかと思います。

まずはシンプルなリストの作り方から徐々に慣れていきましょう！

  • リストには番号のない箇条書きのリストと、番号順に並ぶリストの２種類がある
  • 箇条書きのリストは外側を<ul></ul>で<li>タグのまとまりを囲む
  • 番号順のリストは外側を<ol></ol>で<li>タグのまとまりを囲む
  • 番号順のリストで大きい番号→小さい番号のように並べるときはreversed属性を書く
  • 任意の番号でリストを開始したいときは、start属性で始まりの番号を指定する
  • リストは入れ子で作ることができ、内側のリストのかたまりを外側のリストの<li></li>の中に配置する

テーブルを表示させてみよう！

さて、次はテーブルの作り方を学んでいきます。

テーブルを作るには似た名前の、細かいタグをたくさん使います。

最初は難しく感じるかもしれませんが、ひとつひとつ分かりやすく説明していきます。

料理長
テーブルは小さな要素がたくさん積み重なって出来ているよ

 

まずはHTMLで作るテーブルの構造を図で見てみましょう。

HTMLでつくるテーブルの基本構造をわかりやすく図解

テーブルの縦を列（カラム）といい、横を行（ロー）といいます。

そしてひとつひとつの区切られた領域をセルといいます。

タグを使って表を作るには、特に横の行とセルを意識してマークアップしていきます。

それではタグを書いていきます。

これまで作ったリストはいちど削除して、body要素内に書いていきましょう。

tableタグ内の’border=”1″‘は線を引くための属性ですが（<table>タグはデフォルトでは線が表示されないため）、実際のマークアップではCSSで枠線を指定していきます。
（今回はHTMLだけで表示するため、使用しています）

<body>
  <h1>コード食堂の人気ラーメン</h1>
  <table border="1">
    <tr>
      <td>料理名</td>
      <td>ランキング</td>
      <td>値段</td>
    </tr>
    <tr>
      <td>とんこつラーメン</td>
      <td>1</td>
      <td>650円</td>
    </tr>
    <tr>
      <td>チャーシューメン</td>
      <td>2</td>
      <td>820円</td>
    </tr>
    <tr>
      <td>野菜タンメン</td>
      <td>3</td>
      <td>600円</td>
    </tr>
  </table>
<body>

サンプルコードで表示させたテーブル画像

このようなテーブルが表示されました！

それぞれのタグの働きを見ていきましょう。

テーブルそのものを表すtableタグ

テーブルを作るためにその名の通り、tableタグで外側を囲む必要があります。

その中にいくつかの要素があり、そこでテーブルが完成します。

それではtableタグの中で役割をもつタグを見ていきます。

セルを表すtdタグ

表とは、要するにセルがひとつひとつ積み重なったものだと考えられます。

その個別のデータ、すなわちセルを表しているのがtdタグです。

tdはTable Data Cell（セルの中のデータ） の略です。

セルのデータに該当する部分を<td></td>で囲みます。

セルを行としてまとめるtrタグ

セルをひとまとめにして、行として認識させるためのタグがtrタグです。

Table Row（テーブルの行）の略です。

たとえば３つのセルを<tr></tr>で囲むと縦の列（カラム）が３つのテーブルができあがります。

もしこのタグが無ければ、どんどん横にセルがくっついて行の折返しができませんよね？

横の行をまとめて、さらに縦に繰り返し重ねていったものが、１つのテーブルになるのです。

テーブルの構成と<table>/<tr>/<td>タグのそれぞれの役割

料理長
table, tr, tdタグの３つがあればシンプルなテーブルだったら作ることができるよ

ちなみにこのtrで囲んだデータの数にルールがなかったら、テーブルはどうなるのでしょうか？

とんこつラーメンにセルをひとつ加えて、表示させてみました。

<tr>
  <td>とんこつラーメン</td>
  <td>1</td>
  <td>650円</td>
  <td>煮玉子</td>
</tr>
<td>タグが多かったときのテーブルの画像
セルが余分に飛び出て、
ちょっとおかしな表に
なりました

このようにテーブルの列の数できちんとセルを<tr>タグで囲む必要があります。

見出しがほしいときはthタグを使う

作ってきたテーブルを見ると、ちょっとだけ文字が平坦で分かりづらいですね。

ここで登場するのがテーブル内の見出しを指定するthタグです。

thはTable Header Cell（テーブルの見出しセル）の略になります。

このthタグは属性を指定することで、横にも縦にも見出しを作ることができます。

見出しの方向をどっちにするのかは、thの開始タグの中で、scope属性で指定するのです。

見出しの方向を指定するscope属性の使い方

scope = “col”: よこに見出しができる

scope = “row”: たてに見出しができる

値となる、colはCOLOMN（列）の略、rowはROW（行）の略ですね。

「というか、colで指定するなら列だから、たてになるんじゃないの？？」と思った人もいたかもしません。

ややこしいのですが、横方向につくっていった見出しは、列の見出しとして役割を持つから”col”で指定する、という考えに基づいているのです。

その逆もまたしかりですね。

例えば先程のテーブルの上段を、このように変えると、

<tr>
  <th scope="col">料理名</th>
  <th scope="col">ランキング</th>
  <th scope="col">値段</th>
</tr>

<th>タグをcol属性で指定したときの見出しの作られ方

<th></th>で囲んだ項目が太字になって真ん中にきたので見出しっぽくなりました！
“col”で指定しているのでそれぞれがカラム（行）の見出しになっています

セルを空っぽにするには？

「特定のセルだけなにも入れたくない」という場合のお話です。

<td></td>のように書くと、表示がうまくされないときがあるので、

<td>$nbsp;</td>

と書きます。

この&nbsp; (ノーブレークスペース)はよく’半角スペースを入れるもの’、と説明されます。

が、実際は改行したくないときに使う記号です。

こちらはHTMLにだいぶ慣れて、「雑学的に知識に入れておきたい」というときに調べてみてください。

ひとまずセルを空にするときは、&nbsp;を使う、と頭の片隅に置いておいてくださいね。

セルを結合する

長かったテーブルの作り方のレッスンも、あともう少しです。

ここではセルを結合したいときに使う、属性について説明していきます。

料理長
セルの結合はタグではなく、属性で指定するよ

横の右隣のセルを結合するにはcolspan属性を使います。

colspanはcolumn spanの略でカラムの範囲という意味です。

右隣のセルを結合するcolspan属性

colspan = “結合したいセルの数”: 指定したセルの数だけ横に結合される

 

書き方の例）
<td colspan=”2″>セルのデータ</td> //２つ分横にセルが結合される

このようにコードを書くと

<h1>お好みでどうぞ</h1>
<table border="1">
  <tr>
    <td>料理名</td>
    <td colspan="2">変えられるお好み</td>
  </tr>
  <tr>
    <td>とんこつラーメン</td>
    <td>麺硬め</td>
    <td>こってり</td>
  </tr>
  <tr>
    <td>牛丼</td>
    <td>汁だく</td>
    <td>ねぎだく</td>
  </tr>
  <tr>
    <td>カレー</td>
    <td colspan="2">辛さ２倍</td>
  </tr>
</table>

colspan属性でセルを横に結合したときの表示のされ方

<td>の中にcolspanを書いた’変えられるお好み’と’辛さ２倍’が、指定した２つ分、横に結合されました！

結合する右のセルである<td></td>は何も書かないので、間違いないように覚えておきましょう。

料理長
タグを見ると通常３つある<td></td>が、結合したところだけ２つしかないね
結合するセルは何も書いてはいけないからだね

縦方向にセルを結合するrowspan属性

縦下のセルを結合するにはrowspan属性を使います。

rowspanはrow spanを縮めたもので、行の範囲という意味ですね。

縦下のセルを結合するrowspan属性

rowspan = “結合したいセルの数”: 指定したセルの数だけ縦に結合される

 

書き方の例）
<td rowspan=”3″>セルのデータ</td> //３つ分縦にセルが結合される

基本的な使い方はcolspan属性といっしょです。

<h1>おすすめデザート</h1>
<table border="1">
  <tr>
    <td>デザート</td>
    <td>杏仁アイス</td>
    <td>ごま団子</td>
  </tr>
  <tr>
    <td>値段</td>
    <td>２８０円</td>
    <td>３６０円</td>
  </tr>
  <tr>
    <td rowspan="2">味</td>
    <td>さっぱり</td>
    <td>甘い</td>
  </tr>
  <tr>
    <td>やさしい甘さ</td>
    <td>香ばしい風味</td>
  </tr>
</table>

rowspan属性でセルをたてに結合したときの表示のされ方

<td>の中にrowspanを書いた’味’が、指定した２つ分、縦に結合されました！

このrowspanで縦につなげるときも、結合するセルの<td></td>は何も書きません。
<tr>タグをまたぐので、消し忘れないように注意しましょう。

colspanとrowspan属性の働きを図で詳しく解説

 

  • HTMLでつくられるテーブルは、１つ１つ分けられた領域（表示したいデータ）のセル、横の行のロー（row）、縦の列のカラム（column）からできている
  • タグを書く上で意識するのは行（row）とセル
  • <table>タグはテーブルそのもの、<td>タグはセル、<tr>タグは行のローを表している
  • 見出しを指定するには<th>タグを使い、scope属性で見出しの向きを指定する
  • scope属性の値となる”col”は横方向に見出しをつくり、”row”は縦方向に見出しをつくる
  • セルの中を何も表示させたくないときは<td></td>の中に&nbsp;と書く
  • 右隣のセルを結合させたいときはcolspan属性、縦の下のセルと結合させたいときはrowspan属性を使う
  • colspan、rowspan属性の値となる数字は結合したいセルの数を指定する
  • 結合したセルの<td>タグは書かない
料理長
入り組んだテーブルをつくるときには、いちど絵にしてタグを落とし込んでからhtmlを書いていくと間違いが少なくなるよ

まとめ

今回はリストとテーブルをhtmlタグで作成する方法を学んできました。

特にテーブルは似た名前のタグや、よくわからない属性がたくさん出てきて、かなり混乱したのではないでしょうか？

覚えるコツは、タグも属性もアルファベットの羅列として見るのではなく、きちんと単語の意味を理解して考えることが実はいちばんの近道です。

そのためにカラムやロー、セルなどテーブルの構造を正しく知ることが大切です。

わからないことが出てきたらぜひ図解を何度も見返してみてくださいね。

料理長
つぎは入力フォームの作成について学んでいくよ！

HTML&CSS入門の最新記事8件