Question

In: Computer Science

The following HTML tags will be used to complete assignment below: · <table> · <tr> ·...

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.

Solutions

Expert Solution

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>

Related Solutions

HTML mark-up text know the following  HTML tags: · <html> · <body> · <head> · <p> ·...
HTML mark-up text know the following  HTML tags: · <html> · <body> · <head> · <p> · <h1>, <h2>, <h3>, etc… · <a> · <img> · <br> · <hr> · <pre> · <i> · <b> · <em> · <sub> · <ins> · <strong> · <mark> · <cite> · <address> · <abbr> After you have reviewed these HTML tags and developed a sense of how they manipulate the presentation of the mark-up, write a sample page of HTML that briefly goes over...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps you took to add css file and _Layout. Should include the following: Folder structure Short description of what layout does You should not include the content of css or how you defined your css
Topic: HTML Styling Elements - CSS3 Write some HTML code that includes three Semantic HTML tags....
Topic: HTML Styling Elements - CSS3 Write some HTML code that includes three Semantic HTML tags. Describe the semantic meaning of each one you choose.
Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration"...
Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial value 0 A <button> tag labeled "Start" Script: When the user presses the button (1b), a function will begin that does the following: Reads the value from the input field (1a) Removes the <input> and <button> tags (1a & 1b) Creates a new <p> tag, initialized to show the input value Starts a timer that ticks down to zero. For every...
Develop a one-page website using HTML tags and element to implement the following. THIS IS HEADING...
Develop a one-page website using HTML tags and element to implement the following. THIS IS HEADING 1 THIS IS HEADING 2 THIS IS HEADING 3 THIS IS HEADING 4 THIS IS HEADING 5 THIS IS HEADING 6 THIS IS A PARAGRAPH. THIS IS A PARAGRAPH. THIS IS A PARAGRAPH THIS IS ANOTHER PARAGRAPH. THIS IS ANOTHER PARAGRAPH. THIS IS ANOTHER PARAGRAPH THIS IS A LINE BREAK THIS IS A LINE BREAK THIS IS A LINE BREAK THIS IS AN ORDERED...
While HTML is a markup language with a fixed set of tags that allows users to...
While HTML is a markup language with a fixed set of tags that allows users to specify the appearance of a document, XML (extensible markup language) allows the user to create new tags to provide a document structure appropriate to the task at hand. A document has three aspects: structure, appearance, and content. In the case of XML, theseaspectsareseparated,withdifferent meansemployedfordefiningthestructure, the appearance, and the content. Usually, the document type definition (DTD) file describes the structure of a document; the appearance...
Complete the following table then draw the complete circular flow diagram in the space below for...
Complete the following table then draw the complete circular flow diagram in the space below for each row:  (consult your notes for the abbreviations. Each row is independent of the others) Y C I G T S Import Export NX NCO Row 1 1000 800 400 400 850 700 Row 2 1500 750 250 500 400 -200 2.Critical Thinking:  Let’s make it as realistic as possible to the US.  In 2018, the US had both a government and trade deficit.  With that in mind,...
1. Create a PHP page with standard HTML tags. Remember to save the file with the...
1. Create a PHP page with standard HTML tags. Remember to save the file with the .php extension. Inside the <body> tag, create a PHP section that will show the text "Hello World!" 2. For this exercise, echo the phrase "Twinkle, Twinkle little star." Create two variables, one for the word "Twinkle" and one for the word "star". Echo the statement tothe browser. 3. PHP includes all the standard arithmetic operators. For this PHP exercise, you will use them along...
Assignment: Data Quality Directions: Complete the table below by defining each data characteristic and providing an...
Assignment: Data Quality Directions: Complete the table below by defining each data characteristic and providing an example of each quality characteristic as it relates to coding. Data Characteristic Definition Coding Example Accuracy Accessibility Comprehensiveness Consistency Currency Definition Granularity Precision Relevancy Timeliness
FOR HTML Web scripting Complete the following: Create and test an HTML document that has six...
FOR HTML Web scripting Complete the following: Create and test an HTML document that has six short paragraphs of text that describe various aspects of the state in which you live. You must define three different paragraph styles, p1, p2, and p3. The p1 style must use left and right margins of 20 pixels, a background color of pink, and a foreground color of blue. The p2 style must use left and right margins of 30 pixels, a background color...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT