html/booksForRent

<html>

<head>
    <title>
        Rent Books
    </title>

    <style>
    #book_table tr>th, #book_table tr>td
    {
        border : 1px solid black;
        padding : 10px;
    }
    #book_table
    {
        border-collapse: collapse;
    }
    fieldset
    {
        width: max-content ;
    }
    #submit_button
    {
        background: green;
        padding :10px;
        border: 0px;
        color: white;
        border-radius: 5% 5% 5% 5%;
    }
    #submit_button:hover
    {
        background: #006400;
        cursor: pointer;
    }
    #cancel_button
    {
        background: red;
        padding:10px;
        border:0px;
        color:white;
        border-radius: 5% 5% 5% 5%;
    }
    #cancel_button:hover
    {
        background: #8B0000;
        cursor:pointer;
    }

    </style>

</head>
<body>

    <form method="get">

<fieldset>

    <legend>BOOK RENT PAGE</legend>
    <table>
        <tr>
            <td>
                <fieldset>

                    <legend>personal Details</legend>
                    <table>
                        <tr>
                <td>First Name:</td> <td><input type="text"></td>
                    </tr>
                    <tr>
                        <td>Last Name:</td>   <td><input type="text"></td>

                    </tr>
                <tr>
                    <td>Phone Number:</td> <td><input type ="text"></td>
                </tr>
                <tr>
                    <td>Email:</td> <td><input type ="text"></td>
                </tr>
                <tr>
                    <td>Jop:</td> <td>
                        <input type="text" list="Jobs" />
                    <datalist id="Jobs">
                        <option value="Computer Science"></option>
                        <option value="Computer Eng"></option>

                    </datalist>
                </td>

                </tr>
                <tr>
                    <td>Gender:</td> <td><select>
                        <optgroup>
                            <option value="Select">Select</option>
                            <option value="male">Male</option>
                            <option value="female">Female</option>
                        </optgroup>
                    </select></td>
                </tr>


                </table>

                </fieldset>
            </td>
            <td><img src="book.png" width="500px" weight="500px" class="center"></td>
        </tr>
    </table>
    <fieldset>
        <legend>BOOKS DETAILS</legend>

      <table id="book_table">
            <tr>
                <th>Book Group</th>
                <th>Book Name</th>
                <th>Author</th>
                <th colspan="2">Data & Link</th>
                <th>Book price</th>
                <th>Make Order</th>
            </tr>
            <tr>
                <td rowspan="3" >Phsics Books</td>
                <td>The New Millennium Edition</td>
                <td>Matthew Sands</td>
                <td>Jan 4, 2011</td>
                <td><a href="url">book link</a></td>
                <td>94.49$</td>
                <td><input type="checkbox"></td>

            </tr>
            <tr>
                <td>The Fabric of the Cosmos</td>
                <td>Brian Greene</td>
                <td>Feb 8, 2005</td>
                <td><a href="url">book link</a></td>
                <td>44.5$</td>
                <td><input type="checkbox"></td>
            </tr>
            <tr>
                <td>The elegant Universe</td>
                <td>Brain Greene</td>
                <td>Oct 11, 2020</td>
                <td><a href="url">book link</a></td>
                <td>10.19$</td>
                <td><input type="checkbox"></td>
            </tr>
            <tr>
                <td rowspan="2">Math Book</td>
                <td>The Art of Statistics</td>
                <td>David Spiegelhater</td>
                <td>Septemper 3, 2019</td>
                <td><a href="url">book link</a></td>
                <td>22.06$</td>
                <td><input type="checkbox"></td>

            </tr>
            <tr>
                <td>Infinte Powers</td>
                <td>STEVEN STROGATZ</td>
                <td>Juna 6, 2019</td>
                <td><a href="url">book link</a></td>
                <td>21.08$</td>
                <td><input type="checkbox"></td>
            </tr>
            <tr>
                <td>Computer Books</td>
                <td>C Programming Language</td>
                <td>Dennis M. Ritchie</td>
                <td>April 1, 1988</td>
                <td><a href="url">book link</a></td>
                <td>30.15$</td>
                <td><input type="checkbox"></td>
            </tr>

      </table>

    </fieldset>
    <br><br><br>
    <input id="submit_button" type="submit" value="Purchase" />
    <button id="cancel_button">Cancel</button>
</fieldset>

</form>
</body>


</html>