Controlling Page Layout

Learn the Secrets of
eBay's Elite PowerSellers
With My Free eBook

eBay HTML Tutorial


Sponsors

AliExpress by Alibaba.com   How to Sell on eBay - Inside Out


Controlling Page Layout

Now for one of the most important HTML tags you will ever learn to use: The table tag.

HTML tables are so important because they are what will allow you to format the layout of your eBay item description page the way you want. In other words, tables give you greater control over the placement of images, text, and anything else you choose to place in your item description.

Basically what a table allows you to do is create a grid, either visible or invisible, on a webpage. Each section of the grid is where you place data (text, images, etc.) and are generally referred to as table cells.

Here is what the code for a basic, single cell table with a border of three pixels would look like:

<table border="3">
 <tr>
  <td> Stuff goes here </td>
 </tr>
</table>

The <table> tag specifies the creation of a table. The <tr> tag specifies the start of a new table row. <td> specifies the creation of a table cell where new table data (thus the "td") will be placed.

Here is what the output of the above code sample would look like:

Stuff goes here

A single row, single-celled table usually isn't of much use. Here's a sample of code that specifies a two row, three-column table:

<table border="3">
 <tr>
  <td> row 1 col 1 </td>
  <td> row 1 col 2 </td>
  <td> row 1 col 3 </td>
 </tr>
 <tr>
  <td> row 2 col 1 </td>
  <td> row 2 col 2 </td>
  <td> row 2 col 3 </td>
 </tr>
</table>

And here's the output:

row 1 col 1 row 1 col 2 row 1 col 3
row 2 col 1 row 2 col 2 row 2 col 3

If it seems a little confusing, try taking a look at the following graphical representation of how I try to imagine a table in my head when I'm writing the code for it:

There is one more attribute of tables that you should know about, and that is the "colspan" and "rowspan" attributes. These are placed within the table-data tag like so:

<td rowspan="2" colspan="3">

"rowspan" specifies the number of rows a particular cell occupies, and "colspan" specifies the number of columns a cell will occupy. Here's a visual example:

If you're still uncertain about the way tables work, the best way to learn is by doing. Experiment a little by writing your own code and viewing the output in a browser. Specify a table border of "1" or more so you can see the changes that are created as you play with the code. Anytime you want a table's border to be invisible, simply specify a table border of "0".

Next: Advanced HTML Techniques

Subchapters:

Simple Text Formatting
Controlling Page Layout
Advanced HTML Techniques
Chapter 9 Summary & Takeaways

Jump to another chapter:

Chapter 1: Driving Traffic to Your Auction Listing
Chapter 2: Listing for Higher Profits
Chapter 3: Does Any of this Stuff Work?
Chapter 4: eBay Stores
Chapter 5: Auction Management
Chapter 6: What to Sell on eBay
Chapter 7: Finding Products to Sell on eBay
Chapter 8: Mining eBay's Traffic
Chapter 9: HTML Tutorial
Chapter 10: Acting Like a PowerSeller
Chapter 11: Final Words