Homework SourseLab 9axxhtml Simple tables and Thumbnails Table 1 Create a
Lab 9axx.html
Simple tables and Thumbnails
Table 1 – Create a webpage that contains a table with exactly two rows and two columns.
The first row will contain a table heading named Thumbnails that spans across all columns.
Hint: use the colspan attribute inside the opening th tag
Give the table heading an onclick that will change the text of the heading when it is clicked to Happy Halloween! (Hint: innerHTML)
The second row will contain 2 thumbnail images of your choice, one image per column. (See Creating Square Thumbnails section below).
Use the anchor element on both the thumbnail images, so that each thumbnail image opens a larger version of the same image in a new tab.
Table 2 - Create another table with exactly three rows and four columns below the first table.
The first column will contain a heading of your choice.
Change the first column such that the heading spans the first two rows.
Hint: use the rowspan attribute inside the opening th tag
Fill the rest of the table with text as needed.
Set the second table to have a background color of your choice.
Give the first cell in the first column to have an onclick that changes two things at once
change the text of the heading to Boo!!!
make the text in the rest of the table to disappear when it is clicked.
Hint: make text to have the same color as the background color of the table
Apply style to the both the tables on the page. Your table will not be like anyone else’s.
Solution
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<script>
function boo(ele)
{
ele.innerHTML=\"Boo!!!\";
var list = document.getElementById(\"gh\"); // Get the <ul> element with id=\"myList\"
var bo=list.getElementsByTagName(\"td\");
if(ct%2===0)
{
for (i = 0; i < bo.length; i++) {
bo[i].style.color = \"lightblue\";
}
}
}
</script>
</head>
<body>
<table>
<tr>
<td colspan=\"2\" align=\"center\" onclick=\"this.innerHTML= "Happy Halloween"\">Thumbnails </td>
</tr>
<tr>
<td><a href=\"a.jpg\" target=\"_blank\"><img src=\"a.jpg\" style=\"height: 100px;width: 100px\" onclick=\"openImg(this)\"></a></td>
<td><a href=\"b.jpg\" target=\"_blank\"><img src=\"b.jpg\" style=\"height: 100px;width: 100px\" onclick=\"openImg(this)\"></a></td>
</tr>
</table>
<br>
<br>
<table id=\"gh\" style=\"background-color: lightblue\">
<th onclick=\"boo(this)\">Header</th>
<tr>
<td rowspan=\"2\">jaas</td>
<td>jaas</td>
<td>jaas</td>
<td>jaas</td>
</tr>
<tr>
<td>jaas</td>
<td>jaas</td>
<td>jaas</td>
</tr>
<tr>
<td>jaas</td>
<td>jaas</td>
<td>jaas</td>
<td>jaas</td>
</tr>
</table>
</body>
</html>
