どうもnakattyです。
私は起業した時、会社のWebサイトをWordPressを使って自作しました。
企業の概要ページはHTMLの<table>を使って作成したのですが、結構簡単に良い感じの表ができるので、今回はこの<table>の使い方についてまとめようと思います。
ちなみに↓のような感じで作りました。
会社名 | 株式会社○○ |
---|---|
設立 | 2018年3月 |
資本金 | ○○万円 |
事業内容 | テキストテキストテキストテキスト |
代表者 | 〇〇 〇〇 |
所在地 | 東京都〇〇 |
連絡先 | TEL:○○-○○○○-○○○○ FAX:○○-○○○○-○○○○ |
<table>タグの使い方
<table>タグで表を作る場合は、<tr>と<th>と<td>を組み合わせて作ります。
それぞれ使うところを説明していきます。
■<tr>・・・
表を作る際、「行」を作成するのに使います。
下の画像の緑色で囲ってる部分です。
■<th>・・・
表を作る際、「見出し」を作成するのに使います。
下の画像の青色で囲ってる部分です。
■<td>・・・
表を作る際、「表のデータ」を作成するのに使います。
下の画像の黄色で囲ってる部分です。
以上を踏まえて表を作るとコードは以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table> <tr> <th>果物</th> <th>個数</th> </tr> <tr> <td>りんご</td> <td>5個</td> </tr> <tr> <td>くり</td> <td>10個</td> </tr> </table> |
見出しを横にする表の作成
この記事の冒頭で作成した会社概要の様に表の見出しを横に設置したい場合は以下の様なコードになります。
1 2 3 4 5 6 7 8 9 10 |
<table> <tr> <th>果物</th> <td>りんご</td> </tr> <tr> <th>個数</th> <td>5個</td> </tr> </table> |
こんな感じの表になります。
<tr>〜</tr>をコピーして増やせば項目を増やせます。
果物 | りんご |
---|---|
個数 | 5個 |
横のマスと結合させる
「colspan」という属性を使うと表を作る際に横のマスと結合させることができます。
良い表の例が思い浮かばなかったのですが、以下の様な表を作ったとします。
会員/一般 | 1回 | 5回 |
---|---|---|
一般 | 500円 | 450円 |
会員 | 400円固定 |
会員の方の行は1マス足りない状態です。
ちょっとカッコ悪いのでこれを「colspan」を使って横と結合させると、、、
会員/一般 | 1回 | 5回 |
---|---|---|
一般 | 500円 | 450円 |
会員 | 400円固定 |
この様に空白だった場所も1つのマスになる様に結合してくれます。
コードや使い方は以下の様な感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<table> <tr> <th>会員/一般</th> <th>1回</th> <th>5回</th> </tr> <tr> <td>一般</td> <td>500円</td> <td>450円</td> </tr> <tr> <td>会員</td> <td colspan="2">400円固定</td><!-- 結合するマスの数を入力してください --> </tr> </table> |
結合したいマスの所に「colspan=”数字”」という形で入力します。
数字は結合させたいマスの数を入力してください。
縦のマスと結合させる
今度はマスを縦に結合する方法です。
縦に結合する場合は「rowspan」を使います。
使い方は横のマスと結合する「colspan」と同じです。
結合したいマスの所に「rowspan=”数字”」という形で入力します。
今回は「3」を入力した場合です。
以下の様な感じになります。
コース | 時間 | 金額 |
---|---|---|
1日コース | 10時〜18時 | 20,000円 |
14時〜22時 | 20,000円 | |
10時〜22時 | 30,000円 | |
1時間コース | 1時間 | 5,000円 |
コードは以下の様な感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<table> <tr> <th>コース</th> <th>時間</th> <th>金額</th> </tr> <tr> <td rowspan="3">1日コース</td><!-- 結合するマスの数を入力してください --> <td>10時〜18時</td> <td>20,000円</td> </tr> <tr> <td>14時〜22時</td> <td>20,000円</td> </tr> <tr> <td>10時〜22時</td> <td>30,000円</td> </tr> <tr> <td>1時間コース</td> <td>1時間</td> <td>5,000円</td> </tr> </table> |
表にタイトルをいれる
表にタイトルを入れたいときは<caption>を使います。
<table>のすぐ下に入力すれば表示されます。
以下の様な感じです。
果物 | 個数 |
---|---|
りんご | 5個 |
くり | 10個 |
コードはこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table> <caption>果物別在庫数</caption><!-- 表のタイトル --> <tr> <th>果物</th> <th>個数</th> </tr> <tr> <td>りんご</td> <td>5個</td> </tr> <tr> <td>くり</td> <td>10個</td> </tr> </table> |
まとめ
HTMLだけで表を作成する方法をまとめました。
WordPressを使ってWebサイトを作る場合は結構使うタイミングがあると思います。
nakatty
便利です。