If you read my last article How to make a webpage I showed you the basic ingredients of building a webpage on your own. In this article I'm going to show you how to build HTML tables. With the advent of CSS, websites are using
tags and positioning elements more and more. Personally,I always like to use a little bit of . A little bit dab of CSS, little dab of JavaScript, little dab of Ajax, html, php, and I'm a happy camper. DIV's are cleaner no question, and you can position keyword rich HTML elements towards the top of your page, but if someone is using an older web browser your site would look messy; if that's even something to really be concerned about I don't know. If you want to have some fun download Netscape 4.79 and surf the web. It's pretty interesting.
Let's look at the basic elements of a table:
<TABLE>: -- defines the beginning of our table element.
<TR>(table row): -- defines a new row of our table.
<TD>(table dimension): -- defines a cell in that row.
Other tags are:
<TH>(table heading): This would be considered a heading but I honestly never use this tag
or really see the benefits of using it at all.
<TBODY>(table body), <THEAD:>(table head),<TFOOT>(table foot):
Again, I only use the 3 basic tags above and never use these tags at all. All I've ever needed was the basic 3.
For our first table we'll start with a basic table with 2 rows, and 1 cell in each row.
I placed a border on this table for this example so that you can see where the table rows, and cells are.
Now that we've build our basic table, lets look at some of the other attributes we can use. In the next examples
I'll show you some common html table attributes. A key thing to remember is that all your attributes go between
the start of your tags: <TD ATTRIBUTE=""> and before the end of your tag.
BGCOLOR: background color. This can be used inside TABLE,TR,and TD tags. BORDERCOLOR: Border Color, pretty much self explanatory.
Cell Row with a red background color
cell 2
Cell 1 in second Row with a silver background color
In the above example I used bgcolor="" attribute to make my tables background color blue and bordercolor="" to make the border color black:
<table border="1" BGCOLOR="blue" BORDERCOLOR="black">. Aside from bordercolor, the same rule applies for rows and
cells of your table.
BACKGROUND: Display a background image. This attribute can be used in your TABLE, and TD, tags.
In the above example I used these attributes to make the width and height of my table 400 x 100 pixels:
<table border="1" BGCOLOR="silver" WIDTH="400" HEIGHT="100">.
ALIGN: This can be used inside your TABLE, and TD tags.
ALIGN tag has 3 values, LEFT(by default), CENTER, & RIGHT. This attribute is used for aligning the table or the contents of your table cells.
VALIGN (vertical alignment): tag has 3 values as well, TOP, BOTTOM, and MIDDLE.
This attribute is used for vertically aligning the contents of your table cells.
This Table is aligned to the center of the page.
cell 2 with text aligned centered
Cell 1 in third Row with text vertically aligned to the top of cell.
cell 2
In the above example I used these attributes to align the table to the center
of the page, center the text in cell 2, vertically align the text to the
top of the cell in cell one of the second row.
<table border="1" BGCOLOR="silver" BORDERCOLOR="black" WIDTH="400" HEIGHT="100" ALIGN="CENTER">,
<TD ALIGN="CENTER">, <TD VALIGN="TOP">
COLSPAN & ROWSPAN: Column Span and Row Span. These attributes define how many
rows or columns your table cell will run. This rule only applies to the <TD> tag.
Cell that spans 3 rows
plad background image.
This Table is aligned to the center of the page.
cell 2 with text aligned centered
Cell 1 in third Row with text vertically aligned to the top of cell.
cell 2
Table that spans 3 columns
In the above example I used rowspan=3 in the first cell in order for the first
TD tag to span 3 rows, in the cell next to it I used a
colspan=2 in order for the cell to span 2 columns, and in the very bottom cell I
used a colspan of 3 in order for the cell to stretch the sell along the entire
length of the table.
CELLPADDING & CELLSPACING: These attributes the padding and spacing between your table cells.
This rule only applies to the <TABLE> tag.
Cell that spans 3 rows
All Cells Padded by 15 pixels and each cell is spaced by zero pixels
This Table is aligned to the center of the page.
cell 2 with text aligned centered
Cell 1 in third Row with text vertically aligned to the top of cell.
cell 2
Table that spans 3 columns
In the above example I used a cellpadding of 15 pixels, and cellspacing of zero pixels.
This concludes my lesson on HTML tables. I sincerely hope you found this article useful.
More HTML tutorials coming soon!
http://thescriptcenter.com
Jason Russo specializes in website design, and programming
for the web.
This article may be reproduced in its entirety providing this
resource box is included.
Bookmark /Share
Favorites
Delicious
Digg
Google
Reddit
StumbleUpon
Yahoo!