HTML Tables Learning Objectives To use tables to enhance the appearance and functionality of your website in a variety of ways 1 Product Listing Open your products html page for editing Remember that we recently added information about all of the products that you sell It's time to clean up the appearance of this page using tables Create a new table near the top of the page (Must be under body tag, navigation, etc ) with code similar to the following (Edit the and tags as shown in class if you prefer to control the column widths example ) (consider customizing the first row's tags to specify the width of each column example ) 3 Copy and paste the second row from our sample as many times as necessary to create additional rows for each of your products Preview your new table to make sure it looks correct 4 Using the descriptions and images that you have already written, transfer (using cut and paste) your previously written content into the appropriate data cells (td) Each product should end up in its own row Create a four digit product code Enter the product name Paste the description along with your bullet point benefits Paste the product image 5 Be sure to use the td width, table width and td valign attributes to be sure your table content is evenly balanced 6 Preview your completed table and correct any mistakes in your code Once you have transferred your product content into the table, delete the original content 7 Using Paint or some other photo editing tool and or image sizing tags, edit your product photos so that they are not super huge, look similar to each other in size and are transparent (no white backgrounds ) 2 Table Styles Enhance the appearance of your tables Edit your existing style sheet and add the following styles (NOTE The colors are examples only use your own color schemes and preferences ) (Use the following style background image url('yourimage jpg') to add a background image instead of color to your table or heading ) After saving your style sheet, refresh your webpage to see your table styled like the following but with your own styles colors fonts etc Edit your stylesheet to change the appearance of your tables further Refer to the reading for additional table styles Upload products html to Canvas when you are finished

The Answer is in the image, click to view ...

Question: HTML - Tables Learning Objectives To use tables to enhance the appearance and functionality of your website in a variety of ways 1 - Product

HTML - Tables

Learning Objectives

To use tables to enhance the appearance and functionality of your website in a variety of ways

1 - Product Listing

Open your products.html page for editing. Remember that we recently added information about all of the products that you sell. It's time to clean up the appearance of this page using tables.
Create a new table near the top of the page (Must be under body tag, navigation, etc.) with code similar to the following:

(Edit the and tags as shown in class if you prefer to control the column widths: example:

)

(consider customizing the first row's

tags to specify the width of each column: example:

)

3. Copy-and-paste the second row from our sample as many times as necessary to create additional rows for each of your products. Preview your new table to make sure it looks correct.

4. Using the descriptions and images that you have already written, transfer (using cut-and-paste) your previously written content into the appropriate data cells (td). Each product should end up in its own row.

Create a four-digit product code
Enter the product name
Paste the description along with your bullet point benefits
Paste the product image

5. Be sure to use the td width, table width and td valign attributes to be sure your table content is evenly balanced.

6. Preview your completed table and correct any mistakes in your code. Once you have transferred your product content into the table, delete the original content.

7. Using Paint or some other photo editing tool and/or image sizing tags, edit your product photos so that they are not super huge, look similar to each other in size and are transparent (no white backgrounds!)

2- Table Styles

Enhance the appearance of your tables.

Edit your existing style sheet and add the following styles: (NOTE: The colors are examples only --- use your own color schemes and preferences.) (Use the following style : background-image: url('yourimage.jpg'); to add a background image instead of color to your table or heading.)
After saving your style sheet, refresh your webpage to see your table styled like the following but with your own styles/colors/fonts/etc:
Edit your stylesheet to change the appearance of your tables further. Refer to the reading for additional table styles.
Upload products.html to Canvas when you are finished.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer

Step: 1 Unlock blur-text-image

Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock

Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!

I need help with my assignment for accounting. It is to do with report analysis and hypothesis testing. A good knowledge of Excel is required for this task. Analytical review Golden Big Burgers Part...

Task description: The assessment involves the application of strategic marketing theories, concepts and tools to analyse a case. The aim of this assessment is to evaluate if students are able to...

There are two problems due this week (each worth 35 points) as follows. Case 5-1David L. Miller: Portrait of a White-Collar Criminal (page 144). In comprehensive paragraphs, answerrequirements 1?6....

Hi Sara Hope you are doing well. I need to prepare Ratio Analysis for eBay company and Amazon. I uploaded the most recent 10-K report for the most recent years, 2014 to 2016. Please let me know if...

This text was adapted by The Saylor Foundation under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License without attribution as requested by the work's original creator or licensee....

Hi, Please help me with homework. Thank you !!! Thumbs up for ALL answers. Material: Book Title Social Media Marketing: A Strategic Approach Author Barker, Barker, Bormann, Roberts, Zahay...

What is the working capital, current ratio, and quick ratio of Intuit? Please use the attached annual report. Frequently, management will comment on liquidity in the MD&A (management's discussion and...

CHAPTER 11 Content Marketing: Publishing Articles, White Papers, and E-Books This chapter will discuss several of content marketing, these types of conventional publishing methods, which publications...

previous 7 of 1 What is the change in energy if the electron from Part A now drops to the ground state? Express your answer with the appropriate units. = -20510-18 J Submit Hints My Answers Give Up...

In 2020, Sven is single and has $126,000 of regular taxable income. He itemizes his deductions as follows: real property tax of $2,300, state income tax of $4,300, and mortgage interest expense of...

( 1 ) $ 1 equcatiutwic y lest ePRINTIt Lenovo Support Lenovo McAfee - / 1 cres ent Attempt in Progress In Pronghorn Company, direct labor is $ 2 0 per hour. The company expects to operate at 1 0 , 4...

Compared with half a century ago, adoption has become _ _ _ _ _ _ _ _ _ common, but it is more open and acceptabl e , so we probably discuss it _ _ _ _ _ _ _ . fill in the blanks more or much less or...

What are Measures in OLAP Cubes?

How do OLAP Databases provide for Drilling Down into data?

How are OLAP Cubes different from Production Relational Databases?