Table of Contents
HTML Table
- An HTML table is defined with the <table> tag.
- In web page each table row is defined with the <tr> tag.
- <th> tag is uses for A table heading.
Note:-By default, table heading are bold and display center alignment.
- The <td> tag is used for table data/cell.
Example of HTML Table tag
<!DOCTYPE>
<html>
<body>
<table border="5">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Ram</td><td>Singh</td><td>60</td></tr>
<tr><td>Ravi</td><td>Singh</td><td>80</td></tr>
<tr><td>Swati</td><td>Rajput</td><td>82</td></tr>
<tr><td>Sonu</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>- Using border attributes set A border of table.
- Using the cellpadding attributes set the property to add padding to cells.
- Using the cellspacing attribute to add property to set the spacing between cells.
Example of cellpadding/cellspacing
<!DOCTYPE>
<html>
<body>
<table border="5" cellpadding="5" cellspacing="10">
<tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr>
<tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr>
<tr><td>James</td><td>William</td><td>80</td></tr>
<tr><td>Swati</td><td>Sironi</td><td>82</td></tr>
<tr><td>Chetna</td><td>Singh</td><td>72</td></tr>
</table>
</body>
</html>Use of Colspan and Rowspan in HTML table
- By using colspan attribute merge two or more columns into a single column.
- By using rowspan attribute merge two or more rows.
Example of Colspan/rowspan
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3>Colspan and rowspan</h3>
<h3>Cell that spans two columns:</h3>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Mob no</th>
</tr>
<tr>
<td>Ram Singh</td>
<td>ram123.@gmail.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
<h3>Cell that spans two rows:</h3>
<table>
<tr>
<th>Name:</th>
<td>Ram Singh</td>
</tr>
<tr>
<th>Email:</th>
<td>ram123.@gmail.com</td>
</tr>
<tr>
<th rowspan="2">Mob no:</th>
<td>123-45-678</td>
</tr>
<tr>
<td>123-00-546</td>
</tr>
</table>
</body>
</html>