# HTML - Table and Forms.

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

* TAG
    
    ● The &lt;table&gt; tag is used to generate HTML tables. T
    
    ● Table rows are created using the &lt;tr&gt; tag, while data cells are created using the td&gt; tag. Regular elements beneath &lt;td&gt; are by default left aligned.
    
* ./ Table formation using HTML only.
    

```xml
<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>
```

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/7617c9c7-c6cb-47c7-bafb-fe218602dee0/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230128%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230128T150849Z&X-Amz-Expires=86400&X-Amz-Signature=4d99cd6413c1f0ad939a813aa3389858e0b8cb8ad3b7f176c4d89462601808e9&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject align="center")

### 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.

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

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

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

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

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

```xml
<!-- 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>
```

```xml
<!-- 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.**

```xml
<!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>
```

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/472517b6-04e8-4829-8f67-10700a1d8301/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230128%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230128T151220Z&X-Amz-Expires=86400&X-Amz-Signature=0632dd5a4ad46e6043e62b4d36aa84b10d47cd7430df4503cb00d65c249b0c9b&X-Amz-SignedHeaders=host&response-content-disposition=filename%3D%22Untitled.png%22&x-id=GetObject align="center")
