HTML Tables: Formatting a Table


To create a table with no border at all, simply type <TABLE>.

Table with no border
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE>
<CAPTION>Table with no border</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Next Example










You can also give your table a 3-D beveled look by adjusting the size of the outside border. To adjust the size of the outside table border, use the BORDER attribute. This example has the border set to 8 pixels wide, using <TABLE BORDER=8>.

Table with BORDER=8
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER=8>
<CAPTION>Table with BORDER=8</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Next Example










To change the size of the internal borders, add the CELLSPACING attribute to your <TABLE> tag. This example has the cellspacing set to 5, using <TABLE BORDER CELLSPACING=5>.

Table with CELLSPACING=5
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight




NORMAL Table
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER CELLSPACING=5>
<CAPTION>Table with CELLSPACING=5</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Next Example










You can also pad the individual cells of your table to add space on all sides. This keeps the borders from running up against the cell contents. To add 5 pixels of space on each side of every cell, type <TABLE CELLPADDING=5>.

Table with CELLPADDING=5
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight




NORMAL Table
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER CELLPADDING=5>
<CAPTION>Table with CELLPADDING=5</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Next Example










You can format text in each individual cell using all the standard markup codes, such as <B>, <I>, <STRONG>, <FONT>, etc. You can also include line breaks inside each cell, using the <BR>. The font can also be changed, using the <FONT>. Each cell can be formatted differently from the others. WARNING:The format change will only be in effect for that cell!!!

Table with Cells Formatted Differently
Bold Cell Strong Cell Italics Cell Blinking Cell Big Cell
Small Cell Line Break
Cell 		Strike Cell Font Red Cell Font Size +2 Cell
HTML Source
<TABLE BORDER>
<CAPTION>Table with Cells Formatted Differently</CAPTION>
<TR><TD><B>Bold Cell</TD>
<TD><STRONG>Strong Cell</TD>
<TD><I>Italics Cell</TD>
<TD><BLINK>Blinking Cell</TD>
<TD><BIG>Big Cell</TD></TR>
<TR><TD><SMALL>Small Cell</TD>
<TD>Line Break<BR>Cell</TD><TD>
<STRIKE>Strike Cell</TD>
<TD><FONT COLOR=RED>Font Red Cell</TD>
<TD><FONT SIZE="+2">Font Size +2 Cell</TD></TR>
</TABLE>


Next Example










You can also control the alignment of text within each cell by using the ALIGN (horizontally alignment) attribute and/or the VALIGN (vertical alignment) attribute. You can set the cell alignment for an entire row by placing the attributes on the <TR> tag. Or you can align each cell individually by placing the attributes on the <TD> tag. NOTE: Individual cell alignment will override any row alignment.

Table with Cells Alignment

Horizontally
Aligned
Cells 		Left
Aligned
Cell 		Right
Aligned
Cell 		Center
Aligned
Cell

Vertically
Aligned
Cells 		Top Aligned
Cell 		Bottom Aligned
Cell 		Center Aligned
Cell
HTML Source
<TABLE BORDER>
<CAPTION>Table with Cells Alignment</CAPTION>
<TR>
<TH>Horizontally<BR>Aligned<BR>Cells</TH>
<TD ALIGN=LEFT>Left Aligned<BR> Cell</TD>
<TD ALIGN=RIGHT>Right Aligned<BR> Cell</TD>
<TD ALIGN=CENTER>Center Aligned<BR> Cell</TD>
</TR>
<TR>
<TH>Vertically<BR>Aligned<BR>Cells</TH>
<TD VALIGN=TOP>Top Aligned Cell</TD>
<TD VALIGN=BOTTOM>Bottom Aligned Cell</TD>
<TD VALIGN=CENTER>Center Aligned Cell</TD>
</TR>
</TABLE>


Next Example










Occasionally, you may want cells to span across multiple columns or rows. This can be accomplished with the ROWSPAN or COLSPAN attributes inside the cell's <TD> tag. To force a cell to span vertically down across 2 rows, type <TD ROWSPAN=2>. To force a cell to span horizontally from left to right, type <TD COLSPAN=2>.

Table with COLSPAN & ROWSPAN
HEADING 1 HEADING 2 HEADING 3
Cell One Cell Two Cell Three Cell Four Cell Five Cell Eleven
Cell Six Cell Seven Cell Eight Cell Nine Cell Ten
HTML Source
<TABLE BORDER>
<CAPTION>Table with COLSPAN & ROWSPAN</CAPTION>
<TR><TH COLSPAN=2>HEADING 1</TH>
<TH>HEADING 2</TH>
<TH COLSPAN=3>HEADING 3</TH></TR>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD>
<TD>Cell Five</TD>
<TD ROWSPAN=2>Cell Eleven</TD></TR>
<TR><TD>Cell Six</TD><TD>Cell Seven</TD>
<TD>Cell Eight</TD><TD>Cell Nine</TD>
<TD>Cell Ten</TD></TR>
</TABLE>


Next Example










You can also control the width of a table with the WIDTH attribute in the TABLE tag. To Specify an exact width for your table in pixels, set the WIDTH attribute to an absolute number. For example, to force a table to exactly 200 pixels, type <TABLE WIDTH=200>.

Table with WIDTH=200
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER WIDTH=200>
<CAPTION>Table with WIDTH=200</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>

Table with WIDTH=300
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER WIDTH=300>
<CAPTION>Table with WIDTH=300</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Next Example










You can also set the table size relative to the space between the left and right margin. If you want your table to be 3/4th the size of the screen, type <TABLE WIDTH=75%>.
Table with WIDTH=75%
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER WIDTH=75%>
<CAPTION>Table with WIDTH=75%</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Table with WIDTH=100%
Cell One Cell Two Cell Three Cell Four
Cell Five Cell Six Cell Seven Cell Eight
HTML Source
<TABLE BORDER WIDTH=100%>
<CAPTION>Table with WIDTH=100%</CAPTION>
<TR><TD>Cell One</TD><TD>Cell Two</TD>
<TD>Cell Three</TD><TD>Cell Four</TD></TR>
<TR><TD>Cell Five</TD><TD>Cell Six</TD>
<TD>Cell Seven</TD><TD>Cell Eight</TD></TR>
</TABLE>


Next Example










You can also set the width of a column by using the WIDTH attribute inside a <TH> or <TD> tag. When you use a percentage, the width is relative to the table, not the full screen. To set the middle cell to 50% of the whole table, use the <TD WIDTH=50%> for that cell.
Table with Middle cell WIDTH=50%
Cell One Cell Two Cell Three
Cell Four Cell Five Cell Six
HTML Source
<TABLE BORDER>
<CAPTION>Table with Middle cell WIDTH=50%</CAPTION>
<TR><TD>Cell One</TD><TD WIDTH=50%>Cell Two</TD>
<TD>Cell Three</TD></TR>
<TR><TD>Cell Four</TD><TD>Cell Five</TD>
<TD>Cell Six</TD></TR>
</TABLE>


Next Example










You can also control the color with in a cell by using the BGCOLOR attribute in the <TR> or <TD> tag. To change all the cells in a row green, use <TR BGCOLOR="green">.
Table with BGCOLOR
Cell One Cell Two Cell Three
Cell Four Cell Five Cell Six
Cell Seven Cell Eight Cell Nine
HTML Source
<TABLE BORDER>
<CAPTION>Table with BGCOLOR</CAPTION>
<TR BGCOLOR="green"><TD>Cell One</TD>
<TD>Cell Two</TD>
<TD>Cell Three</TD></TR>
<TR><TD BGCOLOR="purple">Cell Four</TD>
<TD BGCOLOR="yellow">Cell Five</TD>
<TD BGCOLOR="purple">Cell Six</TD></TR>
<TR><TD BGCOLOR="black"><FONT COLOR="white">Cell Seven</TD>
<TD>Cell Eight</TD>
<TD>Cell Nine</TD></TR>
</TABLE>

Here we actually see a table inside a table.

Top of Page