HTML - Table Tags

Table Tags

Table Tags are used to create a table in an HTML Document. The data from the table is presented in a tabular format.

1. <table>

<table> tag its define table.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

2. <caption>

<caption> tag defines a table caption.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<h1> The caption Element </h1>
<table>
<caption> Student Table </caption>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

3. <th>

<th> tag defines a header cell in a table.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The table element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

4. <tr>

<tr> tag defines a row in a table.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The table element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<th> Name </th>
<th> Roll No. </th> 
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

5. <td>

<td> tag defines a cell in a table.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The table element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

6. <thead>

<thead> tag A Group of Header Content is created by the Table Header Element.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The thead element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table style="width:50%" border="1">
<thead>
<tr>
<td colspan="4"> This is the head of th table </td>
</tr>
</thead>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

7. <tbody>

<tbody> tag group the body content in a table.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The tbody element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table style="width:50%" border="100">
<th> Name </th>
<th> Roll No. </th>
<tbody>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
<tbody>
</body>
</html>
Output :

8. <tfoot>


<tfoot> tag groups the footer content in a table.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The thead element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table style="width:50%" border="1">
<thead>
<tr>
<td colspan="4"> This is the head of the table </td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4"> This is the foot of the table </td>
<tr>
</tfoot>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

9. <col>

<col> tag it is used to specifies column properties for each column within a <colgroup> element.

Example :

<!DOCTYPE html>
<html>
<head>
<title> Table Tag Example </title>
<h1> The col element </h1>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table style="width:50%" border="100">
<colgroup>
<col span="2" style="background-color:blue">
</colgroup>
<th> Name </th>
<th> Roll No. </th>
<tr>
<td> Krsna </td>
<td> 101 </td>
</tr>
<tr>
<td> Ram </td>
<td> 102 </td>
</tr>
<tr>
<td> Mohan </td>
<td> 103 </td>
</tr>
</body>
</html>
Output :

Post a Comment

0 Comments