WEEK-2
HTML Table, Forms, Frames
~238W1A12C6
PRELAB:
1. What is the purpose of the <thead>, <tbody>, and <tfoot> tags?
These tags group the header, body, and footer content of a table for better structure and
styling.
2. How can you create a table with borders?
Add the border attribute to the <table> tag like <table border="1"> to display borders
around cells.
3. How do you make a table cell span multiple rows?
Use the rowspan attribute in the <td> or <th> tag to merge cells vertically.
4. How can you align content inside a table cell?
Use the align and valign attributes inside the <td> tag to control horizontal and vertical
alignment.
5. How is a checkbox added in a form?
Use <input type="checkbox"> to allow users to select multiple options from a list.
6. How do you make a form submit data?
Add the action and method attributes to the <form> tag to specify where and how to send
form data.
7. How do you create a submit button in a form?
Use <input type="submit"> to let users submit the form data.
8. How can you label form fields?
Use the <label> tag and link it to the input field using the for attribute to improve
accessibility.
9. How can you prefill a value in a text field?
Use the value attribute in <input type="text"> to set a default text inside the field.
10. How can you group related form controls?
Use the <fieldset> and <legend> tags to group and label related form inputs clearly.
IN LAB:
WEEK-2
-238W1A12C6
Dt:25-06-2025
1.Write a HTML program, to explain the working of tables. (use tags: <table>, <tr>,
<th>, <td> and attributes: border, rowspan, colspan)
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h1>Student Mpc Marks</h1>
<table border="1">
<tr>
<th rowspan="2">Student Name</th>
<th colspan="3">Subject Marks</th>
</tr>
<tr>
<th>Maths</th>
<th>Physics</th>
<th>Chemistry</th>
</tr>
<tr>
<td>Bhaskar</td>
<td>90</td>
<td>85</td>
<td>80</td>
</tr>
<tr>
<td>Lalitha</td>
<td>78</td>
<td>82</td>
<td>80</td>
</tr>
<tr>
<td>Anjali</td>
<td>92</td>
<td>89</td>
<td>94</td>
</tr>
</table>
</body>
</html>
OUTPUT:
2.Write a HTML program, to explain the working of tables by preparing a timetable.
(Note: Use <caption> tag to set the caption to the table & also use cell spacing, cell
padding, border, rowspan, colspan etc.).
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Timetable Example</title>
<style>
table {
border-collapse: collapse; /* To make border-spacing work nicely */
width: 70%;
margin: auto;
font-family: Arial, sans-serif;
}
caption {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
th, td {
border: 2px solid #333;
padding: 10px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<table border="2" cellspacing="5" cellpadding="10">
<caption>Time Table</caption>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td rowspan="2">Math</td> <!-- Math spans two hours -->
<td>Physics</td>
<td>English</td>
<td>History</td>
<td>Computer Science</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Chemistry</td>
<td>Sanskrit</td>
<td>Geography</td>
<td>Computer Science</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td>Biology</td>
<td colspan="2">Art & Craft</td> <!-- Art & Craft spans two days -->
<td>History</td>
<td>Physical Education</td>
</tr>
<tr>
<td>12:00 - 1:00</td>
<td colspan="5" style="text-align: center;">Lunch Break</td>
</tr>
<tr>
<td>1:00 - 2:00</td>
<td>Math</td>
<td>Physics</td>
<td>English</td>
<td>History</td>
<td>Computer Science</td>
</tr>
<tr>
<td>2:00 - 4:00</td>
<td>Games</td>
<td>English</td>
<td>Games</td>
<td>Chemistry</td>
<td>Games</td>
</tr>
</table>
</body>
</html>
OUTPUT:
3.Write a HTML program, to explain the working of forms by designing Registration
form. (Note: Include text field, password field, number field, date of birth field,
checkboxes, radio buttons, list boxes using <select>&<option> tags, <text area> and
two buttons ie: submit and reset. Use tables to provide a better view).
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Summer Courses Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
width: 70%;
margin: auto;
border-collapse: collapse;
border: 1px solid #000;
}
caption {
font-weight: bold;
font-size: 1.3em;
margin-bottom: 10px;
}
td, th {
border: 1px solid #000;
padding: 8px 12px;
vertical-align: middle;
}
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 5px;
box-sizing: border-box;
font-size: 1em;
}
textarea {
resize: vertical;
}
.checkbox-group label,
.radio-group label {
display: block;
font-weight: normal;
margin-left: 20px;
cursor: pointer;
}
.checkbox-group input,
.radio-group input {
margin-right: 5px;
cursor: pointer;
}
.buttons {
text-align: center;
margin-top: 20px;
}
.buttons input {
width: 100px;
padding: 8px;
margin: 0 20px;
font-size: 1em;
cursor: pointer;
}
</style>
</head>
<body>
<form action="#" method="post">
<table>
<caption>Summer Courses Registration Form</caption>
<tr>
<td><label for="name">Full Name</label></td>
<td><input type="text" id="name" name="name" placeholder="Enter your full name"
required></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="email" id="email" name="email" placeholder="Enter your email"
required></td>
</tr>
<tr>
<td><label for="phone">Phone Number</label></td>
<td><input type="number" id="phone" name="phone" placeholder="Enter your phone
number" required></td>
</tr>
<tr>
<td>Gender</td>
<td class="radio-group">
<label><input type="radio" name="gender" value="Male" required> Male</label>
<label><input type="radio" name="gender" value="Female" required>
Female</label>
<label><input type="radio" name="gender" value="Other" required> Other</label>
</td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" id="password" name="password" placeholder="Create a
password" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td>Courses to Enroll</td>
<td class="checkbox-group">
<label><input type="checkbox" name="courses" value="Web Development"> Web
Development</label>
<label><input type="checkbox" name="courses" value="Data Science"> Data
Science</label>
<label><input type="checkbox" name="courses" value="Machine Learning">
Machine Learning</label>
<label><input type="checkbox" name="courses" value="Cyber Security"> Cyber
Security</label>
</td>
</tr>
<tr>
<td><label for="about">About You (200 words)</label></td>
<td>
<textarea id="about" name="about" rows="6" placeholder="Tell us about
yourself..."></textarea>
</td>
</tr>
<tr>
<td><label for="payment">Preferred Payment Method</label></td>
<td>
<select id="payment" name="payment" required>
<option value="" disabled selected>--Select payment method--</option>
<option value="phonepe">PhonePe</option>
<option value="googlepay">Google Pay</option>
<option value="paytm">Paytm</option>
<option value="creditcard">Credit Card</option>
</select>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</div>
</form>
</body>
</html>
OUTPUT:
4.Write a HTML program, to explain the working of frames, such that page is to be divided
into 3 parts on either direction. (Note: first frame image, second frame paragraph, third
frame 🡪 hyperlink. And also make sure of using “no frame” attribute such that frames to be
fixed).
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>frames</title>
</head>
<style>
.image{
width: 100px;
height: 100px;
border: none;
height: 100px;
}
</style>
<frameset cols="30%,40%,30%">
<frame class="image" src="image.jpg">
<frame src="Task -2(2).html"></frame>
<frame src="https://www.w3schools.in/html/frames"></frame>
<noframes>
<p>Not supporting</p>
</noframes>
</frameset>
</html>
OUTPUT:
Result: The Program executed successfully.
POSTLAB:
AIM: To demonstrate the working of HTML tables, forms, and layout division using a single
webpage with a timetable, registration form, and multi-section layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table, Form & Frame Layout Demo</title>
<style>
*{
box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, sans-serif;}
.container {
display: grid;
grid-template-rows: 35% 45% 20%;
height: 100vh;}
.frame {
border: 2px solid #444;
padding: 10px;
overflow: auto;}
table {
width: 100%;
border-collapse: collapse;}
table, th, td {
border: 1px solid black;}
th, td {
padding: 8px;
text-align: center;}
caption {
caption-side: top;
font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
}
form {
display: flex;
flex-direction: column;
max-width: 500px;
margin: auto;
}
form label {
margin-top: 10px;
}
form input, form select, form textarea {
padding: 5px;
margin-top: 4px;
}
form input[type="submit"], form input[type="reset"] {
margin-top: 10px;
width: 100px;
}
h2, h3 {
text-align: center;
margin-top: 0;
}
</style>
</head>
<body>
<div class="container">
<!-- Top Frame: Timetable Table -->
<div class="frame">
<h2>Student Timetable</h2>
<table>
<caption>Weekly Timetable</caption>
<tr>
<th>Day/Period</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
<th>1-2</th>
</tr>
<tr>
<th>Monday</th>
<td>Math</td>
<td>Physics</td>
<td>Chemistry</td>
<td>English</td>
<td rowspan="5">LUNCH</td>
</tr>
<tr>
<th>Tuesday</th>
<td colspan="2">Workshop</td>
<td>English</td>
<td>Math</td>
</tr>
<tr>
<th>Wednesday</th>
<td>Biology</td>
<td>Math</td>
<td>Physics</td>
<td>Sports</td>
</tr>
<tr>
<th>Thursday</th>
<td>Physics</td>
<td>Chemistry</td>
<td>Math</td>
<td>Biology</td>
</tr>
<tr>
<th>Friday</th>
<td>Math</td>
<td>English</td>
<td colspan="2">Project Work</td>
</tr>
</table>
</div>
<div class="frame">
<h2>Student Registration Form</h2>
<form>
<label for="name">Full Name:</label>
<input type="text" id="name" name="fullname" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
<label for="course">Course:</label>
<select name="course" id="course">
<option value="btech">B.Tech</option>
<option value="bsc">B.Sc</option>
<option value="bcom">B.Com</option>
</select>
<label for="address">Address:</label>
<textarea name="address" id="address" rows="4"></textarea>
<input type="submit" value="Register">
<input type="reset" value="Clear">
</form>
</div>
<div class="frame">
<h3>Welcome to the Student Portal</h3>
<p style="text-align:center;">
Check your class timetable above, and register using the form in the middle. <br>
Thank you for visiting!
</p>
</div>
</div>
</body>
</html>
OUTPUT:
