HTML ハンズオンpart5

HTML

Posted at 2025-10-13

イントロダクション

HTML ハンズオンpart1,2,3,4閲覧いただきありがとうございます！
この記事では、以下を参考記事等を活用しながらHTMLのハンズオンした内容をまとめます。
書籍『改訂版演習 Webプログラミング入門』

1. テーブル作成part1

書籍『改訂版演習 Webプログラミング入門』2-4 例題4 のからWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>テーブル</title>
</head>
<body>
    <table border="1">
    <caption>春の新規講座</caption>
        <tr>
            <th>講座名</th>
            <th>開催時間</th>
            <th>授業料金</th>
        </tr>
        <tr>
            <td>写真入門</td>
            <td>毎週木曜日<br>10:00～12:00</td>
            <td>3,000円<br>(機材貸出あり)</td>
        </tr>
        <tr>
            <td>油絵入門</td>
            <td>毎週火曜日<br>15:00～17:00</td>
            <td>5,000円<br>(材料費込み)</td>
        </tr>
    </table>
</body>
</html>

以下のWebページが作成されます！

説明:

<table border ="ピクセル数">テーブルを作成することを宣言します。ピクセル数を0にすると、枠が表示されません。

<caption>:テーブルの表題に付ける要素です。table要素に1つだけ指定可能ですが、その場合は開始タグのの直後に行に指定しなければなりません。本タグは省略可能です。

<th>:テーブルの中の見出しのセルを定義ます。table headerの略です。
本要素で指定したセルは、文字(テキスト)が太字になり、かつ中央揃えになります。

<tr>:テーブルの中の行を定義します。table rowの略です。この要素の中にtdタグが含まれます。
本要素を繰り返すと、その数だけの行が作成されます。table要素の子要素です。

<td>:テーブルの中のセルを定義します。table dataの略です。テーブルの中のセルを定義します。
本要素を繰り返すと、その数だけのセルが作成されます。本要素で指定したセルは、文字(テキスト)は左揃えになります。また、td要素は、tr要素の子要素です。複数のtr要素がある場合は、それぞれのtr内にあるtd要素の数を一致させるのが原則となります。

2.テーブル作成part2

書籍『改訂版演習 Webプログラミング入門』2-4-3 練習問題4-1 からWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>テーブルの作成1</title>
</head>
<body>
    <table border="5">
    <caption>施設ガイド</caption>
        <tr>
            <th>施設名</th>
            <th>収容人数</th>
            <th>設備</th>
        </tr>
        <tr>
            <td>AVコーナ</td>
            <td>10名</td>
            <td>ビデオデッキ5台</td>
        </tr>
            <td>コンピュータルーム</td>
            <td>30名</td>
            <td>パソコン32台</td>
        </tr>
         <tr>
            <td>スタジオ</td>
            <td>100名</td>
            <td>大型ビデオプロジェクト</td>
        </tr>
    </table>
</body>
</html>

以下のWebページが作成されます！

3.テーブル作成part3

書籍『改訂版演習 Webプログラミング入門』2-4-3 練習問題4-2 からWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>テーブルの作成2</title>
</head>
<body>
    <table border="5">
    <caption>講座総合案内</caption>
        <tr>
            <th>施設名</th>
            <th>内容</th>
        </tr>
        <tr>
             <td>クッキング倶楽部</td>
             <td>金曜　17:00～19:30 <br>月謝　4,500円</td>
        </tr>
        <tr>
             <td>インターネット情報検索</td>
             <td>土曜　18:00～20:00　<br>月謝　4,000円</td>
        </tr>
        <tr>
             <td>ギター中級</td>
             <td>日曜　17:00～19:30 <br>月謝　3,000円</td>
        </tr>
        <tr>
             <td>楽しいラッピング</td>
             <td>木曜　10:00～12:00　<br>月謝　3,500</td>
        </tr>
    </table>
</body>
</html>

以下のWebページが作成されます！

4. テーブル作成part4(行方向のセルの結合)

書籍『改訂版演習 Webプログラミング入門』2-4-3 練習問題4-3 からWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>行方向のセルの結合</title>
</head>
<body>
    <table border="1">
        <caption>rowspan</caption>
        <tr>
            <td>あ</td>
            <td rowspan="2">い</td>
            <td>う</td>
            <td>え</td>
            <td>お</td>
        </tr>
        <tr>
            <td>か</td>
            <td>く</td>
            <td>け</td>
            <td>こ</td>
        </tr>
        <tr>
            <td>さ</td>
            <td>し</td>
            <td>す</td>
            <td>せ</td>
            <td>そ</td>
        </tr>
    </table>
</body>
</html>

以下のWebページが作成されます！

説明:

<td rowspan="縦につなげるセルの数" >テーブルを作成することを宣言します。ピクセル数を0にすると、枠が表示されません。

5. テーブル作成part5(列方向のセル結合)

書籍『改訂版演習 Webプログラミング入門』2-4-3 練習問題4-4 からWebページを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>列方向のセルの結合</title>
</head>
<body>
    <table border="1">
        <caption>colspan</caption>
        <tr>
            <td>あ</td>
            <td>い</td>
            <td>う</td>
            <td>え</td>
            <td>お</td>
        </tr>
        <tr>
            <td>か</td>
            <td colspan="3">き</td>
            <td>こ</td>
        </tr>
        <tr>
            <td>さ</td>
            <td>し</td>
            <td>す</td>
            <td>せ</td>
            <td>そ</td>
        </tr>
    </table>
</body>
</html>

以下のWebページが作成されます！

説明:

< td colspan="横につなげるセルの数" >指定したセルの数分、セルを横につなげます。

まとめ

最後までご覧いただきありがとうございます！！テーブル作成に取り組んでみました！次回は総合練習2について挑戦します！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

HTML ハンズオンpart5

イントロダクション

目次

1. テーブル作成part1

説明:

2.テーブル作成part2

3.テーブル作成part3

4. テーブル作成part4(行方向のセルの結合)

説明:

5. テーブル作成part5(列方向のセル結合)

説明:

まとめ