In: Computer Science
q: Given the following HTML for a table, put all these questions into one application (use css)
a) Modify the html to create another column called
Assessment, and then modify the html to
extend the data in the rows ( you may use arbitrary numbers for the
data items in the td elements)
b) Make all table text elements blue using either css
or html modification
c) Make the background color of the columns alternate
between pink and yellow,
<!DOCTYPE html>
<html>
<head>
<title>TABLE with STYLE SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="How to form a table and apply
styling." />
<link href="table1.css" type="text/css" rel="stylesheet"
/>
</head>
<body>
<table border = "1">
<col class ="product" />
<colgroup class = "facts">
<col/> <col/> <col class = "fat" />
</colgroup>
<tr>
<th> Product </th>
<th> Size (oz) </th>
<th> Caffeine (mg) </th>
<th> Fat (g) </th>
</tr>
<tr> <td> Green Tea </td>
<td>8</td><td>20 </td> <td>0
</td></tr>
<tr> <td> Dark Chocolate </td>
<td>2</td><td>20 </td> <td>19
</td></tr>
</table>
</body>
</html>
Answer a:
Add this line in first <tr> to add new column Assesment
<th> Assessment </th>
TO add new data add below before the </table>
<tr>
<td> Lemon Tea </td> <td>8</td><td>10 </td> <td>9 </td><td>Yes </td>\
</tr>
<tr>
<td> Black Tea </td> <td>6</td><td>15 </td> <td>8 </td><td>Yes </td>
</tr>
Output:
Answer b:
Replace <table> tag with below code to make all table text elements blue
<table border = "1" style="color: blue ;">
Output:
Answer c:
<colgroup> tag is used for formation of one or more column
Add below code inside <table> tag to make the background color of the columns alternate between pink and yellow,
<colgroup>
<col style="background-color:pink">
<col style="background-color:yellow">
<col style="background-color:pink">
<col style="background-color:yellow">
<col style="background-color:pink">
</colgroup>
Output:
Complete code:
<!DOCTYPE html>
<html>
<head>
<title>TABLE with STYLE SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="How to form a table and apply styling." />
<link href="table1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!-- Change Font color -->
<table border = "1" style="color: blue ;">
<!-- make the background color of the columns alternate between pink and yellow, -->
<colgroup>
<col style="background-color:pink">
<col style="background-color:yellow">
<col style="background-color:pink">
<col style="background-color:yellow">
<col style="background-color:pink">
</colgroup>
<tr>
<th> Product </th>
<th> Size (oz) </th>
<th> Caffeine (mg) </th>
<th> Fat (g) </th>
<!-- create another column called Assessment -->
<th> Assessment </th>
</tr>
<tr>
<td> Green Tea </td> <td>8</td><td>20 </td> <td>0 </td><td>Yes </td>
</tr>
<tr>
<td> Dark Chocolate </td> <td>2</td><td>20 </td> <td>19 </td><td>No </td></tr>
<!-- Add data items -->
<tr>
<td> Lemon Tea </td> <td>8</td><td>10 </td> <td>9 </td><td>Yes </td>
</tr>
<tr>
<td> Black Tea </td> <td>6</td><td>15 </td> <td>8 </td><td>Yes </td>
</tr>
</table>
</body>
</html>
At any point if you find any difficulty feel free ask me.