Free Webmasters Resource
 

Free Graphics, Tutorials, Scripts, Webmaster Forums, Web Templates, SEO Tools, & Much More!!
Home | Scripts | Tutorials | Free Downloads | Articles | SEO | Play Free Games | Web Templates

Tables

Tables can enhance your HTML authoring and improve web site organization.

Tables are used by webmasters all around the Internet as the means of putting "stuff" neatly into different places. Like most web sites, Spoono uses tables on nearly every page for instance the logo and the navigation menu on our main page are all in separate cells that make up the table structure of our main layout. On this page, the ad at the top and the text of this tutorial are inside of tables. Tables provide a cleaner alternative to using frames, and it only requires the use of the three basic table tags.

The three main table tags and their closing counterparts are: <table>, which starts the table, </table>, which ends the table, <tr>, which begins a row, </tr>, which ends a row, <td>, which begins a cell, and </td>, which ends a cell. These tags are easy to work with and you will find out that you can do a lot with them. Let's start with a basic example:

Example 1

<html>
<head>
<title>Tables</title>
</head>
<body>

<table width="100%">
<tr>
<td width="25%">
My First Cell
</td>

<td width="25%">
My Second Cell
</td>

<td width="25%">
My Third Cell
</td>

<td width="25%">
My Fourth Cell
</td>

</table>

</body>
</html>

This code produces:

My First Cell My Second Cell My Third Cell My Fourth Cell


Now that you know the basic fuction of the tables you can tailor them to suite your needs by adding attributes. In the above example the width attribute was added to <table> and <td> tags to define the width of the table in percentages. You can also set the width to exact pixel dimentions by using numbers instead of percentages. It is good idea to start all of your tables by defining the following attributes in your <table> tag:

<table cellpadding="0" cellspacing="0" border="0">

This is good to do because different browsers, especially older ones, have different default settings for how tables appear. Naturally, that can cause some problems. The cellpadding attribute defines the amount of space in pixels that will serve as a barrier between the content inside the table and table cell walls. The cellspacing attribute defines the amount of space in pixels that lies between the table cells. As the name suggests, the border attribute defines the size of the table border in pixels.

To align your tables, you can add align attributes to the <table> and <td> tags. In the <table> tag the align attribute defines how the entire table will horizontally align to the enviroment outside of it. The choices are left, center, and right (For example, <table align="center"> centers a table). In the <td> tag, there are two attributes, align and valign that define the horizontal and vertical alignment of a cell's contents. The choices for align are left, center, and right. The choices for valign are top, middle, and bottom (For example, <td align="right" valign="bottom"> aligns the contents of the cell to the bottom right).

The background color of either the entire table, or a specific cell can be defined with the bgcolor attribute. You can either use the common text name of colors such as bgcolor="red" or hexadecimal codes such as bgcolor="#FF0000". In <td> tags you can also define a background image to tile in the background of a cell by using the background attribute (For example, <td background="phatimage.gif"> would make phatimage.gif tile in the background of a cell.

The last commonly used attributes for tables are colspan and rowspan. These two define the amount of cells that a particular cell may span. For example, if you had a table with three columns and you wanted to put a title on the top that would span all three of the columns, you would use the colspan attribute like this: <td colspan="3"> Your Title </td>. The rowspan attribute does the same thing, but defines the amount of rows that a cell occupies.

That about covers everything. Now it's time for another example:

Example 2

<html>
<head>
<title>Tables</title>
</head>
<body>

<table cellpadding="10" cellspacing="5" border="5" width="100%">
<tr>
<td bgcolor="yellow" align="center" colspan="2">
One Big Cell
</td>
</tr>
<tr>

<td bgcolor="orange" align="left" width="50%">
Left Cell
</td>

<td bgcolor="green" align="right" width="50%">
Right cell
</td>
</tr>
</table>

</body>
</html>

This code produces:

One Big Cell
Left Cell Right cell



Lastly, I feels as if I am obligated to mention the lost fourth table tag that serves little purpose nowadays when we have fancy CSS files to describe all of our font styles. The fourth tag is <th> which stands for "table heading." This tag functions exactly like a <td> tag, except the font of the text is heavier, like a heading rightly should be.

 

Tutorials: HTML

Title/Description

Level

Backgrounds: Tutorial
Learn how to effectively add backgrounds to your page that make your page look professional or amateur.

Beginner

Imagemaps: Tutorial
Make one image into various clickable regions using only HTML

Intermediate

Embedding Fonts: Tutorial
Learn how to use uncommon fonts in web pages by embedding them.

Advanced

Images: Tutorial
Positioning images can make your images look just right when inserted into text.

Intermediate

Form Effects: Tutorial
Learn how to create trendy forms with simple style commands as well as with CSS classes.

Intermediate

Layers: Tutorial
Layers can make complicated image placement possible.

Advanced

Forms: Tutorial
Use forms to gather information from your users.

Advanced

Links: Tutorial
Making links in HTML is the easiest thing you will ever do.

Beginner

Frames: Tutorial
Learn how to create frames that enable you to create navigation systems on your site.

Advanced

Scrollbars: Tutorial
Learn how to add effects to your scrollbars and add flavor to your page.

Advanced

Hide From Print: Tutorial
Learn how to only allow a visitor to print part of your page using CSS.

Intermediate

SSI: Tutorial
Learning how to do SSI will save you a lot of authoring time.

Advanced

Horizontal Line: Tutorial
The horizontal line serves as a great separator tool.

Beginner

Table Styles: Tutorial
Learn how to add various table styles such as dash or dot borders, and many other things.

Intermediate

Iframes: Tutorial
Iframes can organize your website into clean sections.

Advanced

Tables: Tutorial
Organize your web page layouts with tables.

Intermediate

216 Web Safe Color Chart: Tutorial
The 216-color color-safe palette refers to colors (RGB values) that will appear the same on either IE or Netscape and Windows or Mac platforms.

Beginner

Pantone RGB/Hex/HTML Colors: Tutorial
This table contains all pantone colors converted to RGB and Hex. It displays them all in HTML colors.

Intermediate

 
© 2004-08 Free Webmasters Resource
Home | Contact | Credits | Flash Templates | Webmaster Forums | Site Map | Webmaster Resources | Advertise


Computer Playground · Templates Resource