I've spent some time figuring out how to do this, and I figured out I'm really not good at html tables..
Need help how to actually do this.
Here is my base code I'm stuck with, No need for the table header
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="3">
Physical Accomplishment
</td>
<td>Projected</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Actual</td>
<td>Weekly Cumulative</td>
</tr>
<tr>
<td>Slippage</td>
<td>Weekly Cumulative</td>
</tr>
</tbody>
</table>
Here's what I'm aiming for:
Use rowspan 6 for the first column and rowspan 2 for the second and third column
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I use LibreOffice to draw out the table, then export the HTML to produce this:
<table border="1" width="100%" height="300px">
<tr>
<td rowspan=6>Physical Accomplishment</td>
<td rowspan=2>Projected</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td rowspan=2>Actual</td>
<td rowspan=2>Weekly cumulative</td>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>I</td>
</tr>
<tr>
<td rowspan=2>Slippage</td>
<td rowspan=2>Weekly cumulative</td>
<td>0.15%</td>
<td>0.15%</td>
<td>0.15%</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
</tr>
</table>
You need to learn these 2 important attributes in HTML table, rowspan= and colspan=.
Please find this link for tutorial Tutorial link.
For now this what you need...
<table border="1" width="100%" height="300px">
<tbody>
<tr>
<td rowspan="6">
Physical Accomplishment
</td>
<td rowspan="2">Projected</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Actual</td>
<td rowspan="2">Weekly Cumulative</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2">Slippage</td>
<td rowspan="2">Weekly Cumulative</td>
<td>10%</td>
<td>20%</td>
<td>30%</td>
<td>40%</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Related
I have a table which looks like this:
I'm looking for a semantically meaningful representation for it. I am NOT looking to get the same visualization.
What I struggle with are those two groups "Other operating charges" and "Financial income and expenses". How can I group elements within HTML?
My best try
<table>
<thead>
<tr>
<th>Profit and Loss Account</th>
<th>01.01.-31.12.2018</th>
<th>01.01.-31.12.2017</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Net Turnover</strong></td>
<td>1234567.89</td>
<td>12456.78</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Other operating charges</td>
<td></td>
<td></td>
</tr>
<tr>
<td> Management fee</td>
<td>-12345.56</td>
<td>-54321.00</td>
</tr>
<tr>
<td> Other operating charges</td>
<td>-1234.50</td>
<td>-1234.12</td>
</tr>
<tr>
<td></td>
<td>1220987.73</td>
<td>-43098.34</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><strong>Operating Profit (Loss)</strong></td>
<td>5 700 000,00</td>
<td>2 100 000,00</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Financial income and expenses</td>
<td></td>
<td></td>
</tr>
<tr>
<td> Reduction in value of investments held as non-current assets</td>
<td>-3000000.00</td>
<td>-400000.00</td>
</tr>
<tr>
<td> Other financial income and expenses</td>
<td>-12 000,00</td>
<td>-18 000,00</td>
</tr>
<tr>
<td></td>
<td>-3012000.00</td>
<td>-418000.00</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Profit (loss) for the period</strong></td>
<td><strong>2 688 000,00</strong></td>
<td><strong>1 682 000,00</strong></td>
</tr>
</tfoot>
</table>
How can I merge row and column as the figure blow in HTML?
After trying many times, I found the solution.
<table border="1">
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Province</td>
<td colspan="2">Level</td>
<td>Other</td>
</tr>
<tr>
<td colspan="2">XL</td>
<td></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>001</td>
<td>Province #1</td>
<td>5</td>
<td>9</td>
<td></td>
</tr>
<tr>
<td>002</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
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>
I have to create table similar to this
so I've created following table structure in HTML
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2" rowspan="4">left box</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr>
<td colspan="2" rowspan="5">right box</td>
</tr>
</tbody>
The structure is simplified to show only general problem. Left box is working fine, but right is not.
Demo with only left: http://jsfiddle.net/rfDms/2/
Demo with left and right: http://jsfiddle.net/rfDms/
How to make similar table?
http://jsfiddle.net/AaGJ8/
<table width=100% border=1 class="table table-bordered">
<tbody>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td colspan="2" rowspan="4">box</td>
<td>asd</td>
<td>asd</td>
<td>asd</td>
<td colspan="2" rowspan="4">box</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
<tr>
<td>asd</td>
<td>asd</td>
<td>asd</td>
</tr>
</tbody>
jsFiddle example
<table style="width: 100%">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2" rowspan="5"></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="5"></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></td>
<td></td>
<td></td>
</tr>
</table>
I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/
Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>
Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>
Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>
<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...