Website Shop 101 - How to Make Product Blocks

Welcome to lesson eight of the Website Shop 101 tutorial series for crafters. This lesson will show you how to create completely customizable product blocks for your category and product shop pages. These will display or showcase your products uniformly on a page.

---

This lesson assumes that you have gone over lessons two through five and have your various shop buttons and their codes ready and on hand. If you haven't completed any of these lessons yet, see the full list of lessons here...

---

What Will Lesson Go Over?

Before we dive in, let's take a look at what this lesson will go over.

1. How one can use tables to create product blocks.
2. How one can use div backgrounds instead of tables to create product blocks.
3. How to create content to go into each block. This will be broken down into making clickable images and text (which you will be familiar with from making shop buttons in earlier lessons), and sorting out how you will display the pricing details and shop buttons.
4. How to add product content into each block.
5. Where to place the style sheets for the tables, divs, text, etc. for Weebly users, and if WordPress or other users should do the same.
   
6. How to place the product block code on your website.

---

Now it's time to learn about this useful tool to help organize your products on your shop pages!

Product blocks in this tutorial will include a linkable image and title with pricing details and a shop button, all wrapped up together in a box or a table cell with a border around it.

Here are some examples of product blocks this lesson will show you how to make...

You'll see that I've demonstrated several borders, block and content options in the above examples.

*To see the live versions of these examples, please see Product Block Examples.

---

Using Tables to Create Product Blocks:

When I was originally searching for a way to make my shop product blocks, I wanted to use an HTML box. Try as I may, I could not get any kind of border to go around the box without it going wacko and creating several, diagonal overlapping borders. I concluded that HTML boxes with borders are not very compatible with Weebly.

That's when I started looking for other ways to take advantage of the pretty border options available in HTML. This led me to HTML tables.

Combining the table code with Weebly's column options allowed me to create a look that I could be proud of using to showcase my patterns.

---

IMPORTANT! Before we dive into tables, it is important to note what will work great for Weebly users may not work as well for Wordpress users. Luckily for both of you, I have discovered several options for both types of sites that will look amazing!

Other users, if you have a drag & drop element model like Weebly, you should be able to do whatever Weebly users can do. You'll just have to play with the different options to see what works best for your website...

---

All tables consist of margins, borders, padding and content areas.

• Margins are the spaces around the outer perimeter of the table. These can be made to any size you like and you can give each side of the cell a different margin size.
• Borders are the customizable lines that go around the edge of the table. These can be made to any width and you have all sorts of line style options to choose from including dashed, dotted, solid and double lines.
• Padding is the space that goes around the content area inside the borders. When, borders are hidden, they act like margins to the individual cells. Like margins, you can adjust these to any size and give each side a different padding size.
• Content areas are the cells where the product details will go. More on this later.

*For more details about how each of these parts relate to one another, see w3school.com's CSS Box Model.
*For more information on margins, see CSS margin on w3schools.com.
*For more information on borders, see CSS border on w3schools.com.
*For a full list of border styles, see CSS border-style Property on w3schools.com.
*For more information on padding, see CSS padding on w3schools.com.

---

The first thing you'll need to do is design the style sheet for your table. Otherwise, your website will use whatever table settings it has in place.

There are many styling options and variations. You can include or exclude as many features as you like, and adjust each.

Let's take a look at ONE style sheet code example for tables:


<style>
table.tablestyle08, .tablestyle08 th, .tablestyle08 td {
border: 25px solid #DDD3E0;
border-collapse: collapse;
border-spacing: 1px;
padding: 0px;
margin: 10px 5px;
empty-cells: hide;
background-color:#DDD3E0;
}
</style>


QUICK NOTE: Everything in BOLD above can change its value. This is true for this entire tutorial.

Let's breakdown the code above:

• table.tablestyle08, .tablestyle08 th, .tablestyle08 td {...} – This section relates to the look and feel of the whole table. Notice how the number 08 is bold here and how the word tablestyle has been added in front of it. This is to keep your custom tables from clashing with any programmed table already on your website. I learned this the hard way when I was first working with tables on my own site. The original version is simply table, th, td and it overrode the borders my site was using and completely freaked me out. A huge thanks to dsonesuk from the w3school.com's forum for helping me to fix this! Back to the number... If you will be using more than one type of table on your site, you'll want to change the 08 to another number and make sure they are all the same number for that specific table. For instance, I have NINE tablestyles that I created for this tutorial. I started with calling the first one 01 and ended with calling the last one 09.
• border: 25px solid #DDD3E0; – Here's where you can adjust the width, type and colour of your table's border. Change 25px to any pixel width you like. In most of the tables I created, the border is either 2, 3 or 5 pixels in width. Play with yours to see what width you like best. Change the type of border by replacing solid with dotted, dashed, or another border style. Adjust the colour by changing #DDD3E0 to any HEX value or RGB value you like. Learn more about CSS Colours here, or check out w3school.com's HTML Colour Picker.
  
• border-collapse: collapse; – This bit of code forces a double border to collapse into a single line. If you prefer a single line, leave this in place. Without this bit of code, the border may have a double line (this really depends on your website – the normal default is the reverse, but on my Weebly site it shows a double line without the collapse). If you want a double line remove this line of code from the style sheet, or change collapse to separate. This will force split the border into double lines which gives you the possibility of adjusting the spacing in between them. Learn more about CSS border-collapse Property here.
  
• border-spacing: 1px; – If you are using collapsed borders, this line of code becomes null and void. However, if you are using separated borders or any double border, this will adjust the spacing between the lines. Simply change 1px to adjust the pixel width. If you would like different spacing widths on each side, follow the pixel rules demonstrated in the padding section below... Learn more about CSS border-spacing Property here.
  
• padding: 0px; – Here's where you can adjust the overall padding of the table. Change 0px to any pixel width to adjust the padding around the whole. If you want each side to have a different padding, change it to 0px 0px 0px 0px (top, right, bottom, left) and adjust the number accordingly. If you want the top and bottom to have a different padding, but the right and left to have the same padding, change it to 0px 0px 0px (top, right & left, bottom) and adjust the number accordingly. If you want the top and bottom to have the same padding, and the right and left to have the same padding, change it to 0px 0px (top & bottom, right & left) and adjust the number accordingly.
• margin: 10px 5px; – Here's where you can adjust the margins of the table. Change 10px 5px to any set of pixel widths you like. Same pixel rules as for the padding above. You can have one 0px for all sides, two to group the top & bottom and the right & left together, three to group the right & left together but keep the top & bottom separate, OR four to keep all sides separate.
• empty-cells: hide; – If your table will have any empty cells, you might like to remove the border around that cell to hide it. If this is not important to you, simply remove this line of code from the style sheet. Learn more about CSS empty-cells Property here.
  
• background-color:#DDD3E0; – This will determine the background colours of the table cells and the space in between the borders, if any. When this line of code is removed from the style sheet, the cells and border-spacing will be transparent and take on the background colour of your page. Adjust the colour by changing #DDD3E0 to any HEX value or RGB value you like. *NOTE: You can give each cell of the table a unique colour by using <div style> (more on this later).

---

Now that you have your table styled, it's time to build your table! This is the body of your code. We'll add content in later...

Let's take a look at a SINGLE cell table:


<!DOCTYPE html>
<html>

<body>

<table class="tablestyle08" style="width:99%">

  <tr>

    <td><div align="center"><div style="background-color:#ffffff;">

Content Goes Here

    </div></div></td>

  </tr>

</table>

</body>

</html>


Let's breakdown the code above:

• <!DOCTYPE html> – This is important to include at the start of any code. This tells the web browser what version of code is being used. Learn more about HTML <!DOCTYPE> declaration here.
• <html>...</html> – This starts and ends the HTML code.
• <body>...</body> – This starts and ends the body of a page. The space between them is where the the code you want displayed on the body of a page to go.
• <table class="tablestyle08" style="width:99%">...</table> – This starts and ends the table. Notice how the table is called class="tablestyle08" – this specifies the table type. Remember to change the 08 to the same number as in your table's style sheet. Next, an additional style has been added here, so you can easily adjust the width of the table. Change 99% to any percentage or pixel width to adjust the full width of the table.
• <tr>...</tr> – This starts and ends ONE row of the table. To add another row, simply ADD another set of these <tr>...</tr> after the first set (after this = </tr>), so that it comes before the table close (this = </table>). Repeat for additonal rows.
• <td>...</td> – This starts and ends ONE cell block of the table. It rests between these <tr>...</tr>. If you want more than one column, simply ADD another set of these <td>...</td> after the first set (after this = </td>), so that it comes before the row close (this = </tr>). Repeat for additonal columns.
• <div align="center">...</div> – This div aligns the content in the cell. Change center to right or left for a different alignment. Learn more about the HTML <div> align Attribute here.
• <div style="background-color:#ffffff;">...</div> – This div adjusts the background colour of the individual cell or rather anything you put in between the tags. Simply change #ffffff to any HEX value or RGB value you like, or delete from the code if you'd prefer to use your website's page colour as the background.
• Content Goes Here – You will replace this text with the individual product listing content.

Let's take a look at a 2 row by 4 column table:


<!DOCTYPE html>
<html>

<body>

<table class="tablestyle08" style="width:99%">

  <tr>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_1–Column_1–Content Goes Here

    </div></div></td>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_1–Column_2–Content Goes Here

    </div></div></td>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_1–Column_3–Content Goes Here

    </div></div></td>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_1–Column_4–Content Goes Here

    </div></div></td>

  </tr>

  <tr>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_2–Column_1–Content Goes Here

    </div></div></td>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_2–Column_2–Content Goes Here

    </div></div></td>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_2–Column_3–Content Goes Here

    </div></div></td>

    <td><div align="center"><div style="background-color:#ffffff;">

Row_2–Column_4–Content Goes Here

    </div></div></td>

  </tr>

</table>

</body>

</html>


TIP: Start with a single cell table. Next, copy the <td>...</td> section for however many columns you'd like. Then, copy the <tr>...</tr> section for each row you need – this way each one has the same number of cell columns.

Weebly Users: You have an additional option of making single cell tables, you can drag around and place wherever you like! More on this later...

Now you can make tables for your website! All you need is content to put into them.

---

---

Using Div Backgrounds to Create Product Blocks:

Before we dive into the content portion of this tutorial, let's go over another option for product blocks, that uses the <div> tag instead of tables.

This can be used in combination with the tables like shown above. However, since Weebly users have the option to drag and drop elements and can create columns that way, they can use a div background style to create a block.

One benefit the <div> tag has over tables is that a style sheet is not needed. The styles can be adjusted right in the body of the code.


Let's take a look at a div background code:


<!DOCTYPE html>
<html>

<body>

<div style="background-color:#ffffff; padding: 0px; margin: 10px 0px;">

<div align="center">

ContentGoesHere

</div>

</div>

</body>
</html>


Let's breakdown the code above:

• <!DOCTYPE html> – This is important to include at the start of any code. This tells the web browser what version of code is being used.
  
• <html>...</html> – This starts and ends the HTML code.
• <body>...</body> – This starts and ends the body of a page. The space between them is where the the code you want displayed on the body of a page to go.
• <div style="background-color:#ffffff; padding: 0px; margin: 10px 0px;">...</div> – This div adjusts the background colour of any content you put in between the tags and let's you set paddings and margins for the block. Simply change #ffffff to any HEX value or RGB value you like. Next, adjust the padding (0px) to add space around the content and adjust the margin (10px 0px) to fix the space around the whole block. Same pixel rules you learned above are applicable here too!
• <div align="center">...</div> – This div aligns the content in the cell. Change center to right or left for a different alignment.
  
• Content Goes Here – You will replace this text with the individual product listing content.

Pretty easy, right?!?!

---

Creating Content for the Product Blocks:

Now it's time to create the content you will be placing into the blocks you've created!

First, let's go over making a clickable image and title text with a link.

In each of the examples above, you will notice a picture of a product and right below it there is a title, which names the product, and a subtitle, which tells you what kind of product it is.

Let's take a look at the code used to make an image with title link:


<a href="ListingURL"><img src="ImageURL" alt="ImageDescriptionforSEO" border="0" width="100%" style="margin: 3px 0px"/><h4 style="margin: 0px">Product Title</h4><h5>Subtitle</h5></a>


Let's breakdown the code above:

• <a href="ListingURL">...</a> – This makes everything in between the start and end tags clickable and will send your users to wherever you choose to send them. Change ListingURL to the URL of the product's listing, or the page you would like to send your users, so they can learn more. IMPORTANT! Make sure you close the link with the </a> at the end. If you don't, everything that comes after it will link to that page.
• <img src="ImageURL" alt="ImageDescriptionforSEO" border="0" width="100%" style="margin: 3px 0px"/> – This portion relates to the image in question. Here it is broken down further:
• ~ src="ImageURL" – Change ImageURL to the image URL of the product you wish to display. You'll remember from lessons 2-5 how you did this to make buttons. It's the same process here.
• ~ alt="ImageDescriptionforSEO" – The alt text is a description you give to your image. It tells search browsers what it is, which improves SEO AND gives your image a description to display in case the image fails to load. Replace ImageDescriptionforSEO with whatever description you'd like to add. I recommend including the product's title, pricing info, business/shop name, a short link to where it can be purchased and a few tags. Example: "Chess Crochet Pattern PDF $15.00 by Rebeckah's Treasures! Grab your copy today here: http://goo.gl/vEcLO3 #crochet #chess #pattern". You can create short links with Google's Short URL here.
• ~ border="0" – This removes a border from appearing around the image.
• ~ width="100%" – This adjusts the width of the image. Change 100% to any percentage or pixel width as you like.
• ~ style="margin: 3px 0px" – This adjusts the space around the image. Change 3px 0px to adjust the margins. Same pixel rules as you learned above apply here too!
• <h4 style="margin: 0px">Product Title</h4> – This portion of the code relates to the product title text and its sizing. On my website, an h4 heading with a margin of 0px is the right fit for me. You can change the heading type (h4) to adjust the size of the Title text. The smaller the number, the bigger the heading (h1 is the largest heading size). The style="margin: 0px" allows you to adjust the margins around the text. Simply adjust the pixel width like you do for all other margins. Change Product Title to the title of your own product. TIP: Keep your titles short or give them a max character count to avoid the title taking up more than one line. This will help keep uniformity especially when using tables!
• <h5>Subtitle</h5> – This portion of the code relates the the product's subtitle. In my shop, my subtitle for all my products is "Crochet Pattern" since that is what I offer. If you don't want or need a subtitle, you can completely remove this from the code. Like for the title, you can adjust the heading size (h5) up or down accordingly. You may even prefer to turn it into a paragraph size (p) instead! Change Subtitle to whatever subtitle you like.

Now, if you will be using the div background as your block or if you are a WordPress user, you will need to add another portion of code to achieve the best look.


Let's take a look at ANOTHER example code to make an image with title link:


<p style="margin: 0px 0px;"><a href="ListingURL"><img src="ImageURL" alt="ImageDescriptionforSEO" border="0" width="100%" style="margin: 3px 0px"/></p><h5 style="margin: 0px">Product Title</h5><p class="small" style="margin: 0px">Subtitle</p></a>


Notice how we added a paragraph styling <p style="margin: 0px 0px;"> before the code and closed it (</p>) after the image portion of the code. This tells the browser that the image is a paragraph and keeps it in line. The margin pixels can be adjusted to your liking.

Take note that we also changed the title heading to a h5 and the subtitle heading to a paragraph (p) instead, making both sets of text smaller than the first example.

On the note about the p in the above code, you'll see that I've added class="small" into the short hand styling for the paragraph. This is to make the line of text shorter than usual. To achieve this, an extra bit of code will need to be added to the style sheet.


Here's what the code looks like:


p.small {
    line-height: 60%;
}


The line-height: 60% means that the line will only be 60% of it's normal height. Change 60% to adjust the line height. NOTE: I have noticed that this doesn't work in every instance. You will have to play around with it. Learn more about CSS line-height Property here.


On the topic of style sheets, there is another line of code you'll want to add to the style sheet to keep the title and subtitles from displaying an underline.


Here's what the code looks like:


a {
    text-decoration: none;
}


The text-decoration: none; forces the underline that normally appears under links to disappear. You can learn more about CSS text-decoration Property here.

---

Now that the image and titles are sorted, it's time to take a look at the different layouts for the pricing details and shop buttons!

In the above examples, you'll see that I have four basic layouts for the pricing (if any) and the buttons. They are the following:

• Button FIRST, Text SECOND – I like to use this with my "coming soon" patterns for both my shop and free crochet patterns pages. I usually put "coming soon..." or a release date as the text and use the view post button to direct users to an article about the design if there is one.
• Button ONLY – This is great for download items or if you wish to omit the price. I like to use this option in my "free on the blog" section of my shop, where I use a "view post" button.
• Text & Button Side by Side – This is great for reducing the height of the block, whilst still including both the price and shop button! I like using this on my individual listings in the "You may also like" section of my page, where I showcase more patterns. See an example here...
• Text FIRST, Button SECOND – This is my favourite option for my category shop pages! In this option the pricing details are front and center with the button below it.

Here are the SHORT form codes of each version above:

Example #1 - Button FIRST, Text SECOND:

<p style="margin: 0px 0px">YourButtonCodeGoesHere</p>

<p>TEXT</p>


Example #2 - Button ONLY:

<p style="margin: 0px 0px">YourButtonCodeGoesHere</p>


Example #3 - Text & Button Side by Side:

<p style="margin: 0px 0px"><em>$1.99 USD     </em>YourButtonCodeGoesHere</p>


The next two examples both have the Text first and the Button second. The difference is that example #5 removes the paragraph styling (<p style="margin: 0px 0px">...</p>).

I noticed on my Weebly site, that removing it reduced the height of the button line.

Example #4 is the recommend option otherwise...


Example #4 - Text FIRST, Button SECOND (recommended version):

<p class="small" style="margin:0px 0px"><em>$1.99 USD</em></p>

<p style="margin: 0px 0px">YourButtonCodeGoesHere</p>


Example #5 - Text FIRST, Button SECOND (best for reducing button line height on Weebly):

<p class="small" style="margin:0px 0px"><em>$1.99 USD</em></p>

YourButtonCodeGoesHere


You'll notice in ALL of the examples above, each line for the text and button is styled into a paragraph <p style="margin: 0px 0px">...</p>. This gives each its own line or in Example #3 helps to group both together. You can adjust the margins if you like.

In examples #4-5, you'll notice the pricing line has been given that special small line height (class="small"). This works great on the listings I have formatted like this. Though, it didn't seem to make a difference to the version I tested on WordPress. It can be removed if you so choose.

In examples #3-5, is the pricing is given an emphasized italic tag (<em></em>). You can remove this if you would prefer to keep the pricing text straight, or you can change em to b to make the price bold instead. Learn more about HTML Text Formatting Elements here.

Change $1.99 USD to adjust the price, and change TEXT to adjust the text.

Finally, in ALL of the examples above, you'll replace YourButtonCodeGoesHere with the special button code you created in lessons 3-5 accordingly.

NOTE: For PayPal buttons, you'll simply copy the code from your saved buttons.


For other types of buttons, here's a quick recap of a simple image button code:


<a href="URL"><img src="ButtonURL" border="0" width="120" style="margin: 0px"/></a>


Button Code Breakdown:

• <a href="URL">...</a> – Creates the link and tells the browser what to do. Change URL to the Listing URL, to the Download URL, to the Ravelry "buy now" or "add to cart" URL or to whatever link action you want the user to take.
• src="ButtonURL" – Change ButtonURL to the image URL source for the button in question.
• border="0" – Leave as is. It keeps a border from going around the button image.
• width="120" – Change 120 to adjust the width of the button. NOTE: For examples #1-2 & 4-5, my favourite size is 120 pixels. For example #3, the button is sized at 96 pixels instead.
• style="margin: 0px" – Delete or adjust the margins as you like.

For a recap on making shop buttons see:

• Lesson 3 – Ravelry Buttons
• Lesson 4 – PayPal Buttons
• Lesson 5 – Download Buttons

---

---

Adding Content to Your Product Blocks:

I hope you're still with me! We're nearing the end of this tutorial.

The next thing to do is add the content you just created into the space in the table or div where it says "Content Goes Here".

Paste the image/title link code first. Then, add the pricing/button codes in the line(s) after it. Repeat this for all of the lines where content should go.


Let's see the content in place for a single cell table:


<!DOCTYPE html>
<html>

<body>

<table class="tablestyle08" style="width:99%">

  <tr>

    <td><div align="center"><div style="background-color:#ffffff;">

<p style="margin: 0px 0px;"><a href="ListingURL"><img src="ImageURL" alt="ImageDescriptionforSEO" border="0" width="100%" style="margin: 3px 0px"/></p><h5 style="margin: 0px">Product Title</h5><p class="small" style="margin: 0px">Subtitle</p></a>

<p style="margin: 0px 0px"><a href="URL"><img src="ButtonURL" border="0" width="120" style="margin: 0px"/></a></p>

<p>TEXT</p>

    </div></div></td>

  </tr>

</table>

</body>

</html>


Now, let's see the content in place for a div background block:


<!DOCTYPE html>
<html>

<body>

<div style="background-color:#ffffff; padding: 0px; margin: 10px 0px;">

<div align="center">

<a href="ListingURL"><img src="ImageURL" alt="ImageDescriptionforSEO" border="0" width="100%" style="margin: 3px 0px"/><h4 style="margin: 0px">Product Title</h4><h5>Subtitle</h5></a>

<p class="small" style="margin:0px 0px"><em>$1.99 USD</em></p>

<a href="URL"><img src="ButtonURL" border="0" width="120" style="margin: 0px"/></a>

</div>

</div>

</body>
</html>


It's that simple, and now your blocks are now ready to place on your site!

---

Where to Place the Style Sheets on Your Website:

Before we start adding your product blocks to your website, you need to grab all the style sheet codes you created and place them all together.


Here's a quick look at all of the styles put together from the examples above:


<style>
table.tablestyle08, .tablestyle08 th, .tablestyle08 td {
border: 25px solid #DDD3E0;
border-collapse: collapse;
border-spacing: 1px;
padding: 0px;
margin: 10px 5px;
empty-cells: hide;
background-color:#DDD3E0;
}
p.small {
    line-height: 60%;
}
a {
    text-decoration: none;
}
</style>


Notice how all of the items are wrapped up in between the style tags (<style></style>).

For best results and faster page load times, you'll only want to have this code once per page in between the head tags (<head></head>), OR even better directly into the HTML header code of your website.

---

Weebly Users - Here's how to add the above style sheet into your HTML header code:

Step ONE: Go into your Weebly Editor.
Step TWO: Click on the Settings tab in the top navigation menu.
Step THREE: Click on the SEO tab in the left navigation menu and look for the Header Code box section of the SEO. It should look like this...

Step FOUR: Paste your style sheet code into the Header Code box.
Step FIVE: Click on the SAVE button and Publish your website again.

NOTE: When you do it this way, you will not be able to see a preview of the table borders in the editor, but rest assured that you will see it on your published site.

---

WordPress Users - I am not very familiar with how to add CSS styles to the header in WordPress, but here is an article that looks informative. At any rate, you can easily add this bit of code directly onto each page once and that should do the trick for now. See below...


Other Users - you will have to find out where to place CSS styles on your website.

---

How to Place the Product Block Code on Your Website:

The time has finally come to add your product blocks onto your website!

Weebly Users - How you add your blocks or tables onto you site depends on the type of block or tables you created.

1) If you created a table with rows and columns, simply drag and drop the embed code element onto your page wherever you'd like to display the table. Then, paste your table code and details into the element. You should be able to see a preview of the block contents even if you can't see the table borders. NOTE: The text may appear larger in the editor than when it is published and viewed on your site.

2) If you created single cell tables or have chosen to use the div backgrounds as your individual blocks, you'll need to drag and drop the embed code element onto your page wherever you'd like to display the block. Drag another right next to it – this will give you two columns. Repeat for however many columns you like.

Now that you have one row of embed code elements on your page, you can easily create another by repeating the same process, or you can copy the whole set you just made to save time!

But before you do this, you may like at paste the basic code for the single cell table or div background without the content code. This way, all you have to do is edit each one with the product you want to display in each one!

Here's how to copy or make a duplicate of a whole row of the embed elements:

Step ONE: Hover over the space between any of the elements until a vertical blue line appears.
Step TWO: Click on that line to select the column group.
Step THREE: Now that it is selected, you should see an arrow in the top-left corner. Click on it – this will open the move/copy menu.
Step FOUR: Click on the copy tab of the menu and select "this page" to copy it to the same page and see a duplicate of the whole row appear on the page.
STEP FIVE: Repeat steps 1-4 for additional rows.

Once you have your embed table created, all you have to do is add the body code for the single cell table or div background with the content, or edit each to add the content to them.

If you want to rearrange the blocks, simply select the block. Then, drag and drop into the space between or on either end of elements. Remember to look for that vertical blue line again!

Another method to rearrange the blocks, is simply to copy and paste new codes into each element.

Either way will work great!

---

WordPress Users - Here's how to add your tables to your pages...

Go to the page in question. Making sure you are in the "text" view of the page, click on the "code" button from the page menu – this will tell your website that you are adding code instead of text.

1) If you were able to add the style sheet to the header of your website, then you only need to paste the body content of your table onto the page. Then, close the code section of your page by clicking on the "/code" button from the page menu.

2) If you were not able to add the style sheet to the header  of your website, then you need to include it on each page where a table is added. Remember to close the code section of your page by clicking on the "/code" button from the page menu.

If the second option is the case for you, here's what the layout of full code should look like for a single cell table:


<!DOCTYPE html>
<html>
<head>
<style>
table.tablestyle08, .tablestyle08 th, .tablestyle08 td {
border: 25px solid #DDD3E0;
border-collapse: collapse;
border-spacing: 1px;
padding: 0px;
margin: 10px 5px;
empty-cells: hide;
background-color:#DDD3E0;
}
p.small {
    line-height: 60%;
}
a {
    text-decoration: none;
}
</style>
</head>

<body>

<table class="tablestyle08" style="width:99%">

  <tr>

    <td><div align="center"><div style="background-color:#ffffff;">

<p style="margin: 0px 0px;"><a href="ListingURL"><img src="ImageURL" alt="ImageDescriptionforSEO" border="0" width="100%" style="margin: 3px 0px"/></p><h5 style="margin: 0px">Product Title</h5><p class="small" style="margin: 0px">Subtitle</p></a>

<p class="small" style="margin:0px 0px"><em>$1.99 USD</em></p>

<p style="margin: 0px 0px"><a href="URL"><img src="ButtonURL" border="0" width="120" style="margin: 0px"/></a></p>

    </div></div></td>

  </tr>

</table>

</body>

</html>


Notice how the style sheet has been enclosed between the header code (<head>...</head>) at the top below the start of the HTML doc (<html>) and before the body section (<body>) of the code.

---

Other Users - Add your code in whatever method your website type allows you add it.

---

If you have made it to the end of this lesson, congratulations! You are well on your way to making your website shop look amazing. Yay!!!

Here's a list of resources used for this tutorial:

• w3school.com's CSS Box Model
• w3school.com's CSS margin
• w3school.com's CSS border
• w3school.com's CSS border-style Property
• w3school.com's CSS border-collapse Property
• w3school.com's CSS border-spacing Property
• w3school.com's CSS padding
• w3school.com's CSS Colors
• w3school.com's HTML Color Picker
• w3school.com's CSS empty-cells Property
• w3school.com's HTML <!DOCTYPE> declaration
• w3school.com's CSS line-height Property
• w3school.com's CSS text-decoration Property
• w3school.com's HTML Text Formatting Elements
• w3school.com's HTML <div> align Attribute
• Google's Short URL
• wpmudev's Adding Scripts and Styles to WordPress the Right Way with Enqueueing

---

Plus, grab FREE downloads for the style sheets and codes for all of the examples pictured here!

---

Thanks for visiting today! Tell me what you thought about the eighth lesson of the series by commenting below or giving this a rating...

Additionally, please let me know if you have any questions or concerns. I will be happy to help in any way I can. Comment below, or visit my Website Shop 101 facebook support group...

Be sure to check out the intro to this series for upcoming lessons or lessons you may have missed!

Wishing you a terrific day. See you again soon for lesson 9, where we'll learn how to make "about product" tabs for your store...