HTML - 101 An introductory course for beginners. Lesson # 6.

Melonbones Auction HTML - 101
An introductory course for beginners.
Lesson # 6

How to Create Tables

Creating Tables:

Ever wonder how to make your pictures and blocks of text appear wherever you want on the page? The answer is by using tables. With the addition of a simple command, the table borders can be turned off, thus making them invisible.

Tables are made of rows and columns, just like a piece of graph paper. You may have as many rows or columns as you like, and each may be the same or different sizes. Here are all the required tags to make a single celled table.

<Table> - Start Table
<TR> - Start first Row
<TD> - Start first Data
</TD> - Close Data
</TR> - Close Row
</TABLE> - Close table

Using the above tags, your code would look like this:

<Table>
<TR>
<TD>Put your text or graphic here</TD>
</TR>
</TABLE>

The tricky part is having the same number of data cells in each row. These tags are NOT case-sensitive, but making them all caps makes them easier to find later. I like to put a blank line between each Table Row, although it's not required.
The border= part is optional, but tells whether or not to show the border and how wide it should be.
The width= part is optional, but gives you more control. It's easier to read text that is between 500 and 600 pixels wide.

0 = no border
1 = thin border
2 = wider border
3 = even wider
100 = so wide it's stupid

To create a 500 pixel wide table centered, with 2 columns, 3 rows, and a thin border, you would need the following tags. Each cell would automatically expand as necessary to accommodate your largest pic or block of text:

To put some space between cells so the background shows
through a little, add this to your opening TABLE tag and make
the number as big as you want:

CELLSPACING=10

Your <TABLE> tag now looks like this:

<TABLE width=500 border=1 CELLSPACING=10>

Now for the goodies.

To add color or a graphic to the background of a table, row, or
individual cell, add these to the appropriate tag:

ADD COLOR:
<TABLE bgcolor=FFFF00>
OR
<TR bgcolor=FFFF00>
OR
<TD bgcolor=FFFF00>

For a list of the codes for the 16 web safe colors, click here.
(opens a new browser so you won't lose your place)

ADD A GRAPHIC:
(of course the path has to be yours)
<TABLE background=http://www.melonbones.com/ShellBotm.jpg>
OR
<TR background=http://www.melonbones.com/ShellBotm.jpg>
OR
<TD background=http://www.melonbones.com/ShellBotm.jpg>

To center text or pictures inside a cell, add this to that cell's TD tag:
<TD align=center>
You can also use align=left or align=right or align=top or align=bottom.

To combine 2 cells in one row into one cell, add this to
the first cell on the left of the ones you want to combine.
The number can be anything up to the total number of
data cells in each row

<TD COLSPAN=2>

To combine 3 cells in one column into one cell, add this to
the first cell on the top of the ones you want to combine.
The number can be anything up to the total number of
rows in your table.

<TD ROWSPAN=3>

Here's the URL to see what some of this would look like:
(opens a new browser so you won't lose your place)
http://www.melonbones.com/html101/Test51.html

Here's the code for the tables on the example page:

3 rows by 2 columns:

Using the COLSPAN command:

Using the ROWSPAN command:

More to be added later about tables.

Want to learn some more?
Next page
(coming soon)

Table of Contents

This free course is being provided by Melonbones
Online Auction. Please tell a friend about us.

www.melonbones.com