Menu



error This forum is not active, and new posts may not be made in it.
Daniel Meritt

1379
541 Posts
541
Invite Me as a Friend
Person Of The Week
HTML Lesson 6
12/11/2007 9:38:29 PM
Lesson 6


Tables

While it is true that TABLES can be a somewhat complex and a tad bit more difficult to learn, mastering them is well worth your effort.

Using TABLES in your page layout has several key advantages:

 
    * Tables are an excellent format for displaying certain types of data.
    * Using tables provides you with more control in the placement of text and images.
    * Your page layout will display more consistently and uniformly on different browsers.

Basically, TABLES are all about control, and who amongst us wouldn't like having just a little more of that?
Boxes Inside Of Boxes It's probably easiest to think of a TABLE as a flat, two dimensional box you can put on your page.

Inside of this box you can place other boxes, or CELLS, and inside of these boxes, you put text, images, or even more boxes still.

 
CELL 1    CELL 2
CELL 3    CELL 4

This is a very simple table which contains four cells.

Remember Folks to Always remove
! From any code you see here before pasting in your Note Pad.

The TABLE CELL, or <
!TD> is the basic unit of a cell. You can have as many or as few cells in your table as you wish.

A horizontal row of cells is called a TABLE ROW or <!TR>.

CELLS go into ROWS.

In the example above, Cell 1 and cell 2 form a table row, and cells 3 and 4 form another table row.



Always remember that cells go into rows, and rows go into a table.

Here is what the HTML for a table looks like:

<
!TABLE>
     <
!TR>
          <
!TD>Your Data <!/TD>
      <
!/TR>
<
!/TABLE>

Notice how the opening and closing TD tags are nested inside of the TR tags, and likewise, the TR tags are nested inside the TABLE tags.

Here's the HTML for a more complicated table:

<
!TABLE>
     <
!TR>
          <
!TD> Your Data <!/TD>
          <
!TD> Your Data <!/TD>
     <
!/TR>
     <
!TR>
          <
!TD> Your Data <!/TD>
          <
!TD> Your Data <!/TD>
     <
!/TR>
<
!/TABLE>

In this example, I've outlined a table with two Table Rows. Each row contains two Cells, which gives us a four cell table.

Ah Yes...More Attributes

You can position your text or image inside of the table cell itself by using the ALIGN and VALIGN attributes inside the td tag.

 
ALIGN
    
VALIGN
align=left         valign=top
align=center    valign=middle
align=right       valign=bottom

 

 Use only one ALIGN and one VALIGN attribute per table cell.

 
<
!TD ALIGN=left VALIGN=top>

Using your attributes like this would place your text in the upper left hand corner of your cell.

This is a Lesson you will want to make sure you understand 100% as you will use Tables all the time.

I hope you enjoyed this Lesson.

We will be covering more about Tables in the Next Lesson also.


Daniel

Main Forum

Main Thread

Lesson 1

Lesson 2

Lesson 3

Lesson 4

Lesson 5

Lesson 6





+0
Amanda Martin-Shaver

2190
2587 Posts
2587
Invite Me as a Friend
Top 100 Poster
Person Of The Week
Re: HTML Lesson 6
12/11/2007 10:36:01 PM
Hello Daniel,

Thank you for lesson 6 tables, and their meaning and
how to apply them correctly.

I learned html on my own over a very long time from
looking at the source of pages and working through
this 'gobedy gooch' and making a little sense at a time
to apply to my own pages, and building my knowledge
from there.

I have used tables for a long time from copying and pasteing, and adding my new content inside.

I did not learn what the symbols meant so this copy
and paste would take me a long time (hours) to get everything neatly lined up with my new content.

Amanda

+0
Jill Bachman

2146
8860 Posts
8860
Invite Me as a Friend
Top 25 Poster
Person Of The Week
Re: HTML Lesson 6
12/12/2007 3:25:06 AM

Hi Daniel,

More GREAT STUFF!   Thank you so much.  I cannot tell you how helpful this is, and it is so wonderful to have this forum as a resource.

You are the best!

Blessings and Merry Christmas,  Jill


+0
Beryl Payton

689
2592 Posts
2592
Invite Me as a Friend
Top 100 Poster
Person Of The Week
Re: HTML Lesson 6
12/12/2007 4:45:58 AM

Hi Daniel,

Thank you for the lesson.  Which I had seen this before having all the problems I had trying to work with the one in my website.

It is going to be so helpful for my next project.

Thanks for sharing with me.  Now I have a better understanding of what I should have been doing, instead of what I did.

Blessings,

Beryl

This Is The Healthy Lifestyle Feature-rich Information Website - Family Owned and Operated Vial Virtual Solutions Helping Business to Achieve Their Dreams
+0
Re: HTML Lesson 6
12/12/2007 6:40:31 AM

Thanks or the info.  I am also self taught and understanding the basics is a great help.

Shirley Manion

Shirley Manion MoneyMakers, Shopping, blogs, fun places http://www.connectionsecrets.com/webmasterhelpers Shopping Bargains and Deals Connections http://www.connectionsecrets.com/bargainshopping Your own fun Iggly Biggly business for only $20.00 h
+0


facebook
Like us on Facebook!