how can I put one table under another if I have used align for example.
center_table
left_table
desired_table
But I am getting following result
center_table
left_table desired_table
Here is my html code.
center_table
<table align="left">
<tr>
<td>left_table</td>
</tr>
</table>
<table align="center">
<tr>
<td>desired_table</td>
</tr>
</table>
Without using css only HTML
Just add a <div style = "clear:both;"></div> in between your two tables. It should work then
The clear property specifies which side(s) of an element other floating elements are not allowed.
You can find more detail of it here http://www.w3schools.com/cssref/pr_class_clear.asp
<table align="left">
<table align="left">
<tr>
<td>left_table</td>
</tr>
</table>
<div style="clear:both;"></div>
<table align="center">
<tr>
<td>desired_table</td>
</tr>
</table>
</table>
or
<table align="left">
<tr>
<td>left_table</td>
</tr>
</table>
<div style="clear:both;"></div>
<table align="center">
<tr>
<td>desired_table</td>
</tr>
</table>
For the left aligned table change the width to 100% and it will work.
<table align="center" >
<tr>
<td>left_table</td>
</tr>
</table>
<table align="left" width="100%">
<tr>
<td>left_table</td>
</tr>
</table>
<table align="center" >
<tr>
<td>desired_table</td>
</tr>
</table>
Result -> http://jsfiddle.net/0LtqL8yh/embedded/result/
<table border=1 width=80% height=30% align=left cellpadding=1 cellspacing=1>
<tr height=30%>
<td>First Row</td>
<td>First Row</td>
<td>First Row</td>
</tr>
<tr height=70%>
<td>Second Row</td>
<td>
<table bgcolor=yellow border=1 width=80% height=80% align="center">
<tr>
<td>Inner Table</td>
<td>Inner Table</td>
</tr>
<tr>
<td>Inner Table</td>
<td>Inner Table</td>
</tr>
</table>
</td>
<td>Second Row</td>
</tr>
</table>
Related
In this image two columns are spanned equal to three columns
How can I achieve this in my situation,
<table border="1">
<tr>
<td colspan="3">Top</td>
</tr>
<tr>
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="6">Top</td>
</tr>
<tr>
<td colspan="2">Left</td>
<td colspan="2">Center</td>
<td colspan="2">Right</td>
</tr>
<tr>
<td colspan="3">Left</td>
<td colspan="3">Right</td>
</tr>
</table>
I created an HTML page and I used table, but i have a problem in first TD on top and I get a empty space.
Demo.
My Table Style
<table width="100%">
<tbody>
<tr>
<td style="" width="25%">
<table cellspacing="0">
<tbody>
<tr>
<td>
<img src="/avatar/thumb/1479077526.png" style="width:200px; height:200px;">
</td>
</tr>
<tr>
<td><strong>und3rc00d3</strong>
</td>
</tr>
<tr>
<td>UserID: <strong>1</strong>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<br>
<div id="akt">
<div style="overflow-y:scroll; height:640px;">
<table>
<tbody>
<tr>
<th>Aktivitetet e fundit</th>
</tr>
<tr>
<td>............
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
For the first TD I tried to style with: position: absolute; but again it did not work http://prntscr.com/ddom11
Try adding style="vertical-align: top"; as in the code below
<table width="100%">
<tbody>
<tr>
<td style="vertical-align:top" width="25%">
<table cellspacing="0">
<tbody>
<tr>
<td><img src="/avatar/thumb/1479077526.png" style="width:200px; height:200px;"></td>
</tr>
<tr>
<td><strong>und3rc00d3</strong></td>
</tr>
<tr>
<td>UserID: <strong>1</strong></td>
</tr>
</tbody>
</table>
</td>
<td>
<br>
<div id="akt">
<div style="overflow-y:scroll; height:640px;">
<table>
<tbody>
<tr>
<th>Aktivitetet e fundit</th>
</tr>
<tr>
<td>............</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Below shows my HTML code & it's result.
<html>
<body>
<table width="75%">
<td>
<table width="99%" border="4">
<tr>
<th>NAME</th>
<th>AGE</th>
</tr>
<tr>
<td>Dilantha</td>
<td>30</td>
</tr>
<tr>
<td>Chamal</td>
<td>25</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
</tr>
</table>
</td>
<td>
<table width="99%" border="4">
<tr>
<th>NAME</th>
<th>YEAR</th>
</tr>
<tr>
<td>Jhon</td>
<td>2010</td>
</tr>
</table>
</td>
</table>
</body>
</html>
But I need to show below result. Please help me to complete my HTML code.
Thank you.
I think you are expecting the following one right?
<html>
<body>
<table width="75%">
<td>
<table width="99%" border="4">
<tr><th > NAME </th>
<th > AGE</th>
</tr>
<tr>
<td>Dilantha</td>
<td>30</td>
</tr>
<tr>
<td>Chamal</td>
<td>25</td>
</tr>
<tr>
<td>Rose</td>
<td>20</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table width="99%" border="4">
<tr><th > NAME </th>
<th>YEAR</th>
</tr>
<tr>
<td>Jhon</td>
<td>2010</td>
</tr>
</table>
</td>
</table>
</body>
</html>
Try this code:
DEMO
<td style='vertical-align: top;'>
How can I create a table like the above example in HTML and CSS.
I've tried the following:
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td style="width:100%">TEXT</td>
</tr>
but it won't work. Can anyone help?
You should use colspan for your second row. Like this :
<table>
<tr>
<td style="width:50%">TEXT</td>
<td style="width:50%">TEXT</td>
</tr>
<tr>
<td colspan="2" style="width:100%">TEXT</td>
</tr>
...
</table>
For learn -> HTML Colspan
<td>s have a colspan attribute that determine how many columns it should span over. You example has 2 columns to span, so your cleaned up code would look like this:
<table>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<!-- The important part is here -->
<td colspan="2">This will have 100% width by default</td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell 3 (Two columns)</td>
</tr>
</table>
colspan will help you. Link to more info.
I have a table like this (included bootstrap):
<table class="table table-hover">
<tbody>
<tr><td>Head1</td><td>content1.1</td></tr>
<tr><td></td><td>content1.2</td></tr>
<tr><td></td><td>content1.3</td></tr>
<tr><td>Head2</td><td>content2</td></tr>
<tr><td>Head3</td><td>content3</td></tr>
</tbody>
</table>
I want the table lines over the full width of it's container but the two cells with header and content should be centered.. I've tried to describe it in an image:
I cant upload the image here, so I've done it somewhere else:
I have shown only two rows (tr). You can add as many rows as you want.
HTML:
<table class="table table-hover">
<tbody>
<tr>
<td> </td>
<td>Head1</td>
<td>content1</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head2</td>
<td>content2</td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
table.table.table-hover{ width:100%; }
table.table.table-hover tr td{ width:25% }
DEMO
Hope you will find this useful :)
Please check this also according to your image
<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="wid2"> </td>
<td class="wid1">Head1</td>
<td class="wid1">content1.1</td>
<td class="wid2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>content1.2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>content1.3</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head2</td>
<td>content2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Head3</td>
<td>content3</td>
<td> </td>
</tr>
</tbody>
</table>
and this is css
table.table tr td{border-bottom:1px solid #000;}
.wid1{width:20%;}
.wid2{width:30%;}
Here is the code you can try this let me know if you have any issue
css
.wid50{width:50%;}
<table class="table table-hover" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="wid50">Head1</td>
<td class="wid50">content1.1</td>
</tr>
<tr>
<td> </td>
<td>content1.2</td>
</tr>
<tr>
<td> </td>
<td>content1.3</td>
</tr>
<tr>
<td>Head2</td>
<td>content2</td>
</tr>
<tr>
<td>Head3</td>
<td>content3</td>
</tr>
</tbody>
</table>