build a web site | fundraising | community | collect fees online | blogz
 Member-Support
Member-Support:Tables  
 
 
Home Home
Admin FAQ's Admin FAQ's
HTML Basics HTML Basics
HTML Links HTML Links
Tables Tables
Graphics Graphics
Music Music
JavaScript JavaScript
Tips/Tricks Tips/Tricks

 
  Tables  
 

Tables
Using HTML to build
tables for your web pages.
HTML Table

Print This Page

Preface: Used extensively throughout the internet and on the pages of our member-support site, tables are a great way to, among other things, separate and align data and to colorize certain sections, large or small, of a web page. As with the previous sections pertaining to HTML, the table will be built using both opening < > and closing </ > tags. Reviewing HTML Basics will aid you in the building of tables.


The HTML components of a basic table:
<table>Begins the table.In a single-row, single-cell table, all of your info is placed between the <td> and </td> tags. It is entered and uploaded as:

<table><tr><td>All of your info.</td></tr></table>

Not all tables are easy to spot. The information in this basic components block is set within a borderless table. To see how it was made, the HTML of the table, please click here.

<tr>Starts a row.
<td>A regular cell.
</td>Ends a regular cell.
</tr>Ends a row.
</table>Closes the table.

Basic table attributes ~ used within the table tags:
WidthIn pixels or a percentage ~ sizes the overall table or the individual cells.
BorderGives the table and each cell a border; a greater number thickens the border.
BgcolorColorizes the entire table and/or the individual table cells.
CellpaddingAdds space between the content of a cell and the surrounding border.
CellspacingPuts space, increases the "border", in between each cell.
ColspanAllows one cell to span the width of the adjoining cells above or below it.
RowspanAllows one cell to span the height of the adjoining cells to the right or left.
AlignAligns the overall table on the page and/or the data within each cell.


This is a basic one-row, one-cell table. It has a width of "520", a border of "3", cellpadding of "3", and the entire table is center aligned. You may insert anything that you wish inside of a table; regular text, links, graphics, scripts, music players, etc.

Here is the HTML that was entered and uploaded for this simple table:

<table width="520" border="3" cellpadding="3" align="center"><tr><td> All of the text in the above block. </td></tr></table>  Easy!


This is similar to the above, only we have divided it in half by using two cells, but it still just has one row. Our example here has a width of "90%", a border of "5", cellpadding of "4", and cellspacing of "6".As we did not choose an alignment, the table naturally defaults to a left align. To make sure that each half was equal, we had to specify a width of "50%" for each of the two cells. Great for columns!

This is how it was accomplished:

<table width="90%" border="5" cellpadding="4" cellspacing="6"><tr><td width="50%">All of the text in the left cell.</td><td width="50%">All of the text in the right cell.</td></tr></table>   Not too tough, right?


This table has three rows and a total of five cells. It uses a width of "100%", a border of "2", cellpadding of "4", cellspacing of "0", and an overall background color of grey. To have the text centered and on a red background, overriding the grey, we had to insert align="center" and bgcolor="#FF0033" within the opening <td> tag of this single cell.
As we gave the overall table a background color of grey within the <table> tag, nothing further had to be added to any of the three cells in this row to have them appear as grey. You can, of course, color each cell separately.In entering other HTML right along with the regular text, we were able to apply this eteamz.com logo.

Not all of the cells in this row are the same width. In composing this row, we didn't know how much content that we would have, so it wasn't until the entire row was completed that we worried about the size of each cell. After viewing all of the content, we used width="30%" in the two cells to the left and width="40%" for this cell.
This last cell, also spanning three columns, had to also have colspan="3" within its <td> tag. As this cell has a black background, in order for the text to be seen, we changed the text to white. This font change, font="FFFFFF", must be placed around the text that is inside of a cell. Such as: <td><font color="#FFFFFF"> The text in a cell that you wish to change. </font></td>

Here are the basics of how it was done:

<table width="100%" border="2" cellpadding="4" cellspacing="0" bgcolor="#DCDCDC"><tr><td colspan="3" bgcolor="#FF0033" align="center">The data in the red cell.</td></tr><tr><td width="30%">The text in the first grey cell.</td><td width="30%">The text and logo HTML in the center cell.</td><td width="40%">The info in the right grey cell.</td></tr><tr><td colspan="3" bgcolor="#000000"><font color="#FFFFFF">The data in the black cell.</font></td></tr></table>


Member-Support TipIf you would like to see some additional table information, check this out.

Home  Admin FAQ's  HTML Basics  Links  Graphics  JavaScript  Music  Tips/Tricks  Help Links

Back to Top



   
 Member-Support
Member-Support

 
 
 
  Web Sites Instruction Community
  Local Sites
Spotlight Sites
Build a Web Site
Tips and Drills
Sport Tip Email
Customer Support
News & Updates
Bulletin Boards
Camps & Clinics
Tournaments
Coaches' Corner


   
"Ingenuity, plus courage, plus work, equals miracles." - Bob Richards (Pole-Vaulter)
   
Copyright © 2014, eteamz.com, Inc
User Agreement