Computer Help Forum

Go Back   vBulletin and Computer Help Forum > Website Support and Management > Website Development

Website Development Web development programming languanges, HTML, PHP, MySQL and design support.

Reply
 
Thread Tools Display Modes
Old 06-25-2005   #1
Greg
Administrator
 
Greg's Avatar
 
Join Date: Feb 2003
Location: Florida
Posts: 5,194
How to Create an HTML Table

Creating a table can be a tough thing to visualize, so I'll attempt to map this out with an example. This is the basics, borders are on to show the shape.

First let's do a simple box. Nothing special, a table of one row and one column.

PHP Code:
<table border="1">    <!-- This starts the table -->
    
    <
tr> <!-- This begins a rowA row goes across the screen horizontal
              
This row may contain many columnsThose are done with the 
              next element
the <tdtag.      -->            

        <
td> <!-- This is the beginning of the first column. If it's the
                  only column, it'
s the box your data will be in in the 
                  first row
This example will be a boxone row,
                  
one column -->
        
                <!-- 
This is our data to display. -->
                <
div align="center">Hello World!</div>
        
        </
td> <!-- Now we close the column. -->
    
    </
tr> <!-- Now we close the row. -->

</
table> <!-- Now we end the table --> 
Without the comments we have...
PHP Code:
<table border="1">        
    <
tr
        <
td
            <
div align="center">
                
Hello World!
            </
div>
        </
td>
    </
tr>
</
table
That's a box, one row and one column. The data will size it as is I think, but you can control the shape with formatting lables.

Now let's do a two row two column table. Much more useful.

PHP Code:
<table border="1">    <!-- This starts the table -->
    
    <
tr> <!-- This begins the first row. -->            

        <
td> <!-- This is the beginning of the first column first row -->
        
                <!-- 
This is our data to display. -->
                <
div align="center">Box 1</div>
        
        </
td> <!-- Now we close the first column. -->
        
        <
td> <!-- This is the beginning of the second column first row -->
        
                <!-- 
This is our data to display. -->
                <
div align="center">Box 2</div>
        
        </
td> <!-- Now we close the second column. -->    
    
    </
tr> <!-- Now we close the first row. -->

    <
tr> <!-- This begins the second row. -->            

        <
td> <!-- This is the beginning of the first column second row -->
        
                <!-- 
This is our data to display. -->
                <
div align="center">Box 3</div>
        
        </
td> <!-- Now we close the first column. -->
        
        <
td> <!-- This is the beginning of the second column second row -->
        
                <!-- 
This is our data to display. -->
                <
div align="center">Box 4</div>
        
        </
td> <!-- Now we close the second column. -->    
    
    </
tr> <!-- Now we close the second row. -->

</
table> <!-- Now we end the table --> 
Without the comments we have...

PHP Code:
<table border="1">    
    <
tr>
        <
td>
            <
div align="center">
                
Box 1
            
</div>
        </
td
        <
td>
            <
div align="center">
                
Box 2
            
</div>
        </
td>
    </
tr>
    <
tr>
        <
td>
            <
div align="center">
                
Box 3
            
</div>
        </
td>
        <
td
            <
div align="center">
                
Box 4
            
</div>
        </
td>
    </
tr
</
table
It's not too hard, you just need to balance the tags opening and closing them.

Recap:

1)-Open the table.
2)-Open a Row.
3)-Open and close the columns.
4)-Close the Row.
5)-Close the table.

Repeat 2-3-4 to make multiple rows while repeating 3 in each for the desired columns.

Here is a working example... HTML Table How To
__________________
Computers and Accessories Computer Manuals Riderinfo Connect for Bikers
Ad Revenue - Sell link space on your website and profit.
Greg is offline   Reply With Quote
Old 10-28-2006   #2
AnthonyCea
Senior Member
 
AnthonyCea's Avatar
 
Join Date: Jul 2005
Posts: 189
Thumbs up

Thanks Noppid, that is a great piece of work, you should continue on with this tutorial.
AnthonyCea is offline   Reply With Quote
Old 10-28-2006   #3
Ohiosweetheart
Senior Member
 
Ohiosweetheart's Avatar
 
Join Date: Jan 2006
Location: NE Ohio
Posts: 189
Tables are fun... and can be confusing at times. I have to take my time, block out any distractions and really pay attention, or I can get so lost while coding them, it's pathetic.

This is an excellent tutorial noppid, kudos.
Ohiosweetheart is offline   Reply With Quote
Old 10-28-2006   #4
Greg
Administrator
 
Greg's Avatar
 
Join Date: Feb 2003
Location: Florida
Posts: 5,194
Good to see this html table tutorial is helpful. Thanks for the comments.
__________________
Computers and Accessories Computer Manuals Riderinfo Connect for Bikers
Ad Revenue - Sell link space on your website and profit.
Greg is offline   Reply With Quote
Old 01-24-2009   #5
budz01
Junior Member
 
Join Date: Jan 2009
Posts: 2
you just need some codes to generate like you in the first post ...

Last edited by Greg; 01-24-2009 at 10:17 AM.
budz01 is offline   Reply With Quote
Old 01-30-2009   #6
ahmedwali
Banned
 
Join Date: Jan 2009
Posts: 1
Hi

Hello,
how to install php and html on web pagee can anyone tell me??

Last edited by Greg; 01-30-2009 at 01:23 PM.
ahmedwali is offline   Reply With Quote
Old 08-27-2009   #7
kaitlyny9
Junior Member
 
Join Date: Aug 2009
Posts: 4
Advice

Thanks a lot for this suggestion as it will help many people who are no so tech knowing people.
kaitlyny9 is offline   Reply With Quote
Old 10-25-2011   #8
Ashli
Junior Member
 
Join Date: Oct 2011
Posts: 4
Thanks a lot for this tutorial, tables always seem to confuse me for some reason. This thread does make them a bit easier to comprehend. I really appreciate it.
Ashli is offline   Reply With Quote
Old 02-22-2013   #9
adimacil
Junior Member
 
Join Date: Feb 2013
Posts: 1
This is such an interesting and informative sharing about How to Create an HTML Table. Now you make it easy for me to understand and implement the concept.
adimacil is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML Form Usage tubago Website Administration 5 06-09-2005 08:36 PM
Learning HTML PATHOS Website Administration 6 04-25-2005 07:41 AM
Cannot create working shortcuts to desktop JjEjFjF Computer Help for Beginners 4 04-04-2005 08:48 PM


All times are GMT -5. The time now is 03:07 PM.



vBulletin 3.8.7 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Copyright vB and Computer Help Forum

EZ software products copyright Greg Lynch 2006-2013