In: Computer Science
The following HTML tags will be used to complete assignment below:
· <table>
· <tr>
· <td>
Explore CSS and the various ways attributes can be manipulated to change the width and style of table borders in addition to the physical dimensions of the space that resides within each cell.
Demonstrate mastery of the concepts of "absolute" vs. "relative" sizes when specifying table dimensions and create a traditional 12x12 multiplication table and a different HTML table on the same markup page that represents the calendar days for a given month.
The month and year at this point are not important. What you should concentrate on in this assignment is the use and functionality of the described tags along with making the presentation of the multiplication table and calendar month as aesthetically pleasing as possible. Take note of the patterns that emerge and have a redundant nature to them and write a small HTML comment at the bottom of your submission briefly describing any repeatable patterns that appear within your markup. If you do not see any repeatable patterns, consider ways to create the same presentation of the tables with markup with clear repeatable patterns.
PLEASE GIVE IT A THUMBS UP, I SERIOUSLY NEED ONE, IF YOU NEED ANY MODIFICATION THEN LET ME KNOW, I WILL DO IT FOR YOU
<!DOCTYPE html>
<html lang="en">
<head>
<!--title for web page -->
<title>HTML Table Markup</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--embedded style sheet -->
<style>
.monthcalender {
float: left;
padding: 20px;
}
.calender {
float: left;
padding: 20px;
}
.calender table,
th,
tr,
td {
border: 1px solid red;
border-collapse: collapse;
}
.calender th {
background-color: orange;
padding: 10px;
color: green;
font-size: 20px;
font-weight: bold;
}
.calender td {
background-color: yellow;
padding: 10px;
font-size: 20px;
font-weight: bold;
color: blue;
}
</style>
</head>
<body>
<div class="monthcalender">
<!--multiplication table -->
<h1>Multiplication table</h1>
<table border="1">
<tr>
<th>NO</th>
<th>Multiply By</th>
<th>Result</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>16</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>125</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>36</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>49</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>64</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>81</td>
</tr>
<tr>
<td>10</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>121</td>
</tr>
<tr>
<td>12</td>
<td>12</td>
<td>144</td>
</tr>
</table>
</div>
<div class="calender">
<!-- Month calender -->
<h1>Month Calender</h1>
<table>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THR</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>