How to implement HTML Table

Share the post

In this topic, we will see How to implement a Table in HTML5?. Sometimes, We have to rearrange the data in tabular format so by using the tag we can do the same. We will see, How to do style for an HTML table?

How to implement a Table in HTML?

The basic table implementation is as follows :

<!DOCTYPE html>

<html>




<head>This is example of HTML table </head>

<body>

<table>




</table>

</body>




</html>

If you run above file you can’t see the actual table. Because if we use tag then it should contain & tags.

How to implement <tr> & <td > in HTML5 ?

<tr> : It represent row of the table.

<td> : It represent cell of the table.

<!DOCTYPE html>

<html>




<head>This is example of HTML table </head>

<body>

<table>

<tr>

<td>this is cell 1 in row 1</td>

<td>this is cell 2 in row 1</td>

</tr>




<tr>

<td>this is cell 3 in row 2</td>

<td>this is cell 4 in row 2</td>

</tr>




</table>

</body>




</html>



The Output for above example is as shown below image :

Output
Output

How to implement <th> in HTML5 ?

If you want to add column header then you must have to use

<!DOCTYPE html>

<html>




<head>This is example of HTML table </head>

<body>

<table>

<tr>

<th>this is header 1 </th>

<th>this is header 2 </th>

</tr>

<tr>

<td>this is cell 1 in row 1</td>

<td>this is cell 2 in row 1</td>

</tr>




<tr>

<td>this is cell 3 in row 2</td>

<td>this is cell 4 in row 2</td>

</tr>




</table>

</body>




</html>



The Output for above example is as shown below image :

Output
Output

Add Style to table : 

If you want to add border for table then write following style

<!DOCTYPE html>

<html>




<head>This is example of HTML table </head>

<style>

table { border : solid 2px black}

table tr th { border : solid 2px black }

table tr td { border : solid 2px black }

</style>

<body>

<table>

<tr>

<th>this is header 1 </th>

<th>this is header 2 </th>

</tr>

<tr>

<td>this is cell 1 in row 1</td>

<td>this is cell 2 in row 1</td>

</tr>




<tr>

<td>this is cell 3 in row 2</td>

<td>this is cell 4 in row 2</td>

</tr>




</table>

</body>




</html>

The Output for above example is as shown below image :

Output
Output

Leave a Comment