Scribd
Upload
18 views

Assignment No 3 Web Eng

The document contains code for styling an HTML table, form, and lists. It includes CSS code to style table borders, change row and cell colors on hover, and center align cells. It also contains HTML code for a form with input fields and radio buttons. Additional CSS code customizes unordered and ordered lists by changing list item markers to customized characters and colors.

Uploaded by

Rana Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Assignment No 3 Web Eng

The document contains code for styling an HTML table, form, and lists. It includes CSS code to style table borders, change row and cell colors on hover, and center align cells. It also contains HTML code for a form with input fields and radio buttons. Additional CSS code customizes unordered and ordered lists by changing list item markers to customized characters and colors.

Uploaded by

Rana Ahmed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Assignment no: 3 Web Engineering

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta charset="UTF-8">

<link rel="stylesheet" href="styles.css">

<title>Styled HTML Table</title>

<style>

/PART:1/

table {

border-collapse: collapse;

width: 100%;

dh, bd {

border: 1px solid #ddd;

padding: 10px;

text-align: center;

dh {

background-color: ;

color: white;

}
tr:hover {

background-color: orange;

bd:hover {

background-color: pink;

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>Name</th>

<th>Roll No</th>

<th>Semester</th>

<th>Department</th>

</tr>

</thead>

<tbody>

<tr>

<td>shahzaib</td>

<td>053</td>

<td>3rd</td>

<td>CS</td>

</tr>

<tr>

<td>ahmed</td>
<td>049</td>

<td>3rd</td>

<td>CS</td>

</tr>

<tr>

<td>Usman</td>

<td>089</td>

<td>3rd</td>

<td>CS</td>

</tr>

<tr>

<td> Ahad</td>

<td>046</td>

<td>3rd</td>

<td>CS</td>

</tr>

</tbody>

</table>

<fieldset>

<legend>Sign up</legend>

<form>

<label>Name</label>

<input type="text" name="name"><br>

<label>Password</label>

<input type="Password" name="Password"><br>

<label>Email</label>

<input type="Email" name="Email"><br>

<label>Gender</label><br>
<label>Male</label>

<input type="radio" name="gender"><br>

<label>Female</label>

<input type="radio" name="gender"><br>

<input id="sub" type="submit" name="submit">

</form>

</fieldset>

<br></br>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Styled List</title>

<style>

ul {

list-style: none;

padding: 0;

li {

margin-bottom: 10px;

font-family: 'Arial', sans-serif;

font-style: italic;

ul.custom-colors li::before {

content: '\2022';

color: green;

margin-right: 8px;

ol.custom-colors li {
counter-increment: custom-counter;

margin-bottom: 10px;

ol.custom-colors li::before {

content: counter(custom-counter);

color: green;

font-weight: bold;

margin-right: 8px;

</style>

</head>

<body>

<h2>Customized List</h2>

<ul class="custom-colors">

<li>Oil</li>

<li>Sugar</li>

<li>Tea</li>

<li>Ice cream</li>

<li>Bottle</li>

<li>Rice</li>

</ul>

<ol class="custom-colors">

<li>Price Of Oil:4000</li>

<li>Price Of Sugar:500</li>

<li>Price Of Tea:780</li>

<li>Price Of Ice cream:1500</li>

<li>Price Of Bottle:1300</li>

<li>Price Of Rice:800</li>

</ol>
</body>

</html>

You might also like