HTML 05
- chathu hewage
- Feb 10, 2021
- 1 min read
HTML Tables
In HTML tables we use the <table> tag.
We write a <table> tag inside the <body> tag.
That way we can easily identify it as a table.
The <tr> tag is used to display a table row.
The <th> tag is used to display a table header.
The <td> tag is used to display a table data.
Insert a html table in our html document.
<h2>HTML TABLES</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>E-mail</th>
</tr><tr>
<td>Kamal</td>
<td>27</td>
<td>kamal1234@gmail.com</td>
</tr><tr>
<td>Amara</td>
<td>29</td>
<td>amarajay@gmail.com</td>
</tr><tr>
<td>Nayan</td>
<td>25</td>
<td>nayanarunamshan94@gmail.com</td>
</tr>
</table>
Add a table border in our html table
<table border="2px”>
<tr>
<th>Name</th>
<th>Age</th>
<th>E-mail</th>
</tr><tr>
<td>Kamal</td>
<td>27</td>
<td>kamal1234@gmail.com</td>
</tr><tr>
<td>Amara</td>
<td>29</td>
<td>amarajay@gmail.com</td>
</tr><tr>
<td>Nayan</td>
<td>25</td>
<td>nayanarunamshan94@gmail.com</td>
</tr>
</table>
Add table width and border color
<h2>HTML TABLES</h2>
<table border="2px" bordercolor="red" width="500">
<tr>
<th>Name</th>
<th>Age</th>
<th>E-mail</th>
</tr><tr>
<td>Kamal</td>
<td>27</td>
<td>kamal1234@gmail.com</td>
</tr><tr>
<td>Amara</td>
<td>29</td>
<td>amarajay@gmail.com</td>
</tr><tr>
<td>Nayan</td>
<td>25</td>
<td>nayanarunamshan94@gmail.com</td>
</tr>
</table>
Add table background color
<h2>HTML TABLES</h2>
<table border="2px" bordercolor="#3d63ef" width="500" bgcolor="#7ce8e2">
<tr>
<th>Name</th>
<th>Age</th>
<th>E-mail</th>
</tr><tr>
<td>Kamal</td>
<td>27</td>
<td>kamal1234@gmail.com</td>
</tr><tr>
<td>Amara</td>
<td>29</td>
<td>amarajay@gmail.com</td>
</tr><tr>
<td>Nayan</td>
<td>25</td>
<td>nayanarunamshan94@gmail.com</td>
</tr>
</table>
Add cell padding & cell spacing
<h2>HTML TABLES</h2>
<table border="2px" bordercolor="red" width="500" cellpadding="10 px“ cellspacing="5px“>
<tr>
<th>Name</th>
<th>Age</th>
<th>E-mail</th>
</tr><tr>
<td>Kamal</td>
<td>27</td>
<td>kamal1234@gmail.com</td>
</tr><tr>
<td>Amara</td>
<td>29</td>
<td>amarajay@gmail.com</td>
</tr><tr>
<td>Nayan</td>
<td>25</td>
<td>nayanarunamshan94@gmail.com</td>
</tr>
</table>
Add cell padding & cell spacing
<h2>HTML TABLES</h2>
<table border="2px" bordercolor="red" width="500" cellpadding="10 px“ cellspacing="5px“>
<tr>
<th>Name</th>
<th>Age</th>
<th>E-mail</th>
</tr><tr>
<td>Kamal</td>
<td>27</td>
<td>kamal1234@gmail.com</td>
</tr><tr>
<td>Amara</td>
<td>29</td>
<td>amarajay@gmail.com</td>
</tr><tr>
<td>Nayan</td>
<td>25</td>
<td>nayanarunamshan94@gmail.com</td>
</tr>
</table>
HTML Table rowspan
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<h2>HTML TABLES</h2>
<table border="2px" width="400">
<tr>
<td rowspan="3">Photo</td>
<td>First Name</td>
</tr><tr>
<td>Last Name</td>
</tr><tr>
<td>sex</td>
</tr>
</table>
</body>
</html>
Add a table caption
<h2>HTML TABLES</h2>
<table border="2px" width="400">
<caption>personal information</caption>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Address</th>
</tr><tr>
<td>Nuwan</td>
<td>Withana</td>
<td>28</td>
<td>Galle</td>
</tr><tr>
<td>Roshel</td>
<td>Samarasinghe</td>
<td>25</td>
<td>Colombo</td>
</tr>
</table>
Tutorial Created by Rasari Chamodya
Comments