HTML Table Example
If you not learn <table> tag, you should first Learn HTML Table Tutorial.
Basic Table
<html>
<head>
</head>
<body>
<table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</table>
</body>
</html>
Table Cell 1 |
Table Cell 2 |
Table Cell 3 |
Table Cell 4 |
Table with Header
<html>
<head>
</head>
<body>
<table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
<tr>
<th>Table Header</th>
<th>Table Header</th>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
</table>
</body>
</html>
Table Header |
Table Header |
Table Cell 1 |
Table Cell 2 |
Table Header colspan
<html>
<head>
</head>
<body>
<table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
<tr>
<th colspan="2" style="text-align: center;">Table Header</th>
</tr>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
</table>
</body>
</html>
Table Header |
Table Cell 1 |
Table Cell 2 |
Table Header rowspan
<html>
<head>
</head>
<body>
<table border="1" style="background-color:#FFFFFF; width:100%; height:auto;">
<tr>
<th rowspan="2" style="text-align: center;">Table Header</th>
<td>Table Cell 1</td>
</tr>
<tr>
<td>Table Cell 2</td>
</tr>
</table>
</body>
</html>
Table Header |
Table Cell 1 |
Table Cell 2 |
Table Width Change
<html>
<head>
</head>
<body>
<table border="1" style="background-color:#FFFFFF; width:100%; height:80px;">
<tr>
<th colspan="2" style="text-align: center;">Table Header</th>
</tr>
<tr>
<td width="40%">Table Cell 1 (width=40%)</td>
<td>Table Cell 2 (width=60%)</td>
</tr>
<tr>
<td width="40%">Table Cell 3 (width=40%)</td>
<td>Table Cell 4 (width=60%)</td>
</tr>
</table>
</body>
</html>
Table Header |
Table Cell 1 (width=40%) |
Table Cell 2 (width=60%) |
Table Cell 3 (width=40%) |
Table Cell 4 (width=60%) |