Gaps in email template in Yahoo Mail - html
I am having a bit of trouble with a gap that appears only in IE (any version) and Yahoo Mail. I trying to create an email template with tables (with one nested table). As you can see in the image, there is a gap at the top and bottom of a TD that houses the header. If I try and view the HTML locally, I don't see the problem in IE so it's when it's inn Yahoo Mail that the issue is present. Other mail clients is fine.
Any help would be great.
Thanks
Screenshot of issue:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Email Template</title>
<style type="text/css">
body {
padding:0;
margin:0;
}
table {
margin:15px auto 50px auto;
}
td hr {
padding:0;
margin:10px;
background-color:rgb(0,13,221);
height:1px;
border:0;
}
td {
font-size:12px;
}
td p {
padding-top:7px;
}
td p a {
color:rgb(0,134,195);
}
td strong {
font-size:13px;
font-weight:900;
color:rgb(0,0,0);
}
.address {
margin-top:50px !important; !important;
font-size:11px;
color:rgb(79,83,87);
}
</style>
</head>
<body>
<table width="690" cellpadding="0" cellspacing="0" border="0" align="center" style="font-family:Arial, sans-serif">
<tr>
<td rowspan="5" width="20" valign="top">
<img src="#" width="25" height="538" style="background-color:blue;display:block" />
</td>
<td width="650">
<table width="650" border="0" cellpadding="0" cellspacing="0" style="margin:0">
<tbody>
<tr>
<td width="650" height="19" colspan="3" style="background-color:rgb(10,14,43)"></td>
</tr>
<tr style="background-color:rgb(10,13,44)">
<td height="1" width="3%"></td>
<td rowspan="49" width="7%">
<img src="#" width="192" height="72" style="background-color:blue;display:block" />
</td>
<td width="90%"></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,15,46)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,16,47)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,47)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="5"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,17,49)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,18,50)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,18,50)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,19,52)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,20,53)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,21,54)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,22,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,23,55)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,22,54)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,21,57)">
<td height="4"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,22,57)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,23,58)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,24,59)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,24,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,24,59)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,61)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,25,60)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,25,63)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,26,64)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,26,63)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,64)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(15,27,67)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,27,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,28,66)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,29,69)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,30,70)">
<td height="2"></td>
<td></td>
</tr>
<tr style="background-color:rgb(14,29,70)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(11,30,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(12,29,72)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,30,73)">
<td height="3"></td>
<td></td>
</tr>
<tr style="background-color:rgb(13,32,75)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(10,31,74)">
<td height="1"></td>
<td></td>
</tr>
<tr style="background-color:rgb(9,32,74)">
<td height="1"></td>
<td></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(10,31,74)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(11,32,77)"></td>
</tr>
<tr>
<td width="650" height="2" colspan="3" style="background-color:rgb(11,34,78)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(13,34,79)"></td>
</tr>
<tr>
<td width="650" height="1" colspan="3" style="background-color:rgb(12,35,79)"></td>
</tr>
</tbody>
</table>
</td>
<td rowspan="5" width="20" valign="top"><img src="#" width="25" height="538" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td width="650" valign="top">
<img src="#" width="650" height="10" style="background-color:blue;display:block" />
</td>
</tr>
<tr>
<td style="padding:0 10px 0 10px">
<p><strong>Headline</strong></p>
<p>Text Line 1</p>
<p>Text Line 2</p>
<p>Text Line 3 Link</p>
<p>Text Line 4</p>
<p></p>
<hr />
<p>Text Line 5</p>
<p style="margin-top:80px;font-size:11px;color:rgb(65,65,65);" class="address">Text Line 6</p>
</td>
</tr>
<tr>
<td align="center"><img src="#" width="626" height="68" style="background-color:blue;display:block" /></td>
</tr>
<tr>
<td align="right"><p>Text Line 7Link</p></td>
</tr>
</table>
</body>
I didn't test the email in any email clients BUT, i did find the problem occurring in firefox. Using firebug i corrected the problem by adding vertical-align:top on line 20 (the td style)
Just be aware that you may need to use inline styles as some email clients strip out stylesheets whether in the head or body of the document.
Here is a working version: http://jsfiddle.net/ypzA2/
Related
Making a table in HTML
What do you think should I do to make my code's output like in the photo? Thank you for answering. (I am typing any words in here because stackoverflow doesnt let me post this. This is the most detailed thing I can think of. I am new to the programming world and I have no one to assist me that's why I am asking for some help. Thank you for understanding.) Here's my code: <table border="1" cellpadding="20% " width="20%" cellspacing="0"> <tr> <td rowspan="10"></td> <td colspan="9"></td> </tr> <tr> <td rowspan="9"></td> <td colspan="8"></td> </tr> <tr> <td rowspan="8"></td> <td colspan="7"></td> </tr> <tr> <td rowspan="7"></td> <td colspan="6"></td> </tr> <tr> <td rowspan="6"></td> <td colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td colspan="4"></td> </tr> <tr> <td rowspan="4"></td> <td colspan="3"></td> </tr> <tr> <td rowspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td colspan="1"></td> </tr> <tr> <td rowspan="0"> </td> </tr> </table> enter image description here
make table inside td <td rowspan="0" style="padding: 0; border: none;"> <table border="1" cellpadding="10% " width="20%" cellspacing="0"> <tr> <td></td> <td></td> </tr><tr> <td></td> <td></td> </tr> </table> </td> <table border="1" cellpadding="20% " width="20%" cellspacing="0"> <tr> <td rowspan="10"></td> <td colspan="9"></td> </tr> <tr> <td rowspan="9"></td> <td colspan="8"></td> </tr> <tr> <td rowspan="8"></td> <td colspan="7"></td> </tr> <tr> <td rowspan="7"></td> <td colspan="6"></td> </tr> <tr> <td rowspan="6"></td> <td colspan="5"></td> </tr> <tr> <td rowspan="5"></td> <td colspan="4"></td> </tr> <tr> <td rowspan="4"></td> <td colspan="3"></td> </tr> <tr> <td rowspan="3"></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td colspan="1"></td> </tr> <tr> <td rowspan="0" style="padding: 0; border: none;"> <table border="1" cellpadding="10% " width="20%" cellspacing="0"> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </td> </tr> </table>
Set margin for every CSS page-break start
Pardon me for the title, i couldn't find more accurate description for it.
I'm breaking a long rows in a table into several pages.
Everything is ok with page-break-after for TR.
My only problem is, it starts at very beginning and ends at very bottom of a page making my header & footer covered with table data.
I tried putting margin and padding everywhere but none seems to work.
Below is my CSS,
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
Below is my HTML
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
Here is what it looks like when printing,
After intensive research on the net, i found that there is no proper way to do it. There is a discussion about #page rule that likely what i intended to achieve. Unfortunately it didn't work. I learned that this feature have not been implemented on most browser yet. I don't know which browser support it. Finally, i have came across some trick. THEAD and TFOOT are designed to repeat on print. So i put a blank row on the thead top, leaving an empty space every time it was repeated, just enough for the header to show up. And also an empty row below tfoot for footer area. Unfortunately, tfoot didn't repeat itself on chrome. IE and Firefox are ok.
If you have this kind of problems when after and before table start needs some extra space for other page footer, like this:
you can fix it this way:
<style>
#media print {
.table-breaked {
page-break-before: auto;
}
.no-border{
border: none !important;
}
.footer-repeat {
display: table-footer-group;
}
}
</style>
<div class="table-breaked">
<table class="pt-20">
<thead>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr>
<th class="text-center">Value 1<br/>№ Date</th>
<th class="text-center">Value 2</th>
<th class="text-center">Value 3</th>
<th class="text-center">Value 4</th>
<th class="text-center">Value 5</th>
</tr>
</thead>
<tbody>
<!-- more trs here -->
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</tbody>
<tfoot class="footer-repeat">
<!-- add repeated tfoot for extra space -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
</tfoot>
</table>
</div>
Here is a result:
You can use
#page{
size: A4;
margin-top: 50px;
margin-bottom: 50px;
}
Adding page-break-inside:avoid to the cells worked for me:
table td, table th {
page-break-inside: avoid;
}
I've been able to solve this for my use case by setting position: relative; top: 100px; on the top-most element.
Try this
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">11</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">12</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">13</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">14</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">15</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">16</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">17</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">18</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">19</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">20</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">21</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">22</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">23</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">24</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">25</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">26</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">27</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">28</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">29</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">30</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">31</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">32</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">33</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">34</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">35</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">36</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">37</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">38</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">39</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">40</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">41</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">42</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">43</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">44</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">45</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">46</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">47</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">48</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">49</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">50</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">51</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">52</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">53</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">54</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">55</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">56</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">57</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">58</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">59</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">60</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">61</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">62</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">63</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">64</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">65</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">66</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">67</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">68</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">69</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">70</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">71</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">72</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">73</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">74</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">75</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">76</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">77</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">78</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">79</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">80</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">81</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">82</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">83</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">84</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">85</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">86</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">87</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">88</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">89</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">90</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">91</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">92</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">93</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">94</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">95</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">96</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">97</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">98</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">99</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
HTML code of table with various row and column size
It seems easy but can't write the HTML code of the above table. Here is what I tried so far: <table border="1" style="border-collapse:collapse;" width="25%"> <tr> <td>col1</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table>
Sure you want html?? <table align="center" width="590" height="590" > <tr> <td align="center" height="80" colspan="4">central text</td> </tr> <tr> <td align="center" height="80" colspan="2">col</td> <td align="center" colspan="2">col</td> </tr> <tr> <td align="center" height="40">t</td> <td align="center" height="40">t</td> <td align="center" height="80" rowspan="2">t</td> <td align="center" rowspan="2">t</td> </tr> <tr> <td align="center" height="40">t</td> <td align="center" height="40">t</td> </tr> <tr> <td align="center" height="30">t</td> <td align="center" >t</td> <td align="center" >t</td> <td align="center" >t</td> </tr> </table> Like this?
colspan and rowspan was missing from your code. <table border="1" style="border-collapse: collapse;"> <tr> <td colspan=4 align="center">central text</td> </tr> <tr> <td colspan=2 align="center">col(1)</td> <td colspan=2 align="center">col(2)</td> </tr> <tr> <td align="center">text</td> <td align="center">text</td> <td rowspan=2 align="center">text</td> <td rowspan=2 align="center">text</td> </tr> </tr> <tr> <td align="center">text</td> <td align="center">text</td> </tr> <tr> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> <td align="center">text</td> </tr> </table>
How to code swirl like table in HTML?
See this: _____ __ |_____| | | |__|__| |__|_____| How to code it in HTML?
<table border="1"> <tr> <td colspan="2"> </td> <td rowspan="2"> </td> </tr> <tr> <td rowspan="2"> </td> <td> </td> </tr> <tr> <td colspan="2"> </td> </tr> </table>
Try this :-) <table> <tr> <td colspan=2>top left</td> <td rowspan=2>top right</td> </tr> <tr> <td rowspan=2>lower left</td> <td>center</td> </tr> <tr> <td colspan=2>lower right</td> </tr> </table> It produces
use colspan and rowspan, and set height and width. <table border=1 height=400 width=400> <tr> <td colspan=2>1</td> <td rowspan=2>3</td> </tr> <tr> <td rowspan=2>4</td> <td>5</td> </tr> <tr> <td colspan=2>8</td> </tr> </table>
http://jsfiddle.net/2b9K3/ <table> <tr> <td colspan="2"></td> <td rowspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> </tr> <tr> <td colspan="2"></td> </tr> </table>
This can be done pretty easily with rowspans and colspans.
How to reduce space between tr?
I am trying to replicate a page I have been given, and I have nearly finish, but I have a small problem with it.
The space between tr are too big. I have done it reducing the margin top and bottom but there is a point where rows overlap.
Does anybody have any suggestions?
e.g.
<style type="text/css">
.divContainer
{
margin:10px;
background-color:#C7D8EE;
border:2px solid #0076BF;
text-align:left;
}
.tableContainer
{
color:#0076BF;
margin: -10px 0px -10px 0px;
border-spacing: 10px;
empty-cells:show;
width:90%;
}
.tableContainer tr td{
white-space:nowrap;
}
.tableContainerRow2{
background-color:white;
border:2px solid #0076BF;
}
</style>
<div class="divContainer">
<table class="tableContainer" cellspacing="10px">
<tr>
<td>NHS Number</td>
<td> </td>
<td>Date of Visit</td>
<td> </td>
<td colspan="3">Care Time Started</td>
<td> </td>
<td> </td>
<td rowspan="2" style="font-weight:bold;vertical-align:middle;">Tick when<br/> care starts</td>
</tr>
<tr >
<td width="90" class="tableContainerRow2"> 0123456789</td>
<td > </td>
<td width="80" class="tableContainerRow2"> 12/12/09</td>
<td > </td>
<td width="40" class="tableContainerRow2"> 12</td>
<td width="5">:</td>
<td width="40" class="tableContainerRow2"> 10</td>
<td > </td>
<td style="text-align:right" > ☑</td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px" >
<tr>
<td></td>
<td>Initials</td>
<td>Surname</td>
</tr>
<tr>
<td width="80" style="font-weight:bold;">Midwife</td>
<td width="50" class="tableContainerRow2"> </td>
<td class="tableContainerRow2"> </td>
</tr>
<tr>
<td></td>
<td>Initials</td>
<td>Surname</td>
</tr>
<tr>
<td style="font-weight:bold;">Doctor</td>
<td class="tableContainerRow2"> </td>
<td class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px" >
<tr>
<td width="250">Forename</td>
<td>Surname</td>
</tr>
<tr>
<td class="tableContainerRow2"> </td>
<td class="tableContainerRow2"> </td>
</tr>
</table>
<table class="tableContainer" cellspacing="10px" >
<tr>
<td width="90">Date of Birth</td>
<td width="150"></td>
<td width="100">Casenote No:</td>
<td></td>
</tr>
<tr>
<td class="tableContainerRow2"> </td>
<td></td>
<td class="tableContainerRow2"> </td>
<td></td>
</tr>
</table>
</div>
Remove cellspacing="10px" from the <table> and use CSS only. You already have definied it with border-spacing: 10px;.