Assignments On Class 9
Advanced Table Techniques
Assignment 1: Creating a Complex Table Layout
1.
Objective: Create a table with merged cells using both colspan and rowspan
attributes.
2.
Instructions:
o
Design a table for a fictional
schedule.
o
Include a header that spans multiple
columns.
o
Create rows where some cells span
multiple rows or columns.
o
Ensure the table includes at least
three columns and three rows.
3.
Example Layout:
<table border="1">
<tr>
<th
colspan="3">Weekly Schedule</th>
</tr>
<tr>
<td
rowspan="2">Monday</td>
<td
colspan="2">Morning</td>
</tr>
<tr>
<td>Session
1</td>
<td>Session
2</td>
</tr>
<tr>
<td>Tuesday</td>
<td
colspan="2">Workshop</td>
</tr>
</table>
Assignment 2: Styling Tables with CSS
1.
Objective: Apply advanced styling to a table to improve its visual
presentation.
2.
Instructions:
o
Create a table with at least five rows
and three columns.
o
Style the table to include borders,
padding, background colors, and hover effects.
o
Use CSS to alternate row colors and
highlight the entire row on hover.
3.
Example CSS:
<style>
table {
width:
100%;
border-collapse:
collapse;
}
th, td {
border:
1px solid #ddd;
padding:
8px;
text-align:
center;
}
th {
background-color:
#4CAF50;
color:
white;
}
tr:nth-child(even)
{
background-color:
#f2f2f2;
}
tr:hover
{
background-color:
#ddd;
}
</style>
o
Table HTML:
<table>
<tr>
<th>Header
1</th>
<th>Header
2</th>
<th>Header
3</th>
</tr>
<tr>
<td>Data
1</td>
<td>Data
2</td>
<td>Data
3</td>
</tr>
<tr>
<td>Data
4</td>
<td>Data
5</td>
<td>Data
6</td>
</tr>
<tr>
<td>Data
7</td>
<td>Data
8</td>
<td>Data
9</td>
</tr>
<tr>
<td>Data
10</td>
<td>Data
11</td>
<td>Data
12</td>
</tr>
</table>
Assignment 3: Responsive Table Design
1.
Objective: Make a table responsive to different screen sizes.
2.
Instructions:
o
Create a table with at least four rows
and four columns.
o
Use CSS to make sure the table looks
good on smaller screens.
o
Apply overflow-x: auto; to allow
horizontal scrolling on small screens.
o
Adjust the table layout so it adapts to
various screen widths.
3.
Example CSS:
<style>
table {
width:
100%;
border-collapse:
collapse;
}
th, td {
border:
1px solid #ddd;
padding:
8px;
}
@media
(max-width: 600px) {
table
{
display:
block;
overflow-x:
auto;
white-space:
nowrap;
}
th,
td {
display:
block;
width:
100%;
box-sizing:
border-box;
}
th
{
text-align:
left;
}
}
</style>
o
Table HTML:
<table>
<tr>
<th>Header
1</th>
<th>Header
2</th>
<th>Header
3</th>
<th>Header
4</th>
</tr>
<tr>
<td>Data
1</td>
<td>Data
2</td>
<td>Data
3</td>
<td>Data
4</td>
</tr>
<tr>
<td>Data
5</td>
<td>Data
6</td>
<td>Data
7</td>
<td>Data
8</td>
</tr>
<tr>
<td>Data
9</td>
<td>Data
10</td>
<td>Data
11</td>
<td>Data
12</td>
</tr>
<tr>
<td>Data
13</td>
<td>Data
14</td>
<td>Data
15</td>
<td>Data
16</td>
</tr>
</table>
Assignment 4: Table with Grouped Data
1.
Objective: Create a table with grouped rows and columns.
2.
Instructions:
o
Design a table that groups data into
different sections using the <thead>, <tbody>, and <tfoot>
elements.
o
Include a summary row in the footer.
o
Apply CSS to distinguish between
different sections.
3.
Example HTML and CSS:
<style>
table {
width:
100%;
border-collapse:
collapse;
}
th, td {
border:
1px solid #ddd;
padding:
8px;
text-align:
center;
}
thead {
background-color:
#f2f2f2;
}
tfoot {
background-color:
#f9f9f9;
}
tfoot td
{
font-weight:
bold;
}
</style>
<table>
<thead>
<tr>
<th>Group</th>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Group
1</td>
<td>Item
1</td>
<td>$10</td>
</tr>
<tr>
<td>Group
1</td>
<td>Item
2</td>
<td>$20</td>
</tr>
<tr>
<td>Group
2</td>
<td>Item
3</td>
<td>$30</td>
</tr>
<tr>
<td>Group
2</td>
<td>Item
4</td>
<td>$40</td>
</tr>
</tbody>
<tfoot>
<tr>
<td
colspan="2">Total</td>
<td>$100</td>
</tr>
</tfoot>
</table>
Assignment 5: Data Table with Sorting Features
1.
Objective: Create a table with headers that can be used to sort data.
2.
Instructions:
o
Create a table with at least five
columns and three rows of data.
o
Include clickable table headers that
sort the data when clicked. For simplicity, you can implement sorting using
JavaScript.
o
Ensure that sorting works in ascending
and descending order.
3.
Example HTML and JavaScript:
<style>
table {
width:
100%;
border-collapse:
collapse;
}
th, td {
border:
1px solid #ddd;
padding:
8px;
text-align:
left;
}
th {
cursor:
pointer;
background-color:
#f2f2f2;
}
tr:nth-child(even)
{
background-color:
#f9f9f9;
}
</style>
<table
id="dataTable">
<thead>
<tr>
<th
onclick="sortTable(0)">Name</th>
<th
onclick="sortTable(1)">Age</th>
<th
onclick="sortTable(2)">Country</th>
<th
onclick="sortTable(3)">Occupation</th>
<th
onclick="sortTable(4)">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John
Doe</td>
<td>30</td>
<td>USA</td>
<td>Developer</td>
<td>$5000</td>
</tr>
<tr>
<td>Jane
Smith</td>
<td>25</td>
<td>UK</td>
<td>Designer</td>
<td>$4500</td>
</tr>
<tr>
<td>Mark
Johnson</td>
<td>35</td>
<td>Canada</td>
<td>Manager</td>
<td>$6000</td>
</tr>
</tbody>
</table>
<script>
function
sortTable(n) {
var
table, rows, switching, i, x, y, shouldSwitch, dir, switchCount = 0;
table
= document.getElementById("dataTable");
switching
= true;
dir
= "asc";
while
(switching) {
switching
= false;
rows
= table.rows;
for
(i = 1; i < (rows.length - 1); i++) {
shouldSwitch
= false;
x
= rows[i].getElementsByTagName("TD")[n];
y
= rows[i + 1].getElementsByTagName("TD")[n];
if
(dir == "asc") {
if
(x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch
= true;
break;
}
}
else if (dir == "desc") {
if
(x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch
= true;
break;
}
}
}
if
(shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i
+ 1], rows[i]);
switching
= true;
switchCount++;
}
else {
if
(switchCount == 0 && dir == "asc") {
dir
= "desc";
switching
= true;
}
}
}
}
</script>
Assignment 6: Table with Nested Tables
1.
Objective: Create a table that includes another table within its cells.
2.
Instructions:
o
Design a table where one or more cells
contain another table.
o
The inner table should have its own set
of headers and data.
o
Ensure proper styling and layout of
both the outer and inner tables.
3.
Example HTML:
<style>
table {
width:
100%;
border-collapse:
collapse;
border:
1px solid #ddd;
padding:
8px;
text-align:
center;
}
.inner-table
{
width:
100%;
border:
1px solid #ccc;
}
.inner-table
th, .inner-table td {
border:
1px solid #ccc;
}
</style>
<table>
<tr>
<th>Group</th>
<th>Details</th>
</tr>
<tr>
<td>Group
A</td>
<td>
<table
class="inner-table">
<tr>
<th>Sub-item</th>
<th>Value</th>
</tr>
<tr>
<td>Sub-item
1</td>
<td>100</td>
</tr>
<tr>
<td>Sub-item
2</td>
<td>200</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Group
B</td>
<td>Details
for Group B</td>
</tr>
</table>
Assignment 7: Styling Tables with Borders and Backgrounds
1.
Objective: Apply advanced CSS techniques to style tables with borders and
background colors.
2.
Instructions:
o
Create a table with a header row,
multiple data rows, and a footer.
o
Apply CSS to add borders to individual
cells, a different background color for header and footer, and custom styling
for even and odd rows.
o
Include styles for border radius and
box shadows to enhance the table’s appearance.
3. Example CSS:
<style>
table {
width:
100%;
border-collapse:
separate;
border-spacing:
0;
}
th, td {
border:
2px solid #4CAF50;
padding:
10px;
text-align:
left;
}
th {
background-color:
#4CAF50;
color:
white;
}
tr:nth-child(even)
{
background-color:
#f9f9f9;
}
tr:nth-child(odd)
{
background-color:
#ffffff;
}
tbody
tr:hover {
background-color:
#f1f1f1;
}
tfoot {
background-color:
#f2f2f2;
font-weight:
bold;
}
th, td {
border-radius:
5px;
box-shadow:
1px 1px 5px rgba(0, 0, 0, 0.1);
}
</style>
<table>
<thead>
<tr>
<th>Header
1</th>
<th>Header
2</th>
<th>Header
3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data
1</td>
<td>Data
2</td>
<td>Data
3</td>
</tr>
<tr>
<td>Data
4</td>
<td>Data
5</td>
<td>Data
6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>---</td>
<td>---</td>
</tr>
</tfoot>
</table>
Assignment 8: Dynamic Table with JavaScript
1.
Objective: Create a table dynamically using JavaScript.
2.
Instructions:
o
Use JavaScript to generate a table and
populate it with data.
o
Include functionality to add new rows
to the table dynamically.
o
Implement a button to add a new row
with user-provided data.
3.
Example HTML and JavaScript:
<style>
table {
width:
100%;
border-collapse:
collapse;
}
th, td {
border:
1px solid #ddd;
padding:
8px;
text-align:
left;
}
th {
background-color:
#4CAF50;
color:
white;
}
</style>
<table
id="dynamicTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<!--
Rows will be added dynamically here -->
</tbody>
</table>
<button onclick="addRow()">Add Row</button>
<script>
function
addRow() {
var
table =
document.getElementById("dynamicTable").getElementsByTagName('tbody')[0];
var
newRow = table.insertRow();
var
nameCell = newRow.insertCell(0);
var
ageCell = newRow.insertCell(1);
var
countryCell = newRow.insertCell(2);
nameCell.innerHTML
= prompt("Enter name:");
ageCell.innerHTML
= prompt("Enter age:");
countryCell.innerHTML
= prompt("Enter country:");
}
</script>