ちょっと複雑なテーブルをHTMLで作ろう

はじめに

htmlで表を作るやり方を以前教えていただいたのですが、今回はちょっと複雑な表の作り方を教えて欲しいのです。
どんな表ですか?
エクセルで言うところのセルが結合したようなテーブルなんですが、htmlで作ることはできますか?画像じゃないと無理ですか?
いいえ htmlでもセルを結合したようなテーブルを作ることは可能です。colspanとrowspanを使用します。
ああ htmlでも結合テーブルを作ることができるんですね。
サンプルと合わせてご紹介しましょう。

htmlで結合テーブルを作ろう

htmlでエクセルのセルを結合したようなテーブルを作りたいと思います。
この際、thやtdにcolspan,rowspanを設定します。colspanを設定すると横を何個分結合するか、rowspanでは、縦に何個結合するかを設定することができます。
サンプルでは、よくある結合テーブルの一例を使用します。

<table>
<tr><th colspan=2>福井をwebの力で発展させるweb制作会社</th></tr>
<tr><th rowspan=2>名前</th><td>ウィコネット</td></tr>
<tr><td>ホームページ制作会社</td></tr>
</table>

このようにサンプルコードを書きます。

結合テーブルのサンプル例

福井をwebの力で発展させるweb制作会社
名前 ウィコネット
ホームページ制作会社

上記のようにちょっと複雑なテーブルも作ることができるようになります。
基本的な作り方は、基本的なテーブルの作り方でご確認ください。

関連記事

  1. リンクの貼り方

  2. HTMLでAタグに電話番号を設定しよう

  3. HTMLでラジオボタン を作ってみよう

  4. アコーディオンを作ってみよう

  5. HTMLで画像表示してみよう

  6. HTMLで見出しをつける

2020年9月
 123456
78910111213
14151617181920
21222324252627
282930