Hyper Text Markup Languages

Tables are a webmaster's best friend. Content can be sorted and resorted in limitless combinations, patterns, and design possibilities. Tables can be used for anything, quite literally. I would strongly suggest that you learn how to use them. The starting and ending table tags are <table> and </table>

Table attributes are as follows. Attributes placed within the opening table tag will effect the entire table as a whole. Keep this in mind when applying attributes to the table tag.

width="#px/#%"
Width is expressed as a number, defined in units of pixels or percentages. Where width="20px" would be twenty pixels wide, width="20%" would cover twenty percent of the available screen area. Using percentages is better for multi-resolution compatibility. If a table width is set as 100%, it will always be 100% of the screen area, no matter how big the screen is. It will resize itself to accommodate 100%, where 100px would always remain 100 pixels. Using pixel sizing is best for tables that you wish to remain a specific size. If you want a table to simply conform in size to the contents of what is inside of it, then simply don't apply a width attribute. Tables will size themselves to fit whatever is placed inside of them.

height="#px/#%"
Exactly the same as width, height is expressed as a number, defined in units of pixels or percentages. Everything that is true for width is likewise true for height.

cellpadding="#px"
Cellpadding is the amount of space, in pixels, that will separate the edges of your table from the content of your table. The default value is 0px, so there will be no cellpadding unless you specify otherwise. To elaborate the function of it, if you have cellpadding="0px", the text and images in your table would touch the edges. If you had cellpadding="5px", the text and images would stop 5 pixils away from the edges of your table. A space of 5 pixils will stand between the borders and the content.

Cellspacing="#px"
Cellspacing is the amount of space that will separate individual cells in your table. If you have a value of cellspacing="10px", every cell in your table will stand 10 pixels away from each another. A space of 10 pixels will stand between every individual cell.

Align="left/right/center"
Placing the align attribute within the opening table tag will align the entire table to the left side, the middle, or the right side of the page, depending on what you specify. Note that this attribute, when place in the opening table tag, does not simply justify text and other content to the left, right, or center. It moves the entire table's position to the left, right, or center of the page. You are aligning the table, not the content therein.

bgcolor="colorname/hexadecimal color code"
Placing the bgcolor attribute into the opening table tag allows you to give the entire table a specified background color. Note that it would offer more customization if you placed bgcolor attributes into the specific cells that you want colored, instead of having the entire table have a specified background color. By doing this, you will be able to apply a different background color to each element within the table, instead of everything have the same background color. I did the header of this table by placing a background color of blue into the cell that I am using for the title. If I had placed the very same code into the opening table tag instead of that specific cell, even the background color behind the text you are reading now would be blue.

Table Rows
Think of table rows (<tr>) as being books stacked on top of one another, each book being a separate row to the table. Each row can have an unlimited amount of pages (cells) inside of it, and you can stack an unlimited amount of books (rows) on top of one another. Table rows are used like this:

You can apply row after row after row. This table has three rows, three sets of <tr> and </tr> tags.

Row attributes are as follows. Note that applying attributes to row tags effects all cells within that row, unless overridden by another command placed within the cell's tags. You could apply an align="center" attribute to a row, thereby making it to where all cells within that row have their content centered. It is best to just leave the row tags bare, and apply attributes to individual cell tags, unless you want the attributes to apply to every cell within that row. You will learn more about table cells later.

Align="left/center/right"
The align attribute, when placed in the row opening tag, makes it to where the content of all cells within that row are aligned to the value specified within the align attribute. The content; text, images, everything, will be justified to either the left side, the right side, or the center of each cell. This can be overridden by placing another align attribute in the cells in which you want a different content alignment.

Valign="top/center/bottom"
Sets vertical alignment for all cells within a row. You can align the content of cells to the top of the cell, the center of the cell, or the bottom of the cell. Everything that is true for the Align attribute is also true for the Valign attribute.

width="#px/#%"
Defines the width of the row. If applied, the sum of all cell widths must meet the pixel number or percentage defined here in order to look right. If you do not apply width attributes to cells, the widths of all cells will be auto sized and sizes will be divided evenly to meet the specified width of the row. In example, if you were to have a row width of 60px, placed three cells, and did not place width tags in each cell, the three cells would probably be auto sized to 20px, 20px, and 20px so that the sum of all three cells met the 60px row width specification. This is an easy way to do things, but offers less customization potential. It's much better to simply refrain from placing the width attribute in the row opening tag and instead, defining the cell widths individually. This way, there is no number to meet, and all cell widths can be defined freely. But, of course, this is just a minor technicality. Either way will work fine.

height="#px/#%"
Defines the height of the row. Cells will be auto sized to meet the height of the row. If you do not place a row height, cell heights can be defined freely and rows will conform to the height of the cells. Everything that is true for the width attribute is also true for the height attribute.

border="#px"
Defines wether or not a row will be given a border. The border settings, when applied to a row tag, will effect all cells within that row. If this attribute is not used, a row will not be given a border. You can simply place the 'border' attribute without the equals sign and number. By doing this, the row will be given a border with the default width value of 1px and a default color value of black. By using the border="#" attribute, you can define the width of the border of the row.

bordercolor="colorname/hexadecimal code"
This attribute allows you to set the border color for the entire border of the row. You can use simple colornames or you can use hexadecimal color values to define what color you want the row borders to be.

bordercolorlight="colorname/hexadecimal code" and bordercolordark="colorname/hexadecimal code"
Using these attributes instead of the bordercolor="" attribute will alow you to define the highlight and shadow colors of the row borders, giving it a more 3D effect. The bordercolorlight="" attribute changes the highlight color of the border and the bordercolordark="" attribute changes the shadow color of the border.

-Back to top-

Hosted by www.Geocities.ws