[HTML] ДОМАШНО ФОРМИ - ЗАДАЧА 3

<!-- images - https://www.dropbox.com/s/o4nsy0na190dgmk/Forms%20ex.3%20Images.rar -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Products</title>
</head>
    <body>
    <style type="text/css">
        table {
            width: 100%;
            padding: 0px;
            border-collapse: collapse;
        }

        td, th {
            padding: 0;
            padding-left: 5px;
            border: solid 1px #808080;
            vertical-align: middle;
            text-align: left;
            font-weight: normal;
            font-family: Arial;
            font-size: small;
            color: #3b2f2f;
        }

        thead, tfoot {
            background-color: #ccd1d5;
        }

        th, tfoot {
            height: 40px;
            background-image: url(images/bg1.jpg);
            background-position: left center;
            background-repeat: repeat-x;
            color: #0e0d0d;
        }

        .btn {
            background-image: url(images/btn.png);
            background-position: center center;
            background-repeat: no-repeat;
            cursor: pointer;
            width: 22px;
            height: 22px;
            margin-left: 6px;
        }

        .bt {
            border: 0px;
            padding: 0px;
            cursor: pointer;
            height: 22px;
            background-color: transparent;
            color: #3b2f2f;
        }

            .bt:focus {
                border: 1px solid #f00;
                padding: 0px;
                cursor: pointer;
                height: 22px;
                background-color: transparent;
                color: #3b2f2f;
            }

        .usd:before {
            content: '$';
        }
    </style>
    <table>
        <thead>
            <tr>
                <th colspan="6">
                    <label id="th0">Drag a column header and drop it here to group by that column</label>
                </th>
            </tr>
            <tr>
                <th>
                    <label id="th1">ProductID</label>
                </th>
                <th>
                    <label id="th2">Product name</label>
                </th>
                <th>
                    <label id="th3">Unit price</label>
                </th>
                <th>
                    <label id="th4">Quantity per unit</label>
                </th>
                <th>
                    <label id="th5">Units in stock</label>
                </th>
                <th>
                    <label id="th6">Discontinued</label>
                </th>
            </tr>
            <tr>
                <th>
                    <input id="in1" type="text" style=" width:50px;">
                </th>
                <th>
                    <input id="in2" type="text" style=" width:150px;">
                </th>
                <th>
                    <input id="in3" type="text" style=" width:90px;">
                    <input id="btn1" type="button" class="btn">
                </th>
                <th>
                    <input id="in4" type="text" style=" width:100px;">
                </th>
                <th>
                    <input id="in5" type="text" style=" width:90px;">
                    <input id="btn2" type="button" class="btn">
                </th>
                <th>
                    <input id="in6" type="checkbox">
                    <input id="btn3" type="button" class="btn">
                </th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2" style="border-right:0; height:40px;">
                    <input type="button" id="btnF1" class="btn" style="background-image:url(images/btn1a.png);">
                    <input type="button" id="btnF2" class="btn" style="background-image:url(images/btn1.png);">
                    <input type="button" id="btnF3" value="1" class="bt">
                    <input type="button" id="btnF4" value="2" class="bt">
                    <input type="button" id="btnF5" value="3" class="bt">
                    <input type="button" id="btnF6" value="4" class="bt">
                    <input type="button" id="btnF7" value="5" class="bt">
                    <input type="button" id="btnF8" value="6" class="bt">
                    <input type="button" id="btnF9" value="7" class="bt">
                    <input type="button" id="btnF10" value="8" class="bt">
                    <input type="button" id="btnF11" value="9" class="bt">
                    <input type="button" id="btnF12" value="10" class="bt">
                    ...
                    <input type="button" id="btnF13" class="btn" style="background-image:url(images/btn2.png);">
                    <input type="button" id="btnF14" class="btn" style="background-image:url(images/btn2a.png);">

                </td>
                <td colspan="2" style="border-right:0;border-left:0; height:40px;">
                    <label for="numberOfpages">Page size</label>
                    <select id="numberOfpages">
                        <option>5</option>
                        <option selected="selected">10</option>
                        <option>15</option>
                        <option>20</option>
                    </select>
                </td>
                <td colspan="2" style="border-left:0; height:40px; text-align:right; padding-right:10px;">
                    <label for="info">335104 items in 33511 pages</label>
                </td>

            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>
                    <label id="tr1cn1">1</label>
                </td>
                <td>
                    <label id="tr1cn2">Chai</label>
                </td>
                <td>
                    <label id="tr1cn3" class="usd">18.00</label>
                </td>
                <td>
                    <label id="tr1cn4">10 boxes x 20 bags</label>
                </td>
                <td>
                    <label id="tr1cn5">39</label>
                </td>
                <td class="last">
                    <input id="tr1cn6" type="checkbox">
                </td>

            </tr>
            <tr>
                <td>
                    <label id="tr2cn1">2</label>
                </td>
                <td>
                    <label id="tr2cn2">Chang</label>
                </td>
                <td>
                    <label id="tr2cn3" class="usd">19.00</label>
                </td>
                <td>
                    <label id="tr2cn4">24 - 12 oz bottles</label>
                </td>
                <td>
                    <label id="tr2cn5">17</label>
                </td>
                <td class="last">
                    <input id="tr2cn6" type="checkbox">
                </td>

            </tr>
            <tr>
                <td>
                    <label id="tr3cn1">3</label>
                </td>
                <td>
                    <label id="tr3cn2">Anissed Syrup</label>
                </td>
                <td>
                    <label id="tr3cn3" class="usd">10.00</label>
                </td>
                <td>
                    <label id="tr3cn4">12 - 550 ml bottles</label>
                </td>
                <td>
                    <label id="tr3cn5">13</label>
                </td>
                <td class="last">
                    <input id="tr3cn6" type="checkbox">
                </td>

            </tr>
            <tr>
                <td>
                    <label id="tr4cn1">4</label>
                </td>
                <td>
                    <label id="tr4cn2">Chef Anton's Cajun Seasoning</label>
                </td>
                <td>
                    <label id="tr4cn3" class="usd">22.00</label>
                </td>
                <td>
                    <label id="tr4cn4">48 - 6 oz jars</label>
                </td>
                <td>
                    <label id="tr4cn5">53</label>
                </td>
                <td class="last">
                    <input id="tr4cn6" type="checkbox">
                </td>

            </tr>
            <tr>
                <td>
                    <label id="tr5cn1">5</label>
                </td>
                <td>
                    <label id="tr5cn2">Chef Anton's Gumbo Mix</label>
                </td>
                <td>
                    <label id="tr5cn3" class="usd">21.35</label>
                </td>
                <td>
                    <label id="tr5cn4">36 boxes</label>
                </td>
                <td>
                    <label id="tr5cn5">0</label>
                </td>
                <td class="last">
                    <input id="tr5cn6" type="checkbox" checked="checked">
                </td>

            </tr>

            <tr>
                <td>
                    <label id="tr6cn1">6</label>
                </td>
                <td>
                    <label id="tr6cn2">Grandma's Boysenberry Spread</label>
                </td>
                <td>
                    <label id="tr6cn3" class="usd">25.00</label>
                </td>
                <td>
                    <label id="tr6cn4">12 - 18 oz jars</label>
                </td>
                <td>
                    <label id="tr6cn5">120</label>
                </td>
                <td class="last">
                    <input id="tr6cn6" type="checkbox">
                </td>

            </tr>

            <tr>
                <td>
                    <label id="tr7cn1">7</label>
                </td>
                <td>
                    <label id="tr7cn2">Uncle Bob's Organic Dried Pears</label>
                </td>
                <td>
                    <label id="tr7cn3" class="usd">30.00</label>
                </td>
                <td>
                    <label id="tr7cn4">12 -1 lb pkgs.</label>
                </td>
                <td>
                    <label id="tr7cn5">15</label>
                </td>
                <td class="last">
                    <input id="tr7cn6" type="checkbox">
                </td>
            </tr>
            <tr>
                <td>
                    <label id="tr8cn1">8</label>
                </td>
                <td>
                    <label id="tr8cn2">Nortwoods Cranberry Sauce</label>
                </td>
                <td>
                    <label id="tr8cn3" class="usd">40.00</label>
                </td>
                <td>
                    <label id="tr8cn4">12 - 12 oz jars</label>
                </td>
                <td>
                    <label id="tr8cn5">6</label>
                </td>
                <td class="last">
                    <input id="tr8cn6" type="checkbox">
                </td>

            </tr>
            <tr>
                <td>
                    <label id="tr9cn1">9</label>
                </td>
                <td>
                    <label id="tr9cn2">Mishi Cobe Niku</label>
                </td>
                <td>
                    <label id="tr9cn3" class="usd">97.00</label>
                </td>
                <td>
                    <label id="tr9cn4">18 - 500 g pkgs.</label>
                </td>
                <td>
                    <label id="tr9cn5">29</label>
                </td>
                <td class="last">
                    <input id="tr9cn6" type="checkbox" checked="checked">
                </td>

            </tr>
            <tr>
                <td>
                    <label id="tr10cn1">10</label>
                </td>
                <td>
                    <label id="tr10cn2">Ikura</label>
                </td>
                <td>
                    <label id="tr10cn3" class="usd">31.00</label>
                </td>
                <td>
                    <label id="tr10cn4">12 - 200 ml jars</label>
                </td>
                <td>
                    <label id="tr10cn5">31</label>
                </td>
                <td class="last">
                    <input id="tr10cn6" type="checkbox">
                </td>

            </tr>
        </tbody>
    </table>
    </body>
</html>