How to make HTML tables

Skip to?
  Overview
  Basic table
  Tags that can be added to TR/TD Commands
  FAQ

Overview of making tables for your web page

Tables and frames are some of the most commonly use features in a good web page. This page is made up of 3 tables and a lot of cells, I got rid of the ugly boarders.

Example of a basic table:

The Coding:


<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=1 WIDTH=150 BGCOLOR=”#ffffff” align=”center”>
<TR>
<TD>
Blah blah blah
</TD>
</TR>
</TABLE>


What is Looks like:

Blah blah blah

Explanation of the tags:

BORDER=1 It can change the thickness of the line that surrounds a table. You can put a 0 if you don’t want your table to have a border.
Example:

The Code:



<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0 WIDTH=150 BGCOLOR=”#ffffff” align=”center”>

<TR>
<TD>
Blah blah blah
</TD>
<TD>
Blahhh
</TD>
</TR>
</TABLE>

The Result:

Blah blah blah Blahhhh

CELLSPACING=0 It puts spaces in between the cells of a table.
Example:

The Code:


<TABLE BORDER=1 CELLSPACING=5 CELLPADDING=0 WIDTH=150 BGCOLOR=”#ffffff” align=”center”>

<TR>
<TD>
Blah blah blah
</TD>
<TD>
Blahhh
</TD>
</TR>
</TABLE>

The Result:

Blah blah blah Blahhh

CELLPADDING=1 It puts spaces in between the edge of the cell to the text.
Example:

The Code:


<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=7 WIDTH=150 BGCOLOR=”#ffffff” align=”center”>

<TR>
<TD>
Blah blah blah
</TD>
<TD>
Blahhh
</TD>
</TR>
</TABLE>

The Result:

Blah blah blah Blahhh

WIDTH=150 It controls how much of the screen it takes up. You can also put a percentage of the screen as the width, so that is stretches in larger or smaller screen resolutions.
Example :

The Code:


<TABLE BORDER=1 CELLSPACING=5 CELLPADDING=0 WIDTH=550 BGCOLOR=”#ffffff” align=”center”>

<TR>
<TD>
Blah blah blah
</TD>
<TD>
Blahhh
</TD>
</TR>
</TABLE>

The Result:

Blah blah blah Blahhh

BGCOLOR=”#ffffff” It controls the background color of the table with a hex color.
Example:

The Code:


<TABLE BORDER=1 CELLSPACING=5 CELLPADDING=0 WIDTH=150 BGCOLOR=”#006600″ align=”center”>

<TR>
<TD>
Blah blah blah
</TD>
<TD>
Blahhh
</TD>
</TR>
</TABLE>

The Result:

Blah blah blah Blahhh

align=”center” Aligns the table to a certain side of the space available.

<TR> TR Starts a new row of cells. </TR> Ends the row of cells.
<TD> TD Starts a new cell. </TD> Ends the cell

Tags that you can add to the TR/TD HTML Commands

There are many things that you add to your TR or TD commands to make the table exactly how you want it.

Extra TR tags

VALIGN=?TOP? It tells the browser to move all of the stuff in the tables to the TOP of the cell.

Extra TD Commands

Width=?A number? It resizes the table to the number of pixels specified in the quotes.

ALIGN=?CENTER, or RIGHT? It centers or pushes the stuff in the table to the right. The text is automatically along the left if you don?t add it.
Example:

The Middle To the Right To the Left

COLSPAN=?The number of cells you want it to span? I’m not really sure how to explain it with words so I’ll show you.
Example:

COLSPAN=”3″ 3 for 3 cells
1st cell 2nd Cell 3rd Cell

ROWSPAN=?The Number of rows you want the cell to span?
Example:

ROWSPAN=”4″ 4 for 4 TR’s
1st cell
2nd Cell
3rd Cell

Frequently Asked Questions about Tables

Can I use all of the TD/TR tags at the same time?
Yes, of course you can!

Are there ither tags I can put in the TR/TD commands?
Yes there are but most of them aren’t vaild HTML.

Can I put a table in a table?
Yes you can. Just code a full table inside the table and it should work. Remember to end both of the tables!

Go to…
  HTML Tutorials
  Frame Tutorial
  Hex Color Codes