Table of Contents
Basic to Advance table design in HTML
Example of HTML Basic to Advance table 1
<!DOCTYPE>
<html>
<body>
<h2>Example of HTML Basic to Advance table 1</h2>
<table border="1" bgcolor="lightpink" width="50%" height="250px" style="text-align: center;">
<tr>
<th>a
</th>
<th>b
</th>
</tr>
<tr>
<td colspan="2">c
</td>
</tr>
</table>
</body>
</html>
Example of HTML Basic to Advance table 2
<!DOCTYPE>
<html>
<body>
<h2>Example of HTML Basic to Advance table 2</h2>
<table border="1" bgcolor="yellow" width="50%" height="250px" style="text-align: center;">
<tr>
<th>a
</th>
<th>b
</th>
<th rowspan="2">c
</th>
</tr>
<tr>
<td>d
</td>
<td>e
</td>
</th>
</tr>
<tr>
<td>f
</td>
<td colspan="2">g
</td>
</th>
</tr>
</table>
</body>
</html>
Example of HTML Basic to Advance table 3
<!DOCTYPE>
<html>
<body>
<h2>Example of HTML Basic to Advance table 3</h2>
<table border="1" bgcolor="pink" width="50%" height="250px" style="text-align: center;">
<tr>
<th>a
</th>
<th>b
</th>
<th rowspan="3">d
</th>
</tr>
<tr>
<td colspan="2">c
</td>
</tr>
<tr>
<td colspan="2">e
</td>
</tr>
</table>
</body>
</html>
Example of HTML Basic to Advance table 4
<!DOCTYPE>
<html>
<body>
<h2>Example of HTML Basic to Advance table 4</h2>
<table border="1" bgcolor="yellow" width="50%" height="250px" style="text-align: center;">
<tr>
<th>a
</th>
<th>b
</th>
<th rowspan="2">c
</th>
</tr>
<tr>
<td>d
</td>
<td>e
</td>
</tr>
<tr>
<td colspan="2">f
</td>
<td rowspan="2">g
</td>
</tr>
<tr>
<td>h
</td>
<td>i
</td>
</tr>
</table>
</body>
</html>
Example of HTML Basic to Advance table 5
<!DOCTYPE>
<html>
<body>
<h2>Example of HTML Basic to Advance table 5</h2>
<table style="border-color: red;" border="1" cellpadding="5" cellspacing="1" width="50%" height="250px">
<tr>
<td bgcolor="green" colspan="2">A
</td>
<td bgcolor="red" rowspan="2">B
</td>
</tr>
<tr>
<td bgcolor="yellow" rowspan="2">D
</td>
<td bgcolor="black" style="color: yellow;"> C
</td>
</tr>
<tr>
<td bgcolor="violate" colspan="2">E
</td>
</tr>
</table>
</body>
</html>