How to create multiple table in one page in HTML
In this tutorial, we will learn how to create multiple tables in one page in html in detail.
>>The <table> tag is defined an html for table.
>>In a table row is defined tag <tr> for each row.
>>Each table data/cell is defined <td>tag.
>>column for <th> tag.
The following code is an example of a basic table with three rows and two columns with data of car prices:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>How to create multiple tables in one page in html</title>
<style type="text/css">
.container{
margin:auto;
width:800px;
}
.table1 {
width:400px;
height:250px;
margin:auto;
font-size:24px;
border:1px solid #000;
border-collapse:collapse; }
.table1 th {
color:#000;
vertical-align:middle;
text-align:center;
border:1px solid black; }
.table1 td {
color:#474747;
vertical-align:middle;
text-align:left;
border:1px solid #000; }
.table2 {
width:400px;
height:250px;
margin-left:200px;
font-size:24px;
border:1px solid #000;
border-collapse:collapse; }
.table2 th {
color:#000;
vertical-align:middle;
text-align:center;
border:1px solid black; }
.table2 td {
color:#000099;
vertical-align:middle;
text-align:left;
border:1px solid #000; }
</style>
</head>
<body>
<div class="container">
<table>
<td>
<table class="table1">
<tr>
<th> Car Name </th>
<th> Price</th>
</tr>
<tr>
<td>Renault Kwid</td>
<td>4.25L</td>
</tr>
<tr>
<td>Renault Duster</td>
<td>5.24L</td>
</tr>
<tr>
<td>Renault Xuv</td>
<td>8.26L</td>
</tr>
</table>
</td>
<td>
<table class="table2">
<tr>
<th> Car Name </th>
<th> Price</th>
</tr>
<tr>
<td>Maurthi suz Xuv</td>
<td>8.25L</td>
</tr>
<tr>
<td>Maurthi Suz Dzire</td>
<td>12.01L</td>
</tr>
<tr>
<td>Maurthi suz Swift</td>
<td>13L </td>
</tr>
</table>
</td>
</table>
</div>
</body>
</html>
Output:
The codes that generated this table look like this:
<table>
<td>
<table class="table1">
<tr><th> Car Name </th><th> Price</th></tr>
<tr><td>Renault Kwid</td><td>4.25L</td></tr>
<tr><td>Renault Duster</td><td>5.24L</td></tr>
<tr><td>Renault Xuv</td><td>8.26L</td></tr>
</table>
</td>
<td>
<table class="table2">
<tr><th> Car Name </th><th> Price</th></tr>
<tr><td>Maurthi suz Xuv</td><td>8.25L</td></tr>
<tr><td>Maurthi Suz Dzire</td><td>12.01L</td></tr>
<tr><td>Maurthi suz Swift</td><td>13L </td></tr>
</table>
</td>
</table>
Read also: