(IX) HTML LAB Work

Date :

For zebra strapped color style code in css

<style type="text/css"> table{ border-collapse: collapse; } tr:nth-child(even) { background-color: #f2f2f2; } </style>

Q1. Make following table.
Marks Division of Grade -9
SN Subject Name Marks Allotment
Theory Practical
1 English 75 25
2 Nepali 75 25
3 Science 75 25
4 C. Maths 75 25
5 Social 75 25
6 O. Maths 75 25
7 Computer 50 50

Click for ans
<table border="1" width="100%"> <caption>Marks Division of Grade -9</caption> <tbody><tr> <th rowspan="2">SN</th> <th rowspan="2">Subject Name</th> <th colspan="2">Marks Allotment</th> </tr> <tr> <th>Theory</th> <th>Practical</th> </tr> <tr> <td>1</td> <td>English</td> <td>75</td> <td>25</td> </tr> <tr> <td>2</td> <td>Nepali</td> <td>75</td> <td>25</td> </tr> <tr> <td>3</td> <td>Science</td> <td>75</td> <td>25</td> </tr> <tr> <td>4</td> <td>C. Maths</td> <td>75</td> <td>25</td> </tr> <tr> <td>5</td> <td>Social</td> <td>75</td> <td>25</td> </tr> <tr> <td>6</td> <td>O. Maths</td> <td>75</td> <td>25</td> </tr> <tr> <td>7</td> <td>Computer</td> <td>50</td> <td>50</td> </tr> </tbody></table>

Make following registration form

Registation formName: Class : Gender: Male Female Phone Number:
<form> <fieldset> <legend>Registation form </legend> Name: <input type="text" placeholder="Enter your name"> Class : <select> <option>9 Coryana</option> <option>9 Gallica</option> <option>9 Hugonis</option> <option>9 Filipes</option> </select> Gender: <input type="radio" name="gender">Male <input type="radio" name="gender">Female Phone Number: <input type="text" placeholder="Enter your phone number"> <input type="reset"> <input type="submit"> </fieldset> </form> <style> legend{ background-color:#4169E1; color:white; border-radius:8px; font-family:tahoma; padding:8px; } fieldset{ white-space: pre-wrap; margin-bottom:10px; border:1px solid green; line-height:1.5; } </style>
Display days of a week in ordered list (1. Sunday 2. Mon ,....) and so on
<ol type="1"> <li>Sunday</li> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> </ol>