In this tutorial ,how to create side by side table s in html and css. 

 

How to create side by side tables in html


Here, am using for create side by side tables with the CSS flex property for divide the column 50% and make the simple design using html and css. 

Read also: How to create multiple table using HTML

Side By Side Table In HTML


Style:

*
{
 box-sizing: border-box;
}
.container
{
width:1200px;
margin:0 auto;
}
table 
{
border-collapse: collapse;
width: 100%;
border: 1px solid #323232;
}
.row
{
display:flex;
}
.column
{
float:left;
flex:50%;
padding:10px;
}
th,td
{
text-align:left;
padding:10px;
border:1px solid #323232;
}
.header
{
background-color:#121212;
color:#fff;
}
.secondheader
{
background-color:#cccccc;
color:#323232;
}


HTML:

<body>
<div class="container">
<h2>Side by Side Tables in HTML</h2>
<div class="row">
<div class="column">
<table>
<tr class="header">
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Fruits</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Nuts</td>
<td>300</td>
</tr>
<tr>
<td>3</td>
<td>Drinks</td>
<td>200</td>
</tr>
</table>
</div>
<!----first column end---->
<div class="column">
<table>
<tr class="secondheader">
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>120</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>JackFruit</td>
<td>170</td>
</tr>
</table>
</div>
</div>
</div>
</body>

side by side tables in html



Side by Side Tables in Bootstrap


Here, am using Bootstrap to create the side by side tables .Bootstrap is the easy method to learn and use. Just we need to paste the code and the head tag and javascript on the bottom the script tag.


<body>
<div class="container py-5">
<h2>Side by Side Tables in HTML</h2>
<div class="row py-5">
<div class="col-md-6">
<div class="column">
<table class="table table-bordered table-striped border">
<tr>
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Fruits</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>Nuts</td>
<td>300</td>
</tr>
<tr>
<td>3</td>
<td>Drinks</td>
<td>200</td>
</tr>
</table>
</div>
</div>
<!----first column end---->
<div class="col-md-6">
<div class="column">
<table class="table table-bordered table-striped border">
<tr>
<th>S.NO</th>
<th>ORDER</th>
<th>PRICE</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>120</td>
</tr>
<tr>
<td>2</td>
<td>Orange</td>
<td>70</td>
</tr>
<tr>
<td>3</td>
<td>JackFruit</td>
<td>170</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>

side by side tables in html



Post a Comment

Previous Post Next Post