.


Divya

Html table With Example


HTML <table> tag is used to show tabular data.

<table> Table is defined with <table> tag.

<tr> Table row is defined with <tr> tag.

<th> Table head is defined with <th> tag.

<td> Table data is defined with <td> tag.

Structure of a Normal table

<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Divyasundar</td>
<td>divya@gmail.com</td>
<td>988812345</td>
</tr>
</table>
</body>
</html>

Run it yourself

Table attributes:

Border:

Adding it to the table will result in a border around the outside of the table.

Example

<!DOCTYPE html>
<html>
<body>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>Divyasundar</td>
<td>divya@gmail.com</td>
<td>988812345</td>
</tr>
</table>
</body>
</html>

Run it yourself

Caption:

The caption tag will serve as a title or explanation for the table.

Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<caption>Students Data</caption>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Divya</td>
<td>25</td>
</tr>
<tr>
<td>Sangram</td>
<td>25</td>
</tr>
</table>
</body>
</html>

Run it yourself

Height and Width

can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Collapsing:

By default, adjacent cells will have their own distinct border.

Cellpadding and Cellspacing:

The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.

Colspan and Rowspan:

we use colspan attribute to merge two or more columns into a single column. And rowspan to merge two or more rows.

Background:

bgcolor − You can set background color for whole table or just for one cell.

background − You can set background image for whole table or just for one cell.

Example

<!DOCTYPE html>

<html>


<head>

<title>HTML Table Background</title>

</head>
 

<body>

<table border = "1" bordercolor = "green" bgcolor = "yellow">
<caption>This is the caption</caption>
 

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan = "2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan = "3">Row 3 Cell 1</td>

</tr>

</table>

</body>


</html>

Run it yourself



.