Aryan Prasad's Blog

HTML - Table and Forms.

Aryan Prasad's photo
Aryan Prasad
·

3 min read

Web developers can organize information like text, images, links, and other data into rows and columns of cells using HTML tables.

  • TAG

    ● The <table> tag is used to generate HTML tables. T

    ● Table rows are created using the <tr> tag, while data cells are created using the td> tag. Regular elements beneath <td> are by default left aligned.

  • ./ Table formation using HTML only.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TABLE</title>
</head>
<body>
    <table border="10px" cellpadding="10px" cellspacing="10px" >
        <tr>
            <th> Sr NO.</th>
            <th> 1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>

        </tr>

        <tr>
            <td><B>ARYAN.</B></td>
            <td>ENGLISH = 67</td>
            <td>HINDI=74</td>
            <td>SCIENCE=93</td>
            <td rowspan="1">MATHS=37</td>
            <td><img src="https://images.pexels.com/photos/13766882/pexels-photo-13766882.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load" alt="" height="100px" width="100px" title="Image"></td>
        </tr>

        <tr>
            <td><B>IMRAN</B></td>
            <td>ENGLISH = 63</td>
            <td>HINDI = 73</td>
            <td colspan="1">SCIENCE=76</td>
            <td>MATHS = 72</td>
            <td><video src="https://player.vimeo.com/external/463902394.sd.mp4?s=e51f3979e6629a9309d6299f46e94957bd5a647d&profile_id=164&oauth2_token_id=57447761" autoplay  height="100px" width="100px" muted ></video> </td>

        </tr>

        <tr>
            <td><B>FARDEEN.</B></td>
            <td>ENGLISH = 88</td>
            <td>HINDI =92</td>
            <td>SCIENCE =64</td>
            <td>MATHS =92</td>
            <td>HISTORY= 82</td>
        </tr>
    </table>
</body>
</html>

Form.

An HTML form makes it easier for the user to input data like name, email address, password, phone number, etc. that may be transferred to the server for processing. A portion of a page known as an HTML form contains controls including text fields, password fields, checkboxes, radio buttons, a submit button, menus, etc.

<!-- Simple namebox -->
        <label for="name"> Enter your name:</label>
        <input type="text" name="_username" id="name" placeholder="john">

<!-- For email -->
        <label for="email">Enter your Email ID:</label>
        <input type="email" name="_useremail" id="email" placeholder="@example.com">

<label for="password">Paswword:</label>
        <input type="password" name="_userpassword" id="passwoord">

<!-- for long input -->
        <label for="Address">Address:</label>
        <textarea name="_Address" id="Address"></textarea>
        <br>

<!-- for date -->
        <label for="DOB">Date of birth:</label>
        <input type="date" name="_userdob" id="DOB">
        <br>

<!-- for selective option -->
        <label for="">Gender:</label>
        <label for="male">male:</label>
        <input type="radio" name="_gender" id="male" value="male">
        <label for="female">female:</label>
        <input type="radio" name="_gender" id="female" value="female">
        <label for="other">other:</label>
        <input type="radio" name="_gender" id="other" value="other" >
        <br>

<!-- for multiple choice -->
        <label for="language">Language:</label>
        <br>
        <label for="Hindi">Hindi:</label>
        <input type="checkbox" name="_userhindi" id="Hindi">
        <label for="English">English:</label>
        <input type="checkbox" name="_usereng" id="English">
        <label for="Urdu">Urdu:</label>
        <input type="checkbox" name="_userurdu" id="Urdu">
        <br>

EXERCISE.

Let's make a dummy form-fill up the website with HTML only.

<!DOCTYPE html>
<html lang="en">
<head>

    <title>FORM</title>
</head>
<body>
    <!-- box and box name -->
    <fieldset>
        <legend><b>Details</b></legend>
        <!-- Simple namebox -->
        <label for="name"> Enter your name:</label>
        <input type="text" name="_username" id="name" placeholder="john">
        <br>
        <!-- For email -->
        <label for="email">Enter your Email ID:</label>
        <input type="email" name="_useremail" id="email" placeholder="@example.com">
        <br>
        <!-- passwoord -->
        <label for="password">Paswword:</label>
        <input type="password" name="_userpassword" id="passwoord">
        <br>
        <!-- for long input -->
        <label for="Address">Address:</label>
        <textarea name="_Address" id="Address"></textarea>
        <br>
        <!-- for date -->
        <label for="DOB">Date of birth:</label>
        <input type="date" name="_userdob" id="DOB">
        <br>
        <!-- for selective option -->
        <label for="">Gender:</label>
        <label for="male">male:</label>
        <input type="radio" name="_gender" id="male" value="male">
        <label for="female">female:</label>
        <input type="radio" name="_gender" id="female" value="female">
        <label for="other">other:</label>
        <input type="radio" name="_gender" id="other" value="other" >
        <br>
        <!-- for multiple choice -->
        <label for="language">Language:</label>
        <br>
        <label for="Hindi">Hindi:</label>
        <input type="checkbox" name="_userhindi" id="Hindi">
        <label for="English">English:</label>
        <input type="checkbox" name="_usereng" id="English">
        <label for="Urdu">Urdu:</label>
        <input type="checkbox" name="_userurdu" id="Urdu">
        <br>
        <input type="submit" >
    </fieldset>
</body>
</html>

HTML5