CREATE A TABLE

George and Susan

Welcome to our HTML help page!

Home | HTML-Index | Basic HTML | HTML Structure

CREATE A TABLE

Blue = HTML Code.
Green = HTML Code being discussed.
Red = Your Text or Image.
Purple = Links you can click on.

Learn how to make simple tables, put borders around them and add colored backgrounds.

Content
Starting tags CENTER Table Table BORDER Table WIDTH CENTER Data Add a CAPTION Add color Add background image Change size of table	Create Nested Tables Change the size of a cell ALIGN Data BORDERS in depth Column Groups Column Row Groups COLSPAN and ROWSPAN CELLSPACING & CELLPADDING Span CELLS Wrap text around a table

When creating a table you must use tags to create rows and cells in the table. The <TR> (table row) tag lets you create rows and the <TD> (table data) tag lets you create cells. The data cells usually contain the main information in the table.
Many people use tables to organize the layout of a Web page. For example, adding paragraphs and images to the cells in a table can help you neatly position text and images on your Web page. Use the <IMG> (image) tag to add an image to a cell.
For information on the <IMG> tag Click Here

Type this:
down

down

<TABLE>
<TR><TD>your text or image</TD></TR>
</TABLE>

And you get the following:
down

down

your text or image

As you can see this table is not centered and has no border.
Back to Content

Add ALIGN=CENTER to center your table

How to center your table:
Type this:
down

down

<TABLE ALIGN=CENTER>
<TR><TD>your text or image</TD></TR>
</TABLE>

And you get the following:
down

down

your text or image

Back to Content

How to add a border to your table:
Type this:
down

down

<TABLE BORDER=2 ALIGN=CENTER>
<TR><TD>your text or image</TD></TR>
</TABLE>

And you get the following:
down

down

your text or image

Your table is now centered and has a border and you can change the border size by simply changing the number 2 after BORDER= to a smaller number to make the border smaller or a larger number to make the border larger.

For more information about width, color, inside and outside borders click here

Back to Content

Want to change the size of your table?
Type this:
down

down

<TABLE BORDER=2 WIDTH="40%" ALIGN=CENTER>
<TR><TD>your text or image</TD></TR>
</TABLE>

And you get the following:
down

down

your text or image

You can simply change the size of your table width by changing the 40% that is after the WIDTH= to a larger or smaller % number or by specifying a new width in pixels e.g.,

Type this:
down

down

<TABLE BORDER=2 WIDTH="550" ALIGN=CENTER> <TR><TD>your text or image</TD></TR> </TABLE>

And you get the following:
down

down

your text or image

For more information on changing the size of a table click here
You see that your text or image is aligned to the left of the table to change that see next example.
Back to Content

The ALIGN and VALIGN attributes allow you to change the horizontal and vertical alignment of data in a table. In this example we will use the horizontal attribute ALIGN. For more information about aligning data in a table Click Here.

Align your text.
Type this:
down

down

<TABLE BORDER=2 WIDTH="60%" ALIGN=CENTER>
<TR><TD ALIGN=CENTER>your text or image</TD></TR>
</TABLE>

And you get the following:
down

down

your text or image

Type ALIGN="?"
Replacing ? with the way you want to align the data (left, center or right).

My home page
Back to Top