How to Create an HTML Table

[Greg]

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 row. A row goes across the screen horizontal. 
              This row may contain many columns. Those are done with the 
              next element, the <td> tag.      -->            

        <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 box, one 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

[AnthonyCea]

Thanks Noppid, that is a great piece of work, you should continue on with this tutorial.

[Ohiosweetheart]

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.

[Greg]

Good to see this html table tutorial is helpful. Thanks for the comments.

[budz01]

you just need some codes to generate like you in the first post ...

[ahmedwali]

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

[kaitlyny9]

Thanks a lot for this suggestion as it will help many people who are no so tech knowing people.

[Ashli]

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.

[adimacil]

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.