In HTML, table elements are used to create and structure tables for displaying data in rows
and columns.
✅ Common HTML Table Elements:
Element Description
<table> Defines the table
<tr> Defines a table row
<th> Defines a table header cell (bold and centered)
<td> Defines a table data cell
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<caption> Adds a title/caption to the table
<colgroup> Specifies a group of one or more columns
<col> Specifies column properties within <colgroup>
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<h2>Student Marks Table</h2>
<table border="1">
<caption>Semester 1 Results</caption>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>Gobika</td>
<td>95</td>
</tr>
<tr>
<td>102</td>
<td>Rahul</td>
<td>89</td>
</tr>
<tr>
<td>103</td>
<td>Sneha</td>
<td>92</td>
</tr>
</table>
</body>
</html>
1. Ordered List (<ol>)
🔹 Definition:
An ordered list is used to display items in a specific sequence, usually with numbers or
letters.
🔹 Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
🔹 Example:
<h3>Steps to Bake a Cake</h3>
<ol>
<li>Preheat the oven</li>
<li>Mix ingredients</li>
<li>Pour into pan</li>
<li>Bake for 30 minutes</li>
</ol>
🔹 Output:
1. Preheat the oven
2. Mix ingredients
3. Pour into pan
4. Bake for 30 minutes
🔘 2. Unordered List (<ul>)
🔹 Definition:
An unordered list is used to show items in no particular order, usually with bullets.
🔹 Syntax:
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
🔹 Example:
<h3>Shopping List</h3>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
</ul>
🔹 Output:
• Milk
• Bread
• Eggs
3. Description List in HTML
🔹 Purpose:
To present a list of terms and their descriptions — like a dictionary or glossary.
Tag Meanings:
Tag Meaning
<dl> Defines the description list container
<dt> Defines a term or name
<dd> Defines the description of the term
✅ Example Code:
<h3>Web Development Terms</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language — used to structure web pages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets — used to style HTML content.</dd>
<dt>JavaScript</dt>
<dd>A programming language used to add interactivity to web pages.</dd>
</dl>
Output:
HTML
: HyperText Markup Language — used to structure web pages.
CSS
: Cascading Style Sheets — used to style HTML content.
JavaScript
: A programming language used to add interactivity to web pages.
Javascript gratest of 3
<!DOCTYPE html>
<html>
<head>
<title>Greatest of Three Numbers</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 50px;
}
input, button {
margin: 10px;
padding: 8px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Find the Greatest of Three Numbers</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<input type="number" id="num3" placeholder="Enter third number"><br>
<button onclick="findGreatest()">Find Greatest</button>
<h3 id="result"></h3>
<script>
function findGreatest() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let num3 = parseFloat(document.getElementById("num3").value);
let result;
if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
result = "Please enter all three valid numbers.";
} else {
if (num1 >= num2 && num1 >= num3) {
result = "The greatest number is: " + num1;
} else if (num2 >= num1 && num2 >= num3) {
result = "The greatest number is: " + num2;
} else {
result = "The greatest number is: " + num3;
}
}
document.getElementById("result").textContent = result;
}
</script>
</body>
</html>
=== Code Execution Successful ===
Calculator using javascript
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial;
text-align: center;
padding-top: 50px;
}
input, select, button {
margin: 10px;
padding: 8px;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Simple Calculator</h2>
<input type="number" id="num1" placeholder="Enter first number">
<input type="number" id="num2" placeholder="Enter second number">
<select id="operation">
<option value="+">Addition (+)</option>
<option value="-">Subtraction (-)</option>
<option value="*">Multiplication (*)</option>
<option value="/">Division (/)</option>
</select><br>
<button onclick="calculate()">Calculate</button>
<h3 id="result"></h3>
<script>
function calculate() {
let num1 = parseFloat(document.getElementById("num1").value);
let num2 = parseFloat(document.getElementById("num2").value);
let operation = document.getElementById("operation").value;
let result;
if (isNaN(num1) || isNaN(num2)) {
result = "Please enter valid numbers.";
} else {
switch (operation) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num2 !== 0 ? num1 / num2 : "Cannot divide by zero";
break;
default:
result = "Invalid operation.";
}
}
document.getElementById("result").textContent = "Result: " + result;
}
</script>
</body>
</html>
Form validation using javascript
<!DOCTYPE html>
<html>
<head>
<title>Extended Form Validation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding-top: 40px;
}
input, textarea {
margin: 10px;
padding: 8px;
width: 250px;
font-size: 16px;
}
button {
padding: 8px 16px;
font-size: 16px;
}
.error {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<h2>User Registration Form</h2>
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Enter your name"><br>
<span class="error" id="nameError"></span><br>
<input type="email" id="email" placeholder="Enter your email"><br>
<span class="error" id="emailError"></span><br>
<input type="password" id="password" placeholder="Enter password"><br>
<span class="error" id="passwordError"></span><br>
<input type="text" id="phone" placeholder="Enter phone number"><br>
<span class="error" id="phoneError"></span><br>
<textarea id="address" placeholder="Enter your address" rows="3"></textarea><br>
<span class="error" id="addressError"></span><br>
<button type="submit">Register</button>
</form>
<script>
function validateForm() {
let isValid = true;
// Get values
let name = document.getElementById("name").value.trim();
let email = document.getElementById("email").value.trim();
let password = document.getElementById("password").value;
let phone = document.getElementById("phone").value.trim();
let address = document.getElementById("address").value.trim();
// Clear old errors
document.getElementById("nameError").textContent = "";
document.getElementById("emailError").textContent = "";
document.getElementById("passwordError").textContent = "";
document.getElementById("phoneError").textContent = "";
document.getElementById("addressError").textContent = "";
// Name validation
if (name === "") {
document.getElementById("nameError").textContent = "Name is required.";
isValid = false;
}
// Email validation (basic)
if (email === "") {
document.getElementById("emailError").textContent = "Email is required.";
isValid = false;
} else if (!email.includes("@") || !email.includes(".")) {
document.getElementById("emailError").textContent = "Enter a valid email.";
isValid = false;
}
// Password validation
if (password.length < 6) {
document.getElementById("passwordError").textContent = "Password must be at least 6
characters.";
isValid = false;
}
// Phone number validation (simple: must be 10 digits)
if (!/^\d{10}$/.test(phone)) {
document.getElementById("phoneError").textContent = "Enter a valid 10-digit phone
number.";
isValid = false;
}
// Address validation
if (address === "") {
document.getElementById("addressError").textContent = "Address is required.";
isValid = false;
}
return isValid;
}
</script>
</body>
</html>
