ZuoTi.Pro
Question

Overview The purpose of this assignment is to diagnostically determine your current proficiency level with typical...

Overview The purpose of this assignment is to diagnostically determine your current proficiency level with typical HTML table markup.

Assignment Review the W3 Schools Website (http://www.w3schools.com/html/html_tables.asp) and go over the tutorials on the following HTML tags:

* <table>

* <tr>

* <td>

Once you have seen how these tags work in conjunction with one another, 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

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "tables.html" is created, which contains following code.

tables.html :

<!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>

======================================================

Output : Open web page tables.html in the browser and will get the screen as shown below

Screen 1 :tables.html

HTML Table Markup ← → C ⓘlocalhost:8080/tables.html Multiplication tableMonth Calender NO Multiply By Result MON TUE WED THR

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
Overview The purpose of this assignment is to diagnostically determine your current proficiency level with typical...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Overview The purpose of this assignment is to explore the manner in which CSS styles can...

    Overview The purpose of this assignment is to explore the manner in which CSS styles can be transported into an external file. Assignment You may find the W3 Schools examples on this process useful (http://www.w3schools.com/css/css_howto.asp). Once you have a working understanding of how to move your stylesheet outside of the HTML file and into a CSS file, remove and style information from your Weekly Assignment #02's HTML file and move it to an externally attached CSS file. When you are...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT