<html>
<head>
<style>
.tableHorizontal
{display:inline-block;
width:50%;
float: left;}
</style>
</head>
<body>
<table class="tableHorizontal">
<tr style="color: green;"><td>table 1 first row</td></tr>
<tr style="color:green;"><td>table 1 Second row</td></tr>
<tr style="color: green;"><td>table 1 Third row</td></tr>
<tr style="color: green;"><td>table 1 Fourth row </td></tr>
<table>
<table class="tableHorizontal">
<tr style="color: red;"><td>table 2 first row</td></tr>
<tr style="color: red;"><td>table 2 Second row</td></tr>
<tr style="color: red;"><td>table 2 Third row</td></tr>
<tr style="color: red;"><td>table 2 Fourth row</td></tr>
<table>
</body>
</html>
The Output of the above html page will look like as below :
Explanation:
<head>
<style>
.tableHorizontal
{display:inline-block;
width:50%;
float: left;}
</style>
</head>
<body>
<table class="tableHorizontal">
<tr style="color: green;"><td>table 1 first row</td></tr>
<tr style="color:green;"><td>table 1 Second row</td></tr>
<tr style="color: green;"><td>table 1 Third row</td></tr>
<tr style="color: green;"><td>table 1 Fourth row </td></tr>
<table>
<table class="tableHorizontal">
<tr style="color: red;"><td>table 2 first row</td></tr>
<tr style="color: red;"><td>table 2 Second row</td></tr>
<tr style="color: red;"><td>table 2 Third row</td></tr>
<tr style="color: red;"><td>table 2 Fourth row</td></tr>
<table>
</body>
</html>
The Output of the above html page will look like as below :
| table 1 first row |
| table 1 Second row |
| table 1 Third row |
| table 1 Fourth row |
| table 2 first row |
| table 2 Second row |
| table 2 Third row |
| table 2 Fourth row |
Explanation:
- Two required tables which are to be placed horizontally are created with same class name tableHorizontal
- css is applied for the class name tableHorizontal
{
display:inline-block;
width:50%;
float: left;
}
