Wiz's eBay Template Design Course

<table> <tr> <td>
</td> </tr> </table>

Tables and Layout…

Near the end of the last lesson I introduced a new item in passing. In an example paragraph tag with an inline style attribute:

<p style=”margin-top: 0px; text-align: right; font-family: verdana; font-size: 50pt; font-weight: bold; color: red”>

I included the new parameter:

margin-top: 0px

which sets the top margin of the paragraph block to zero pixels, or no space.

All elements (tags) have several aspects that affect their look and spacing. These include:

margin – the outside spacing around the element
border – the outline of the element
padding – the inside spacing around the content
background – the color or graphic that fills the space within the element

There are others as well but these are the first ones we are going to learn and work with. Look at the diagram below to get an idea of where each of these is located and the affect they can have on the element.

Let’s see how these parameters can be used to change the look of our original text example from an earlier lesson. Remember this:

<p>This is the first paragraph. I’ll inlcude a few short sentences to give it some bulk. This could be the first paragraph in your listing description or terms section. You would write something appropriate for your description but for our purposes we just need any old content.</p>

<p>This is the second paragraph and could contain more content for our listing description or terms section. Once again I’ll just include a few short sentences to provide bulk to the paragraph. It really doesn’t matter what I say as long as I provide some text.</p>

Let’s put a red solid line border around our text, space the box a little bit away from the dashed line, say, 20 pixels, and space our text 30 pixels away from the solid line border. Let’s also make the background area soft grey. The coding would look something like this:

This does exactly what I told it to do, but it really wasn’t what I was intending to do. Notice that we have correct paragraph tags for each of the paragraphs and we have all that long list of features in each paragraph tag. The result is what we asked for, but for each individual paragraph, because the inline style attribute is in each paragraph tag. What I wanted to do was to enclose all the text, both paragraphs, in one red bordered box spaced as indicated. This is where that not so correct markup usage of the single paragraph element for all the text, separated into blocks using the two break tags, that we learned in the last lesson comes in:

Now we get all the text enclosed in one red bordered box with 20 pixels of space (margin) on the outside, 30 pixels of space (padding) on the inside, and a soft grey background. Here’s what it actually looks like on the web page if I don’t display the coding in red:

Wow! That was a lot of stuff in one inline style attribute. Well, sure, but we’re doing a lot of stuff with our example. And, if you read the line (remember how to read HTML) and look at each feature that is there you will see that there is nothing really confusing. It’s all just a string of items that tell us the various things we want to do. And, if you think about it a little, you may be able to get an idea of how I create my example boxes with a dashed border, soft yellow background color and spacing to keep the text away from the content.

A couple of important points I should make here before we move on to what this lesson is really all about:

1. The features listed in the inline style attribute are not required to be in any order. You can mix them up in any way you want. I tend to put them in order in the following way just so I can remember them:
   1. working from the outside in (margin, border, background, padding)
   2. working clockwise from the top (top, right, bottom, left)
2. There are short cuts for several of these features that will make things easier and we will learn them as we progress but I wanted you to see the long way, using individual parameters for each feature, so you might better understand what is going on.

Okay, so that’s really cool, but what has all this got to do with tables and layout, what this lesson is supposed to be all about? Well, this concept of margins, borders, padding and background are useful in several tags but I thought it would be better to introduce it using the paragraph tag and text content with which you were already familiar from an earlier lesson. So now, let’s move on to tables and layout.

Originally HTML tables were designed to display tabular information (rows and columns of numbers with headings) just like a conventional spreadsheet:

Since the World Wide Web was originally envisioned as a place to store, deliver, display and share information much like pages of a book, HTML tables would be very useful for organizing masses of financial or scientific information. The original web was about basic publishing of information. The idea of layout and design, like an advertisement or magazine page, wasn’t really considered at first.

Today, however, it is a different thing. We want fancy looking listing on eBay or Main Street Mall Online to show off our items. We want profile or about me pages to be works of art. For a lot of the things we want to do today with page layout there just weren’t tags in the original versions of HTML to do them. In fact, one of the major things the concept of Cascading Style Sheets (CSS) dealt with was the concept of page layout. After all, before CSS, HTML was just a markup language, not a layout language. CSS is all about separating content from design (or mark-up from layout).

There are some good ways to handle layout with positioning but you need a pretty good level of skill in order to handle them withing the various selling sites you might create templates for. Using style parameters like absolute and relative positioning you can control the detailed positioning of elements in your templates but this can be very complex and you can easily get into trouble with it. There is an easier way to begin with — and even to stick with — that goes back to earlier practices.

In order to deal with the needs of artistic page layout and the limitations of existing HTML code, inventive page designers discovered that amazing things could be done with tables. Although never designed for this sort of thing, tables were hijacked from their mundane role of organizing numeric or statistical data and put to work handling text and graphic content layout. CSS has mostly replaced this role in web pages but such layout is not easily done with just inline style attributes in templates so tables are still used extensively for design layout in listing templates and other page segments that are inserted into existing site pages.

Using tables for page layout is really not the best markup process but it is correct coding and is in such widespread usage that it must be considered as a valid design/layout mechanism. I’ll be using it as the primary way of creating templates in this course.

There are several HTML tags that relate to table coding. We will use three of them in this lesson:

1. <table> </table> table tags enclose the entire table.
2. <tr> </tr> table row tags enclose each row. A table can have one or more rows.
3. <td> </td> table data tags enclose each data cell. A table row can have one or more cells.

You will often see the TBODY tag in template examples. Mostly these are templates coded with drag and drop What You See Is What You Get (WYSIWYG) HTML design programs. The TBODY tag element is optional and we will not use it in this course.

Let’s look at an example of a simple table, with three columns and three rows, like this:

As tables go, sometimes, this is a very simple one consisting of three rows of three cells each making three columns. I’ve included the cell row and column position as text content in each of the cells. Notice the dashed black outline of the whole table, the spacing between the individual cells, the red border outlining each of the cells and the yellow background in each cell. All of these things are determined by the parameters included in our style attributes in the various tags that make up the table.

Unlike our text examples, and due to the complexity of table coding, I can’t show the code along with the table layout. I will have to show it separate, below. You will need to refer back to the table above as you work your way through the code:

I’ve included some blank line spacing between the lines of code to help you better see the opening and closing table tags, and the coding for each of the three rows. Remember that blank lines like this in your coding do not hurt and can really help make the coding more readable. In an actual template I would probably code this table with only two blank lines, like this:

since I am pretty good at separating the lines out visually, without excessive spacing, but you should use as many blank lines as you need to make your coding clear and understandable. Notice the individual table rows, each with three table data cells:

These do not have to be bunched up on a single row either. They can be separated into their component parts and spaced from each other with blank lines like this:

If I was separating the parts of the table row out inidvidually I would probably code this section something like this, without as many blank lines:

Remember we talked early in the course about comment lines. We could use comment lines in this table example to remind us what the code is all about. When you first start coding using a lot of comment lines is helpful, especially when you go back later to look at your work and forget what it was all about. Let’s see how comment lines would fit into our table example. I’ve made the comment lines green so they are easy to spot.

Use comment lines and blank line spacing as much as you want, or as little as you need, to help you clearly see and understand your template coding. When you break out individual lines of code, and use comments to remind you what they are or do, it becomes easier to work with your coding and easier to remember what it does later. You will forget and need that reminder, especially when you go back to make a small change to your template weeks, or even months, after you originally created it.

Good coding, both functionally, and visually, is always a good idea!

What Have We Learned…

In this sixth lesson we have learned:

• The inline style attribute can add features that control spacing, borders and backgrounds.
• The table tag encloses and defines the entire table.
• The tr (table row) tag encloses and defines a single row of cells.
• The td (table data) tag encloses and defines an individual data cell.
• We can use the inline style attribute to add features to control our tables and their content.
• Effective use of blank lines can make our code more readable and easier to understand.
• Inserting comment tags will help us keep track of what everything means or does.

Tables weren’t created for the purpose but they have turned out to be a great way to design your template layout. We’ll see how this all goes together a little later in the course.

Your next lesson will be available whenever you are.

[ top of page ]

MSMO – Vintage Clothing – Patterns – Collectibles – Jewelry – Crafts – Books – Art