HTML Tutorials

TABLES

Tables lay the groundwork for most web sites. The majority of web sites designed today are completely contained within tables. You need not look any further than this very web site for an example of this. Everything you see on this screen is contained within a table. Some of the content you see is inside of tables which are inside of other tables, this is called Nesting.

So why would you want to put the content of a web page into a table? The reason is that it is the simplest and most effective way to organize a web page. For example, how would you make two columns of text on a web page if you did not use a table? Think about it. Unless you are an advnaced HTML'er and know how to use layers, you can's do it. What you would do is create a table with two columns and then place your text in each column. Here is the code that you would need to accomplish this:

This table would display like this:

Column 1 Text Here

Column 2 Text Here

The <TABLE> tags work just like any other HTML tag. Anytime you open a table with <TABLE> you must close it with a </TABLE>. The <TR> tag stands for Table Row. A table can have as many rows as you want it to. If you create a table with 3 rows and later decide that you want to add another row, just go back into your HTML source code and add another set of <TR></TR> tags. The <TD> tag means Table Column, but technically stands for Table Data. Similarly to table rows, you can also have as many table columns as you would like. Simply add 1 set of <TD></TD> tags for each column you would like to have in your table.

Be sure to note that your <TD></TD> tags must always be nested inside of your <TR></TR> tags and your <TR></TR> tags must always be nested inside of your <TABLE></TABLE> tags.

Ok, so now you understand how to make a simple table. Now, you want to know how to add attributes to. You can add various attributes to your tables with some very simple code. Here are some examples:

To specify a length, you could add this to your code:
<TABLE width = "100%"> - sets the length as a percentage of the entire page
<TABLE width = "100"> - sets the length in pixels
<TD width = "100%"> - sets the length as a percentage of the entire table
<TD width = "100"> - sets the length in pixels

To specify a table border thickness and color, you could add this to your code:
<TABLE border="2" bordercolor="blue">

To add a background color, you could add this to your code:
<TABLE bgcolor="blue"> - sets the background color of the whole table
<TD bgcolor="blue"> - sets the background color of a specific table cell

To add a background image, you could add this to your code:
<TABLE background="image.gif"> - sets the background image of the whole table
<TD background="image.gif"> - sets the background image of a specific table cell

There you have it. Now, you are ready to start building and customizing your very own tables!

< Back to Tutorials

Main Menu
Home
ASP Scripts
ASP Tutorials
JavaScripts
Awards
Contact Us

Email This Page

Other Resources
ASP Web Hosting
Search Engine Submission
Programming Help

Other ASP Web Sites

Site Map

Last Updated:
22 March 2010