How to make HTML tables
Skip to?
Overview
Basic table
Tags that can be added to TR/TD Commands
FAQ
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.
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
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 |
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!