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>
Related
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>
I have a problem with writing a proper code for my table. Using the table feature in Dreamweaver it does help but when it comes on styling a single column or a row with CSS I see that my code is not properly written. For example if I want to style the first column I have to add class to each tr element. So I need your advice on how my table could be written in a more tidier way.
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe3">title</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr class="qwe1">
<td>1</td>
</tr>
<tr class="qwe1">
<td>2</td>
</tr>
<tr class="qwe1">
<td>3</td>
</tr>
<tr class="qwe1">
<td>4</td>
</tr>
<tr class="qwe1">
<td>5</td>
</tr>
<tr class="qwe1">
<td>6</td>
</tr>
<tr class="qwe1">
<td>7</td>
</tr>
<tr class="qwe1">
<td>8</td>
</tr>
<tr class="qwe1">
<td>9</td>
</tr>
<tr class="qwe1">
<td>10</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
You can see my code live here: http://codepen.io/mariomez/pen/XJqwYy
Ps: I don't want you to write the whole code or something just some tips on what things I should change in my code. :)
First of all, I'd say write just a single table instead of the tables per column you have right now. You can still keep the big title with red background using <td colspan="8">title</td> for that cell.
Once you have this single cleaned table you can use :first-child to select only the first tds inside a row, excepy maybe the main header. Then unleash your CSS magic.
I included a snippet doing just that here.
EDIT: Improved snippet here.
You don't need nested tables! Use colspan and rowspan to achieve desired output.
This is a great starting point to learn table element: complete guide table element.
This is a quick edit of your code: codepen.
Notice how I used colspan for the first row:
<td colspan="8" class="qwe3">title</td>
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>