ZuoTi.Pro
Question

Using Html 5:


- You are to create a table consisting of 11 rows and 11 columns. The table cells are to be 40 pixels wide, each row. The table is to also have a header row that spans across all columns and contains 'Multiplication Math' as the table name.

- Alternating rows will have a different background color.

- The table is to be centered in the HTML page. The top table row is to have the numbers 1-10 in each of the column cells (one number per cell). The leftmost column shall also have the numbers 1-10 (one number per cell) in each cell. The middle cells will be filled with the multiplication value for the values at the point of intersection. Basically you are building a nice looking multiplication table.

- Once you get a table constructed I want you to add the following CSS3 rule as a table row rule in your styles section and observe the effect.

tr:nth-child(even) {background-color: #f2f2f2;}

Change the 'even' to odd to modify the effect or add both options as

tr:nth-child(even) {background-color: #f2f2f2;} <--- Use whatever color you want

tr:nth-child(odd) {background-color: #ff00ff;} <--- Use whatever color you want


here is a sample:
I want you to use a different color
localhost:5500 1 2 3 9 10 2 4 6 20 3 6 9 30 4 12 40 8 10 5 15 Mutiplication Math 4 5 6 7 8 8 10 12 14 16 12 15 18 21 24 16 20

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

Homework Answers

Answer #1

HTML file :

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- title for web page -->

    <title>Multiplication Math</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- style is used for internal stylesheet -->

    <style>

        /* style rule for table */

        table{

            margin-left: 40%;

        }

        /* style rule for table,th , td,tr */

        table,

        tr,

        th,

        td {

            color: white;

            border: 1px solid black;

            border-collapse: collapse;

        }

        /* style rule for th */

        th{

            text-align: center;

        }

        /* style rule for td */

        td {

            width: 40px0;

        }

        /* style rule for even row */

        tr:nth-child(even) {

            background-color: green;

        }

        /* style rule for odd row */

        tr:nth-child(odd) {

            background-color: maroon;

        }

    </style>

</head>

<body>

    <!-- div to display  table-->

    <div id="math"></div>

    <!-- script is used for javascript -->

    <script>

        //creating html string

        htmlString = "<table><tr><th colspan=10>Multiplication Math</th></tr>";

        //using for loop

        for (var i = 1; i < 11; i++) {

            htmlString + "<tr>";//creating row

            //using for loop

            //this loop is used for number of columns

            for (var j = 1; j < 11; j++) {

                //multiply i * j

                htmlString += "<td>" + (i * j) + "</td>";

            }

            htmlString += "</tr>";//closing row

        }

        htmlString += "</table>";//close table

        //display table on the web page

        document.getElementById("math").innerHTML = htmlString;

    </script>

</body>

</html>

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

Output :

localhost/math.html N Multiplication Math 1 2 3 4 5 6 7 8 9 10 2 4 6 8 10 12 14 16 18 20 3 6 9 12 15 18 21 24 27 30 4 8 12 16

0 1
Add a comment
Know the answer?
Add Answer to:
Using Html 5: - You are to create a table consisting of 11 rows and 11...
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

  • Using Python, Can someone please assist in the following: These are the hints: Summary This week's lab is to create a simple multiplication table using nested loops and if statements. Prompt the...

    Using Python, Can someone please assist in the following: These are the hints: Summary This week's lab is to create a simple multiplication table using nested loops and if statements. Prompt the user for the size of the multiplication table (from 2x2 to 10x10). Use a validation loop to display a warning if the number is less than 2 or greater than 10 and prompt the user to enter the data again until they enter a valid number Put a...

  • Need some help I am not understanding this programming class at all. We are using Microsoft...

    Need some help I am not understanding this programming class at all. We are using Microsoft visual studio with python in console mode to complete these labs. Double-click to hide white space CIS115 Week 4 Lab Overview Title of Lab: Multiplication Table in Python Summary This week's lab is to create a simple multiplication table using nested loops and if statements. Prompt the user for the size of the multiplication table (from 2x2 to 10x10). Use a validation loop to...

  • (Written in C++) Your assignment is to generate an HTML multiplication table with dimensions specified by...

    (Written in C++) Your assignment is to generate an HTML multiplication table with dimensions specified by the user. You will ask the user for the number of rows then number of columns, and generate an HTML table of the appropriate size. The top left cell should contain the result of 1 x 1, and the bottom right cell should contain the result of num_rows x num_cols. Each row and column may be an integer value between 1 and 12 inclusive...

  • Using HTML and JavaScript. For this assignment you should submit a single zip file that contains...

    Using HTML and JavaScript. For this assignment you should submit a single zip file that contains the following two files: index.html script.js index.html should be a skeleton HTML page. So it should have the following tags: doctype html head meta title body script If you were to open index.html without including the associated JavaScript it should be entirely blank. You should then use JavaScript to create all of the content of this page and append it to the body of...

  • Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in...

    Create a CSS-styled Table Page For this Assignment you will first read the appropriate chapters in the textbook and then a create web page, for example called table.html, in your ubunix.buffalo.eduaccount just as you did in Home Page Assignment. Assignment Requirements Your new web page should utilize the following HTML tags and include the following: A <body> tag that uses an appropriate style value to change the background color of the web page. Appropriate <table>, <tr>, <th>, and <td> tags...

  • The answer need to write in C programming. QUESTION 2 Write a program using array to...

    The answer need to write in C programming. QUESTION 2 Write a program using array to generate a multiplication table based on the user's input. For example if user enter 5 as input then a multiply table for 1 to 5 is printed as output as shown in Figure Q2. There are three main steps in this program which are: Print rows (a) (b) Print columns Print multiplication of data inside table (c) Select C:\example1 \bin\Debuglexample 1.exe enter the value...

  • HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids...

    HTML/CSS/ Bootstrap grids to create image I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this: To look more like this.... It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring. HTML <!doctype html> <html lang="en"> <head> <!-- Required meta tags...

  • This program is C++ You have just been offered your first big software contract. The scope...

    This program is C++ You have just been offered your first big software contract. The scope of work is to create a tool for grade school students to learn their times tables. In this program, you will create a 10 x 10 grid of times tables as a cheat sheet for the students to learn. This will display the values of the times tables all the way from 1x1 to 10x10. Make use of formatting tools like inserting tabs, setwidth(),...

  • Hello, I was wondering if someone could help me with this PHP and HTML problem. Basically,...

    Hello, I was wondering if someone could help me with this PHP and HTML problem. Basically, there is code for a multiplication table and i need to change it to support the following. Make the page background (not table background) to change among three colors of your choice. Use the drop-down list to specify the size of the multiplication table to be 8, 10, 12, and 14 Put the multipliers in the first column and the multiplicand on the first...

  • in Java programming Using IF statement, write a program that prints multiplication table for 1-10. Sample...

    in Java programming Using IF statement, write a program that prints multiplication table for 1-10. Sample Program Output. 1     2     3     4     5     6     7     8     9     10       1     1     2     3     4     5     6     7     8     9     10       2     2     4     6     8     10    12    14    16    18    20       3     3     6     9     12    15    18    21    24    27    30       4     4     8     12    16    20    24    28    32    36    40       5     5     10   ...

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