HTML AND A LITTLE CSS APPLIED
 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
</head>
<body>
<table border="2" width="90%">
<!-- 10 rows and 8 columns -->
<caption>Overall Performance of the Team</caption>
<thead class="merge">
<!-- 1st ROW -->
<tr bgcolor="#A9A9A9">
<th rowspan="2">Equips</th>
<th colspan="6">Table of Performance</th>
<th rowspan="2"> </th>
</tr>
<!-- 2nd ROW -->
<tr bgcolor="#e3f998">
<th>Monday</th>
<th>Tuesday</th>
<th colspan="2">Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<!-- 3rd ROW -->
<tr>
<!-- Count the number of columns in 3rd row.They are total 7;
Merged 3 col in 2nd col & 2 col in the 3rd col
Thus columns reduced to 4 -->
<td>Team 1</td>
<td colspan="4">Task 1</td>
<td colspan="2">Task 2</td>
<td rowspan="2">Week1</td>
</tr>
<!-- 4th ROW -->
<tr>
<!-- Count the number of columns in 4th row.They are total 7;
Merged 3 col in 2nd col & 2 col in the 3rd col
Thus columns reduced to 4 -->
<td>Team 2</td>
<td colspan="3">Task 1</td>
<td colspan="3">Task 2</td>
</tr>
<!-- 5th ROW -->
<tr>
<td>Team 1</td>
<td>Task 3</td>
<td colspan="4">Task 4</td> </td>
<td>Task 5</td>
<td rowspan="2">Week2</td>
</tr>
<!-- 6th ROW -->
<tr>
<td>Team 2</td>
<td colspan="2">Task 3</td>
<td colspan="4">Task 4</td>
</tr>
<!-- 7th ROW -->
<tr>
<td>Team 1</td>
<td colspan="3">Task 5</td>
<td colspan="3">Task 6</td>
<td rowspan="2">Week3</td>
</tr>
<!-- 8th ROW -->
<tr>
<td>Team 2</td>
<td>Task 5</td>
<td colspan="5">Task 6</td>
</tr>
<!-- 9th ROW -->
<tr>
<td>Team 1</td>
<td colspan="4">Task 7</td>
<td colspan="2">Task 8</td>
<td rowspan="2">Week4</td>
</tr>
<!-- 10th ROW -->
<tr>
<td>Team 2</td>
<td rowspan="2">Task 7</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Comments
Post a Comment