Press "Enter" to skip to content

Table Examples in HTML

Last updated on October 4, 2019

Definition :

  • table is a container which is meant for displaying the content is rows and columns fashion.
  • Table is a heavy weight container so performance will be low.

Program :

<html>

    <body>

                     <table>

                                     <tr>

                                                     <td> <font color=”red”> Hello </font> </td>

                                                                 <td>  Hello1 </td>

                                                 </tr>

                                                 <tr>

                                                     <td> Hello2 </td>

                                                                 <td> Hello3 </td>

                                                 </tr>

                                </table>

                </body>

</html>

Border and Header :

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100″ height=”100″>

                                     <tr>

                                                     <td > Hello </td>

                                                                 <td> Hello1 </td>

                                                 </tr>

                                                 <tr>

                                                     <td> Hello2 </td>

                                                                 <td> Hello3 </td>

                                                 </tr>

                                </table>

                </body>

</html>

. When we have to fix the screen size to use for 100% this is called as responsive web designing

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%”>

                                     <tr>

                                                     <td > Hello </td>

                                                                 <td> Hello1 </td>

                                                 </tr>

                                                 <tr>

                                                     <td> Hello2 </td>

                                                                 <td> Hello3 </td>

                                                 </tr>

                                </table>

                </body>

</html>

Cell Spacing  :

  • Cell spacing is an attribute which provide space between one cell and another cell.

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″>

                                     <tr>

                                                     <td > Hello </td>

                                                                 <td> Hello1 </td>

                                                 </tr>

                                                 <tr>

                                                     <td> Hello2 </td>

                                                                 <td> Hello3 </td>

                                                 </tr>

                                </table>

                </body>

</html>

Cell padding :

  • This is meant for providing the pattern to cell on the text

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>

                                     <tr>

                                                     <td > Hello </td>

                                                                 <td> Hello1 </td>

                                                 </tr>

                                                 <tr>

                                                     <td> Hello2 </td>

                                                                 <td> Hello3 </td>

                                                 </tr>

                                </table>

                </body>

</html>

Colspan :

  • Column span, combining the columns.
  • This is meant for occupy the column space.

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>

                                    <tr>

                                                     <td colspan=”3″> <center> Hello </center> </td>

                                                </tr>

                                                <tr>

                                                    <td> Hello1 </td>

                                                    <td> Hello2 </td>

                                                                <td> Hello3 </td>

                                                </tr>

                                </table>

                </body>

</html>

Rowspan :

  • This is meant for occupy the row space.

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>

                                    <tr>

                                                     <td rowspan=”3″> <center> Hello </center> </td>

                                                     <td> Hello1 </td>

                                    </tr>

                                                <tr>

                                                    <td> Hello2 </td>

                                                </tr>

                                                <tr>

                                                                <td> Hello3 </td>

                                                </tr>

                                </table>

                </body>

</html>

How to provide background color :

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>

                                    <tr bgcolor=”green”>

                                                     <td rowspan=”3″> <center> Hello </center> </td>

                                                     <td> Hello1 </td>

                                    </tr>

                                                <tr bgcolor=”red”>

                                                    <td> Hello2 </td>

                                                </tr>

                                                <tr bgcolor=”yellow”>

                                                                <td> Hello3 </td>

                                                </tr>

                                </table>

                </body>

</html>

How to provide Heading :

Program :

<html>

    <body>

                     <table border=”5″ bordercolor=”red” width=”100%” height=”100%” cellspacing=”0″ cellpadding=”50″>

                                 <th colspan=”3″ bgcolor=”cyan”> WHATSMYSUGGESTION </th>

                                    <tr bgcolor=”green”>

                                                     <td rowspan=”3″> <center> Hello </center> </td>

                                                     <td> Hello1 </td>

                                    </tr>

                                                <tr bgcolor=”red”>

                                                    <td> Hello2 </td>

                                                </tr>

                                                <tr bgcolor=”yellow”>

                                                                <td> Hello3 </td>

                                                </tr>

                                </table>

                </body>

</html>

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *