- 1
How to add an image next to a table border?
When i finished my table border. I cant seem to add any text next to the table. it looks like this <table> <tr> <td> This is </td> <td> a table </td> </tr> </table> <img src="img.jpg" length="50" weight="50" alt=""> The image seprates?
4 Answers
+ 1
Maybe you mean this
https://code.sololearn.com/WV5sybqedJjr/?ref=app
+ 1
@ Visph / Thanks! ill try to adjust this! ill double check!
@elie Douaihy / yes. thanks so much. just how i imagined. to bad there isnt html version of css!
0
Default display mode of <table> is equivalent of block: basically, you need to modify this behaviour in any way:
Depening of your goal, you could use "float:right;" on <img> css style rules, and move the <img> tag before the <table>, or use "display:inline-block;" on the <table> css style rules... or even put the <table> and <img> element in containers styled to layout them as you want... as example, put your content inside another parent table (however, that's unadvised to use semantical <table> element to handle layout ^^):
<table><tr>
<td>
<table>
<tr>
<td> This is </td>
<td> a table </td>
</tr>
</table>
</td>
<td>
<img src="img.jpg" length="50" weight="50" alt="">
</td>
</tr></table>
However, that's unadvised to use semantical <table> element to handle layout, so it's recommanded to rather do:
<div id="layout">
<div class="cell-layout">
<table>
<tr>
<td> This is </td>
<td> a table </td>
</tr>
</table>
</div>
<div class="cell-layout">
<img src="img.jpg" length="50" weight="50" alt="">
</div>
</div>
<style>
#layout {
display:table;
}
#cell-layout {
display:table-cell;
}
</style>
0
okay! i have fixed
<table>
<tr>
<td> Table 1 </td>
</tr>
<tr>
<td> Table 2 </td>
</tr>
<table>
<img id="pic" src="img jpg"/>
css
#pic { postion: absolute
margin left:60%
}