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>
Related
Hi working to create a newsletter template. At the moment I am stuck as i am unable to change the alignment of the td
I have attached a CodePen, but below is the code! Firstly I don't understand why the elements on the right are aligned left-center? Eitherway I need them to be top-center. Any ideas?
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td>
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
Mind you this is for a newsletter template so think web 1998, most of the fancy web stuff is not usefull here!
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top; text-align:center">
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
You have put align="center" in the td tag.
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td align="center" >
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<table width="393px" align="center">
<tr>
<td align="center" >
name
</td>
</tr>
<tr>
<td align="center" >
country
</td>
</tr>
<tr>
<td align="center" >text</td>
</tr>
</table>
</td>
</tr>
</table>
I'm editing a web page and i need to create two tables similar to the screenshot attached. Relatively new to html. My code is below. JFiddle for reference as to how it looks currently. https://jsfiddle.net/u97rggyy/
Thanks in advance.
<div id="tabs-container">
<h2>
<table style="width: 100%; text-align:center">
<tbody>
<tr>
<th>
<span>First header links</span></th>
<th>
<span>Other Links</span></th>
</tr>
</tbody>
</table>
</h2>
<div class="link-item">
<table style="width: 50%;">
<tbody style="font-family: segoe ui;">
<tr>
<td>
Link 1 </td>
<td>
<a href="" >Link 2</a> </td>
</tr>
<tr>
<td>
Link 3</td>
<td>
Link 4 </td>
</tr>
</tbody>
</table>
</div>
<table style="display:inline">
<tbody>
<tr>
<td>
Other Link 1
</td>
<td>
Other link 2
</td>
</tr>
</tbody>
</table>
Two tables with separate headings
Would you consider doing it all in one table like this: https://jsfiddle.net/u97rggyy/3/
<table style="width:100%">
<tr>
<th colspan="2"><h2>First header links</h2></th>
<th colspan="2"><h2>Other Links</h2></th>
</tr>
<tr>
<td style="text-align: left;">Link 1</td>
<td style="text-align: right; padding-right: 20px">Link 2</td>
<td style="text-align: left;">Other Link 1</td>
<td style="text-align: right; padding-right: 20px">Other Link 2</td>
</tr>
<tr>
<td style="text-align: left; ">Link 3</td>
<td style="text-align: right; padding-right: 20px">Link 4</td>
<td style="text-align: left;">Other Link 3</td>
<td style="text-align: right; padding-right: 20px">Other Link 4</td>
</tr>
<tr>
<td style="text-align: left;">Link 5</td>
<td style="text-align: right; padding-right: 20px">Link 6</td>
</tr>
</table>
you mean like this?
jsFiddle
<div id="tabs-container">
<table style="text-align:center;display:inline-block;width:30%;">
<tbody>
<tr>
<th colspan="2">HEADER 1</th>
</tr>
<tr>
<td>
Link 1
</td>
<td>
Link 2
</td>
</tr>
<tr>
<td>
Link 3
</td>
<td>
Link 4
</td>
</tr>
<tr>
<td>
Link 5
</td>
<td>
Link 6
</td>
</tr>
<tr>
<td>
Link 7
</td>
<td>
Link 8
</td>
</tr>
</tbody>
</table>
<table style="text-align:center;display:inline-block;width:30%;">
<tbody>
<tr>
<th colspan="2">HEADER 2</th>
</tr>
<tr>
<td>
Other Link 1
</td>
<td>
Other Link 2
</td>
</tr>
<tr>
<td>
Other Link 3
</td>
<td>
Other Link 4
</td>
</tr>
</tbody>
</table>
</div>
One way of doing it is:
<div id="tabs-container">
<h2>
<table style="width: 100%; text-align:center; border:1px solid black;">
<tbody>
<tr>
<th>
<span>First header links</span></th>
<th>
<span>Other Links</span></th>
</tr>
</tbody>
</table>
</h2>
<div class="link-item" style="float:left;">
<table style="width: 50%;">
<tbody style="font-family: segoe ui;">
<tr>
<td>
Link 1 </td>
<td>
Link 2 </td>
</tr>
<tr>
<td>
Link 3</td>
<td>
Link 4 </td>
</tr>
</tbody>
</table>
</div>
<div style="float:right;">
<table style="display:inline;border:1px solid black;">
<tbody>
<tr>
<td>
Other Link 1
</td>
<td>
Other link 2
</td>
</tr>
</tbody>
</table>
</div>
</div>
2nd way: Define one parent table and put these tables in cells of the parent table
<table style="width:100%;border:1px solid black;">
<tr><td colspan="2">
<table style="width:100%;border:1px solid black;">
<tr>
<td>First Header Links</td><td>Other Links</td>
</tr>
</table>
</td>
</tr>
<tr >
<td >
<table style="width:100%;border:1px solid black;">
<tr><td>1</td>
<td>2</td></tr>
</table>
</td>
<td >
<table table style="width:100%;border:1px solid black;">
<tr><td>3</td></tr>
<tr><td>4</td></tr>
</table>
</td>
</tr>
</table>
</table>
Ok, so, I have this simple HTML with DIVS, and tables inside those DIVS. I want them to be next to each other so I used CSS float. I can't remove the gap between the tables, and I want them to be separated just as they are.
Any ideas?
#charset "utf-8";
/* CSS Document */
div {
float: left;
}
<div>
<div>
<table width="328" height="450" border="0">
<tr>
<td colspan="3" height="41"> </td>
</tr>
<tr>
<td colspan="3">Custo benefício</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Intermediário</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Alto Desempenho</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" height="8">RODAPE</td>
</tr>
</table>
</div>
<div>
<table width="226" height="450" border="0">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div>
<table width="163" height="450" border="0">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Viseiras e reparos</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Motoclubes</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div>
<table width="263" height="450" border="0">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
</div>
Here is how it looks:
ScreenShot
Try adding
cellpadding="0" cellspacing="0"
to all of your table tags. This should remove any small spaces you might be having. It should look something like this:
<table width="328" height="450" border="0" cellpadding="0" cellspacing="0">
Here's a fiddle: http://jsfiddle.net/54aq3p86/
(I added a border in the fiddle so you could tell where the border's are)
Take a look At these code I just change the inline div style.
And Make the table border 1px to visible
Untitled Document
<body>
<div>
<div style="float:left">
<table width="328" height="450" border="1px">
<tr>
<td colspan="3" height="41"> </td>
</tr>
<tr>
<td colspan="3">Custo benefício</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Intermediário</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Alto Desempenho</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="226" height="450" border="1px">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="163" height="450" border="1px">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Viseiras e reparos</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Motoclubes</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="263" height="450" border="1px">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="clear:both"></div>
</body>
</html>
Im guessing you only want to remove those two gaps right!?, not the ones provided by the cells!
here is a jsfiddle for you.
http://jsfiddle.net/4gLm20zq/1/1
Just add the cellpadding and cellspacing table atributes, just like I did in the jsfiddle example. I also added a class name to each div except for the main parent div. and added some new css rules. Give it a try and let me know if this works for you.
Here is the CSS
<style>
div.column {
float: left;
}
div.column:nth-child(even) {
margin: 0px -2px;
}
td {
background-color: #CCC;
}
</style>
And here is the html
<div>
<div class="column">
<table width="328" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td colspan="3" height="41"> </td>
</tr>
<tr>
<td colspan="3">Custo benefício</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Intermediário</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Alto Desempenho</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" height="8">RODAPE</td>
</tr>
</table>
</div><div class="column">
<table width="226" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div><div class="column">
<table width="163" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Viseiras e reparos</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Motoclubes</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div><div class="column">
<table width="263" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
</div>
I have designed a email template but I am facing alignment issue on iPhone 5 and yahoomail .The contents could not be aligned to center. I am using reply manager to send email template.
Heres my code :
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/brochure.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Handing out brochures is a very cost-effective way to advertise your brand.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End Image 1 -->
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/imggz2.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Wow clients by using an animated logo for your website or email.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 2 -->
</tbody>
</table>
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/invite.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Promoting events means attracting people. You need attractive designs!</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 3 -->
</tbody>
</table>
<!-- 3Column ends --><!--1 img starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="10" cellspacing="10" style="width:600px">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/moreinfo.jpg" style="width:60%" /></td>
</tr>
</tbody>
</table>
<!--1 img ends--><!--clients logo starts--><!--1 img ends--><!--clients logo starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_all.jpg" style="width:600px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_microsoft.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_gilette.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_oreck.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_whirlpool.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_bluething.jpg" style="height:37px; width:98px" /></td>
<td dir="rtl"><img src="http://websamplenow.com/129/ems1/images/fc_oprah.jpg" style="height:37px; width:126px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
The button 3 boxes are not aligned to center.
Can anyone help me to solve it out?
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>