Home >>HTML Tutorial >HTML Table

HTML Table

Create HTML Table

HTML Tables is used to preset data in rows and columns format. A Table is the collection of rows and rows is the collection of columns. <tr> stands for table rows.To add a row in a table table row tags are used. <TD> is used to put the column inside the row. Syntax
<table>

  <tr>

    <td>row1col1</td>

    <td>row1col2</td>

  </tr>

</table>
Try it Yourself

HTML Table rows

<tr> tag represents html table rows. Eg
<table>

  <tr>

    <td>row1col1</td>

    <td>row1col2</td>

  </tr>

</table>
Try it Yourself

HTML Table columns

<td> or <th> tag represents html table columns .<td> means table data and <th> means table head Eg
<table border="1">
  
<tr>

    <th>Name</th>

    <th>Email</th>

  </tr>
 
 <tr>
    <td>phptpoint</td>

    <td>[email protected]</td>

  </tr>

 <tr>

    <td>phptpoint blog</td>

    <td>[email protected]</td>

  </tr>

</table>
Try it Yourself In the above example a table is created have 3 rows and 6 columns where each row contains 2 column. <tr> tag is used to create a row while <td> or <th> is used to create column. <tr> comes in between <table> tag while <td> or <th> comes in between <tr>.

How to merge table column

When you want to merge 2 or more then 2 column(cell) , use colspan Property of <td colspan="2"> or <th colspan="2"> Eg
<table border="1">
<tr>

<th colspan="2"> User Details</th>

</tr> 

<tr>

    <th>Name</th>

    <th>Email</th>

  </tr>
 
 <tr>
    <td>phptpoint</td>

    <td>[email protected]</td>

  </tr>

 <tr>

    <td>phptpoint blog</td>

    <td>[email protected]</td>

  </tr>

</table>


Try it Yourself

How to merge table rows

When you want to merge 2 or more then 2 rows in a single row , use rowspan Property of <td rowspan="2"> or <th rowspan="2"> Eg
<table  border="1">

  <tr>

    <td rowspan="2">&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

  </tr>

</table>


Try it Yourself

Nested Table

Nested table means how to use table inside a table. Multiple times you need to use table inside a table. when you want to use a table inside a table write the syntax of table in between your cell i.e eighter <td> or <th> .
<html>
<body>

<table border="1" bgcolor="gray" width="200" height="200">

<tr>

<th>

<table align="center" border="1" bgcolor="#F8F8F8" width="100" height="100">

<tr>

<th>Inner Table</th>

</tr>

</table>

</th>

</tr>

</table>

</body>

</html>