Common Programming Logic HTML,Jquery,JAVASCRIPT,MySQL: Placing two tables Horizontally in a Html page

<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 :

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

.tableHorizontal

{

display:inline-block;

width:50%;

float: left;

}

Common Programming Logic HTML,Jquery,JAVASCRIPT,MySQL

Friday, July 19, 2013

Placing two tables Horizontally in a Html page

1 comment:

Blog Archive