HTML Table Properties and Examples
Tables are very powerful in HTML. They are very simple, yet sometimes confusing. However, I will attempt to make this tutorial as simple as possible!
There are three primary tags used to make a table. These are the <TABLE>, <TR> and <TD> tags. The <TABLE> tag defines the start of the table - the </TABLE> tag is the end of the table. There are some extra things you can define within the <TABLE> tag, such as the border, width, height, cellpadding, cellspacing, frame and rules.
The <TR> tag defines a table row. The <TD> tag defines the columns within a row.
HTML Code Sequence of a Table
The basic sequence is:
<TABLE border=1>
<TR>
<TD>Cell 1
</TD>
<TD>Cell 2
</TD>
</TR>
<TR>
<TD>Cell 3
</TD>
<TD>Cell 4
</TD>
</TR>
</TABLE>
The above HTML code sample creates the following table:
You can also stretch a row over multiple columns using the COLSPAN property. So for instance, let’s say you have a 3×3 table and you want the first row to be the name of the HTML table, and the following rows to hold your information:
<HTML>
<HEAD><TITLE>Tables</TITLE></HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD COLSPAN=3>
<CENTER><B>This is the Title Bar.</B></CENTER>
</TD>
</TR>
<TR>
<TD>Info Cell 1
</TD>
<TD>Info Cell 2
</TD>
<TD>Info Cell 3
</TD>
</TR>
<TR>
<TD>Info Cell 3
</TD>
<TD>Info Cell 4
</TD>
<TD>Info Cell 5
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The above HTML example will yield the following table with bolded and centered title:
See how easy it’s to create such HTML table?
Tables aren’t really that difficult to get started with. You contain all of your columns (<TD> tag sets) inside your <TR> tag sets, and all of that is contained within your <TABLE> tag set. Make sure each row has the same number of columns (or equals out using colspan).
Table Cell Background Colors
There are some other cool things you can do. You can actually set background colors and images on cells. You do this within the <TD> tags, just as you would within the <BODY> tag. Use bgcolor for colors or background for images. For instance:
<HTML>
<HEAD><TITLE>Links</TITLE></HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD COLSPAN=3 bgcolor=”green”>
<CENTER><B>This is the Title Bar.</B></CENTER>
</TD>
</TR>
<TR>
<TD bgcolor=”red”>Info Cell 1
</TD>
<TD bgcolor=”yellow”>Info Cell 2
</TD>
<TD bgcolor=”blue”>Info Cell 3
</TD>
</TR>
<TR>
<TD background=”tiletest.png”>Info Cell 3<br><br><br>
</TD>
<TD>Info Cell 4
</TD>
<TD>Info Cell 5
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The above HTML example will create this table with different cell background colors:
Table Cellpadding & Cellspacing
Simple enough, yes? You can also align the text in a cell any way you want. First let’s learn about cellpadding and cellspacing so we can display the text inside larger cells. Cellpadding and cellspacing, defined in the <TABLE> tag, define the spacing of a cell. Cellpadding defines the amount of space between the cell walls and the contents of the cell, and cellspacing defines the amount of space between cells. To create a quick example, let me go back to our basic 2×2 table:
Now change the <TABLE> line to read: <TABLE border=1 cellpadding=10>
The above example will yield this table:
Next, change the line to read: <TABLE border=1 cellpadding=10 cellspacing=10>. This example creates:
To put it simply, cellpadding determines the spacing inside the cell, and cellspacing determines the size of the cell walls.
The red arrow in the above example shows cellpadding, the blue arrow shows cellspacing.
Table Width, Height and Frame
The last three <TABLE> properties we’re interested in are width, height and frame. Width can be used as absolute pixels (using px after the number) or as a percentage of the screen (using % after the number), so you could say:
<TABLE width=500px> to create a table that is 500 pixels wide or:
<TABLE width=50%> to create a table that takes up one half of the screen.
The same applies to height.
Frame allows you to specify which parts of the table’s border show up. However, I find this is rarely useful. If you would like more information on using frame, go to: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_frame and check it out.
When we get to the final sales page/download page, we are basically going to create our main page using a pixel-width/height-defined table. We will use tables inside that table to contain certain things, such as bullet points.
Let’s look quickly at aligning text in a cell, and then we will move on to creating a Paypal Buy Now button.
Let’s create a fixed width 300px width, 300px height table:
<TABLE border=1 width=300px height=300px>
Table Horizontal & Vertical Alignment
As you can see in the previous example, the default horizontal alignment is left, and the default vertical alignment is centered. Vertical alignment is controlled via the <TR> tag, and horizontal alignment is controlled via the <TD> tag. Let’s alter horizontal alignment first.
Try the following code:
<HTML>
<HEAD><TITLE>Table Fun</TITLE></HEAD>
<BODY>
<TABLE border=1 width=300px height=300px>
<TR>
<TD align=left>Cell 1</TD>
<TD align=right>Cell 2</TD>
</TR>
<TR>
<TD align=right>Cell 3</TD>
<TD align=left>Cell 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
As you can see in the above example, <TD align=left> puts the contents of the cell on the left side, and <TD align=right> puts the contents on the right side. You can also use “center” to center the contents and “justify” to justify large chunks of text, as you would in a text editor.
To alter the vertical alignment, we turn to the <TR> tag. The <TR> tag is powerful, as it also can use align=left, right, center, or justify to specify the horizontal placement of all of the columns in that row. This is probably what you will use most often (although sometimes you will need to space cells individually). The <TR> tag also carries the valign= property, which sets the vertical alignment. Your choices for vertical alignment are: top, bottom, or middle. Let’s set each of our cells to one of those:
<HTML>
<HEAD><TITLE>Table Fun</TITLE></HEAD>
<BODY>
<TABLE border=1 width=300px height=300px>
<TR valign=top>
<TD align=left>Cell 1</TD>
<TD align=right>Cell 2</TD>
</TR>
<TR valign=bottom>
<TD align=right>Cell 3</TD>
<TD align=left>Cell 4</TD>
</TR>
<TR valign=middle align=center>
<TD>Cell 5</TD>
<TD>Cell 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
*Note, in the above example, that I’ve added a third row to display the valign=middle and align=center choices. Alignments counts for all contents of a cell, including text, graphics, etc. It’s important to understand how to control this.
That said, I just wanted to be thorough, as tables can be used for just about anything you need to do with a web page. I have successfully created web page layouts from tables that I was told would be impossible to do without CSS–and they worked for all browsers! Do not underestimate tables! They are your friend =P.
Loading ...
If you like "A Complete HTML Table Tutorial - with Code/Format Examples,"
please consider linking to this article: