テーブルの基本

[作成] table1.html、table1.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table1.css">
            <title>テーブルの基本</title>
        </head>
        <body>
            <table border="1">
                <tr>
                    <td>左上</td>
                    <td>右上</td>
                </tr>
                <tr>
                    <td>左下</td>
                    <td>右下</td>
                </tr>
            </table>
        </body>
        </html>
        

table1.css

        @charset "UTF-8";

        table {
            border: 1px solid gray;
        }
        td {
            border: 1px solid gray;
        }
        

テーブルの枠線の幅を変更

[修正] table1.css

[フォルダ] webpage/ch07

        @charset "UTF-8";

        table {
            border: 10px solid gray;
        }
        td {
            border: 1px solid gray;
        }
        

セルの区切り線の幅を変更

[修正] table1.css

[フォルダ] webpage/ch07

        @charset "UTF-8";

        table {
            border: 10px solid gray;
            border-spacing: 10px;
        }
        td {
            border: 1px solid gray;
        }
        

セルの内側の余白を変更

[修正] table1.css

[フォルダ] webpage/ch07

        @charset "UTF-8";

        table {
            border: 10px solid gray;
            border-spacing: 10px;
        }
        td {
            border: 1px solid gray;
            padding: 10px;
        }
        

横方向のセルを連結する

[作成] table3_1.html、table3.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table3.css">
            <title>セルを横に連結する</title>
        </head>
        <body>
            <table>
                <tr>
                    <td colspan="2">A1 </td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                    <td>B3</td>
                </tr>
            </table>
        </body>
        </html>
        

table3.css

        @charset "UTF-8";

        table {
            border: 1px solid gray;
        }
        td {
            border: 1px solid gray;
        }
        

縦方向のセルを連結する

[作成] table3_2.html

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table3.css">
            <title>セルを縦に連結する</title>
        </head>
        <body>
            <table >
                <tr>
                    <td rowspan="3">A1</td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                </tr>
                <tr>
                    <td>C1</td>
                </tr>
            </table>
        </body>
        </html>
        

テーブルのサイズをピクセル数で指定する

[作成] table4_1.html、table4_1.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table4_1.css">
            <title>テーブルのサイズ</title>
        </head>
        <body>
            <table>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                </tr>
            </table>
        </body>
        </html>
        

table4_1.css

        @charset "UTF-8";

        table {
            border: 1px solid gray;
            width: 400px;
            height: 100px;
        }
        td {
            border: 1px solid gray;
        }
        

テーブルのサイズを比率指定する

[作成] table4_2.html、table4_2.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table4_2.css">
            <title>テーブルのサイズ</title>
        </head>
        <body>
            <table>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                </tr>
            </table>
        </body>
        </html>
        

table4_2.css

        @charset "UTF-8";

        html,body{
            height: 100%;
        }

        table {
            border: 1px solid gray;
            width: 70%;
            height: 80%;
        }
        td {
            border: 1px solid gray;
        }
        

セルのサイズをピクセル数で指定する

[作成] table4_3.html、table4_3.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table4_3.css">
            <title>セルのサイズ</title>
        </head>
        <body>
            <table>
                <tr>
                    <td>A1</td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                </tr>
            </table>
        </body>
        </html>
        

table4_2.css

        @@charset "UTF-8";

        table {
            border: 1px solid gray; 
        }
        td {
            border: 1px solid gray;
            width: 200px;
            height: 100px;
        }
        

セルのサイズをピクセル数で指定する

[作成] table4_4.html、table4_4.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table4_4.css">
            <title>セルのサイズ</title>
        </head>
        <body>
            <table>
                <tr>
                    <td class="td-first">A1</td>
                    <td>A2</td>
                </tr>
                <tr>
                    <td>B1</td>
                    <td>B2</td>
                </tr>
            </table>
        </body>
        </html>
        

table4_2.css

        @charset "UTF-8";

        table {
            border: 1px solid gray;
            width: 400px;
            height: 200px;
        }
        td {
            border: 1px solid gray;
        }
        td.td-first {
            width: 70%;
            height: 60%;
        }
        

練習問題

[作成] table6.html、table6.css

[フォルダ] webpage/ch07

        <!DOCTYPE html>
        <html lang="ja">
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="table6.css">
            <title>セルのサイズ</title>
        </head>
        <body>
            <table>
                <tr>
                    <td colspan="3">111</td>
                </tr>
                <tr>
                    <td rowspan="2">222</td>
                    <td>333</td>
                    <td>444</td>
                </tr>
                <tr>
                    <td>555</td>
                    <td>666</td>
                </tr>
            </table>
        </body>
        </html>
        

table4_2.css

        @charset "UTF-8";

        table {
            border-collapse: collapse;
            border: 1px solid gray;
            width: 350px;
            height: 140px;
        }
        td {
            border: 1px solid gray;
        }