We will be practicing tables by having this code open in Notepad and the page open in Firefox. You will be reading the code and instructions both in Notepad and in Firefox as we go along so you will need both open.

Keep scrolling down and reading as there are several practice examples we'll be working with for the next couple of classes.

This is a boring table with no borders or colors.

Content (text, pictures, etc.) Content goes here
Content Content
Content More content

Now let's add some more stuff. A width (in pixels) cellpadding (space- using pixels- around content in table cells ), cellspacing (space around each table cell), a border, and alignment (right, left, or center).

Notice the border is around both the table and the individual cells. You don't have to have it that way and can control that using CSS, which we'll do in another example.

Content (text, pictures, etc.) Content goes here
Content Content
Content More content

Now it's your turn to practice. Follow the instructions and make changes to the table below:

Everywhere it says "content" delete content and type a letter of the alphabet.

Delete the entire third row.

Content (text, pictures, etc.) Content goes here
Content Content
Content More content

Now let's practice adding an image to our table. Adding the following image everywhere it says "put image here." Copy and paste the following code for the image.

Now put the image code in the table where it says "put image here."

Put image here image
image image

Here's what it should look like. Ignore the code as it's only an image of what it should like look, not the actual table code (so you couldn't just copy and paste).

What if I want my picture centered in the table?

Just add align="center" either after td or in your table style sheet (which we will get to in another example.)

Here is one way to do it:

Substitute in left or right if you want your content aligned to either side instead of the center.

What if I don't want any borders?

Just say border="0" or leave out border= entirely and it won't show up.