I'm trying to display divs with either one or two tables next to each other. The tables should be centered:
*div****************************************************************************
* Table 1 *
* |...|...|...| *
********************************************************************************
*div****************************************************************************
* Table 2 Table 3 *
* |...|...|...| |...|...|...| *
********************************************************************************
My html looks something like this:
<div class="all">
<div class="row"> <!-- row with 1 table in it -->
<div class="column">
<table class="centered">
...
</table>
</div>
</div>
<div class="row"> <!-- row with 2 tables in it -->
<div class="column">
<table class="centered">
...
</table>
</div>
<div class="column">
<table class="centered">
...
</table>
</div>
</div>
</div>
I have so far failed to find the proper CSS for it. My current CSS looks like this:
div.row {
display: block;
width: 100%;
}
div.column {
display: inline;
margin-left: auto;
margin-right: auto;
}
table.centered {
border: 1px;
border-style: solid;
margin: 20px;
}
jsfiddle is here: jsfiddle
Please help me understand CSS...
Use Flexbox and it will work no matter how columns you add in each row:
.row {
display: flex;
justify-content: center;
}
jsfiddle
If you don't want to use flexbox (not compatible to older browsers), erase the display: inline; from column, add text-align: center; to it and also add display: inline-table; to .centered:
(inline elements can be centered using text-align: center; on their container)
div.row {
display: block;
width: 100%;
}
div.column {
margin-left: auto;
margin-right: auto;
text-align: center;
}
table.centered {
border: 1px;
border-style: solid;
margin: 20px;
display: inline-table;
}
<div class="all">
<div class="row">
<div class="column">
<table class="centered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="column">
<table class="centered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
<table class="centered">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
https://jsfiddle.net/pLccg6w3/
Not sure if this is what you were looking for but here is a fiddle I posted. I made table.centered float:left; and then added a .left and . right class for the first and third box and simply gave them a margin-top:100px;
https://jsfiddle.net/k9w7yt0f/1/
Related
I want to place two HTML tables besides each other, having one centered in the webpage and the other one centered within the right margin of the of the first table.
myTable is supposed to be centered and keypadTable is a smaller table in the right margin of myTable
Currently, myTable is not at the centre of the overall webpage and keypadTable is just floating as expected
Right now:
[ (center) (right)]
What I want:
(eg. (center) is 9space from each "[]" and (right) is 1space from (centre) and closing bracket
[ (center) (right) ]
<table id="keypadTable" style="float: right;width: 300px; height:
341px; background-color: rgb(204, 204, 204);" border="1" cellpadding="5" cellspacing="5">
<tbody align="center"> </tbody>
</table>
<table id="mytable" style="float:center; text-align: right; width: 1014px; height:
341px; background-color: rgb(204, 204, 204); margin-left: auto; margin-right:auto;" border="1" cellpadding="5" cellspacing="5">
you want to use flex. create another invisible element the same size as your right table to get the spacing to work.
.flex {
display: flex;
justify-content: space-evenly;
}
.hidden {
visibility: hidden;
}
<div class="flex">
<table class='hidden'>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</div>
I have a code that acts differently on Firefox and Chrome.
The behaviour I want is the one on Firefox. I want to reproduce it on Chrome without success.
In the following code, the idea is that the tr class="spacer" fills the remaining height below the the tr class="family" rows so they would be displayed at the top of the tr class="category" row.
On Chrome this is completely inconsistent...
.category th {
height: 200px;
background: red;
}
.family {
height: 70px;
background: blue;
}
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="category">
<th rowspan="3">Category 1</th>
</tr>
<tr class="family">
<td>Family 1</td>
<td>Many different things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="category">
<th rowspan="4">Category 2</th>
</tr>
<tr class="family">
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="family">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
I think the problem is how you structure your table but I have no solution using html tables.
I would rather use the css grid property. It needs a little bit more code but it provides in my Opinion more options a better responsiveness and so on.
I wrote down some code to display the same as you want with the tables. Of course you can modify the code to make it work more like you planned but it‘s a basic structure.
Html:
<div class="grid">
<div>Category</div>
<div>Family</div>
<div>Info</div>
<div class="first">
<div class="grid-category">Category 1</div>
<div class="family">Family 1</div>
<div class="family">Many different things</div>
</div>
<div class="second">
<div class="grid-category">Category 2</div>
<div class="family">Family 2</div>
<div class="family">Many different things</div>
<div class="family">Family 3</div>
<div class="family">Many different things</div>
</div>
</div>
Css:
.grid-category {
min-height: 200px;
background: red;
}
.family {
height: 70px;
background: blue;
}
.grid {
display: inline-grid;
grid-gap: 4px;
grid-template-columns: auto auto auto;
grid-template-rows: 16px auto auto;
}
.first,
.second {
display: grid;
grid-column: 1 / 4;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
}
.grid-category {
grid-row: 1 / 4;
}
According to this example https://www.w3schools.com/tags/att_td_rowspan.asp, I rewrite your code like this. Hope this help you.
<html>
<head>
<style>
.custom th {
height: 200px;
background: red;
}
.custom td {
height: 70px;
background: blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Category</th>
<th>Family</th>
<th>Info</th>
</tr>
<tr class="custom">
<th rowspan="3">Category 1</th>
<td>Family 1</td>
<td>Many different things</td>
</tr>
<!-- Add 2 spacer for enough 3 row because rowspan = 3 -->
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="custom">
<th rowspan="4">Category 2</th>
<td>Family 2</td>
<td>Other things</td>
</tr>
<tr class="custom">
<td>Family 3</td>
<td>Way more things</td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
<tr class="spacer">
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Is the first row of an HTML table with th tags meant to be row 0? Because if I style the table rows with
.t01 tr:nth-child(even) {
color: red;
}
.t01 tr:nth-child(odd) {
color: white;
}
both the first row and the second row have the text color white. But the second row should be red, because 2 is even.
Without your Code it's hard to help, it shoud work as it is.
My guess is, you are using <thead> and <tbody> which results in 2 containers holding <tr> tags. So the nth-child of <thead> is odd and the nth-child of <tbody> is odd too
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.container div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container p {
font-size: 8pt;
}
.t01 {
background-color: #3d3d3d;
}
.t01 tr:nth-child(even) {
color: red;
}
.t01 tr:nth-child(odd) {
color: white;
}
.t02 {
background-color: #3d3d3d;
}
.t02 tr:nth-child(even) {
color: red;
}
.t02 tr:nth-child(odd) {
color: white;
}
.t03 {
background-color: #3d3d3d;
}
.t03 thead tr:first-child {
color: red;
}
.t03 tbody tr:nth-child(even) {
color: red;
}
.t03 tbody tr:nth-child(odd) {
color: white;
}
<div class="container">
<div>
<table class="t01">
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<p>No <thead> & <tbody></p>
</div>
<div>
<table class="t02">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>With <thead> & <tbody></p>
</div>
<div>
<table class="t03">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
<p>Fix for <thead> & <tbody></p>
</div>
</div>
You may need to reset the browser data on you browser. Especially if you've been playing around with the CSS, this can cause the page to look off.
Yes, that is true, the first row of the HTML table starts at 0.
For example :
// We have a table containing 3 rows
<table id="myTable">
<tr>
<td>Row1 cell1</td>
</tr>
<tr>
<td>Row2 cell1</td>
</tr>
<tr>
<td>Row3 cell1</td>
</tr>
</table>
We are retrieving 0th row
alert(document.getElementById("myTable").rows[0].innerHTML);
Output of this will be:
Row1 Cell1
Given a table with a column that contains numbers, I'd like to position them in the center.
But, I'd like to right-align the numbers as well!
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Outputs:
Desired output:
Note: The table cell width should be constant (200px), regardless of the numbers. For example, if all numbers are 0, they all should be in the center of the table:
Also:
You are allowed to modify the content of the <td>s, but there should be one number per <tr>.
CSS only, please.
Updated based on an edit of the question and a few comments
In a comment you wrote "In the desired outcome, the cell width stays the same (200px) as numbers change".
In another comment you wrote "...my numbers are links and I want them to occupy the full cell width".
Given those requirements, the only CSS based solution I can find is, where one use CSS Table instead of <table> elements, an anchor a element displayed as table-row, making the full width clickable without adding an event handler, and for the centering, using pseudo elements to puch the numbers to the middle.
Stack snippet
.table {
display: table;
border: 1px solid black;
}
.tr {
display: table-row;
text-decoration: none;
color: black;
}
.tr span {
display: table-cell;
width: 200px;
}
a.tr {
text-align: right;
}
.tr::before, .tr::after {
content: '';
display: table-cell;
width: 50%;
}
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>45</span>
</a>
<a href="#2" class="tr">
<span>2</span>
</a>
<a href="#3" class="tr">
<span>18923538273</span>
</a>
<a href="#4" class="tr">
<span>9823</span>
</a>
</div>
</div>
<div class="table">
<div class="thead">
<span class="tr">
<span>Amount</span>
</span>
</div>
<div class="tbody">
<a href="#1" class="tr">
<span>0</span>
</a>
<a href="#2" class="tr">
<span>0</span>
</a>
<a href="#3" class="tr">
<span>0</span>
</a>
<a href="#4" class="tr">
<span>0</span>
</a>
</div>
</div>
_____________________________________________________________________________
This is my first answer, which I will leave, as there might be someone that can make use of it as is.
One simple way to accomplish that is to simply nest a table for the values, center it using auto margin and right align its td's content.
This way you will get pretty much the exact same behavior as with your original markup, but get a better control of the values alignment.
Stack snippet
table {
border: 1px solid black;
}
th {
width: 200px;
}
table table {
border: none;
margin: 0 auto;
}
table table td {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
<tr>
<td>0</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You can of course use div's instead of a table, displayed as inline block or inline flex column.
Inline block
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-block;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
Inline flex column
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td > div {
display: inline-flex;
flex-direction: column;
}
td > div > div {
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>45</div>
<div>2</div>
<div>18923538273</div>
<div>9823</div>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>
<div>0</div>
<div>0</div>
<div>0</div>
<div>0</div>
</div>
</td>
</tr>
</tbody>
</table>
TL;DR:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
... and adding an extra column before and after the existing one. jsFiddle here.
Initial answer:
Considering your markup,
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
... should do it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
border-left:7rem solid transparent;
border-right:7rem solid transparent;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Any other solution involves changing the markup (you need to add inner elements inside <td>s, give them smaller width than the <td>, and right align their text). You can do it by modifying the HTML source or on the fly, using JavaScript.
After a good number of tries, the only reliable solution I found (implying markup modification and no JavaScript), was to add additional columns in the table, relying on the table's ability to line up all the cells in a column.
I updated the snippet below so that the column occupies the minimum necessary width, based on most wide number and right-aligns all cells based on resulting width width. This means that when all values are 0, the entire row of values are centered. Here it is:
table {
border: 1px solid black;
width: 200px;
}
td {
text-align: right;
min-width: 10px;
}
td:first-child, td:last-child {
width: 50%;
}
/* just stacking tables side by side, not part of solution */
table {
float: left;
width: 200px;
margin-right: 7px;
}
body { overflow-y: hidden;}
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>45</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1234</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td></td><td>2</td><td></td>
</tr>
<tr>
<td></td><td>1</td><td></td>
</tr>
<tr>
<td></td><td>4</td><td></td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="3">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>44</td>
<td></td>
</tr>
<tr>
<td></td><td>0</td><td></td>
</tr>
<tr>
<td></td><td>1155</td><td></td>
</tr>
<tr>
<td></td><td>1234548775564</td><td></td>
</tr>
</tbody>
</table>
make text-align:right and padding-right:5emin td css selector
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 4em;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
<style>
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
float:right; <!--added this-->
margin-right:50px; <!-- and this-->
}
</style>
I added float:right in td
adjust the margin-right value to your desired value;
One option is to change the display property for td elements to block
You can then set a max-width to bring td elements to the center of tr elements.
Once that's done you set the text-align property to right for td elements to make the numbers start from the right hand side.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
display: block;
max-width: 70%;
text-align: right;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
Wrap your numbers with element(span) inside the td and add the text align right styles on it.
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: center;
}
td span {
width: 150px;
text-align: right;
background: beige;
display: inline-block;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>45</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>18923538273</span></td>
</tr>
<tr>
<td><span>9823</span></td>
</tr>
</tbody>
</table>
.table {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
background-color: red;
flex-direction: column;
}
div {
text-align: right;
}
<body>
<div class='table'>
<div>
<div>1</div>
<div>1111111</div>
<div>1111111111111</div>
</div>
</div>
</body>
text-align :right ----> pulls the text into right end
padding-right: 50% or padding-left : 50% ----> add space from the right or left to center
use 45 - 49 percentage in padding to make a crisp center alignment depends on your requirement
table {
border: 1px solid black;
}
th {
width: 200px;
}
td {
text-align: right;
padding-right: 50%;
}
<table>
<thead>
<tr>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>18923538273</td>
</tr>
<tr>
<td>9823</td>
</tr>
</tbody>
</table>
I've a table with caption centered middle. At the right side of the caption, there is a link with refers to another page for detailed view. If my link text is too large, then the caption middle alignment is broken, it is pushed left. All I want to keep the caption at the middle regardless of the placement of link. That means, caption should be middle aligned.
Problem Demo
<div class="col-xs-4">
<table class="table">
<caption>Table Caption<a class="detail-link">large link placed at right</a></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
/* CSS used here will be applied after bootstrap.css */
.detail-link {
float: right;
}
It can be done using a div tag combined with some relative positioning as seen below.
<div class="col-xs-4">
<table class="table">
<caption>Table Caption</caption>
<div style="position:relative;float:right;top:20px;">text too long</div>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
Positioning it as absolute will achieve your requirement.
.detail-link {
position:absolute;
right: 0;
width: 30%;
}
You could try this:
CSS:
.detail-link {
float:right;
width:30%;
}
span{
position:relative;
left:26px;
}
HTML:
<div class="col-xs-4">
<table class="table">
<caption><span>Table Caption</span><a class="detail-link">large links asfasf asf asdf as at right</a></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
span{position:relative;
left:26px;
}
you could do:
Table Caption also should float:right; and replace to after your link
CSS:
/* CSS used here will be applied after bootstrap.css */
.detail-link {
float: right;
}
span {
float:right;
margin-right:15px;
}
HTML:
<div class="col-xs-4">
<table class="table">
<caption><a class="detail-link">large link placed at right</a><span>Table Caption</span></caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</div>
i hope it's helpfull