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>phptpoint@gmail.com</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>blog@gmail.com</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>phptpoint@gmail.com</td>
</tr>
<tr>
<td>phptpoint blog</td>
<td>blog@gmail.com</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"> </td>
<td> </td>
</tr>
<tr>
<td> </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>
No Sidebar ads