How can I semantically represent groups of table cells? - html

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>

Related

Multiple rows in a td

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>

How can I merge row and column in HTML as the picture below?

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>

Create table html as the image

https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together
td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

how to change width of <th> without affecting <td> width

I have here 2 photos. 1 is my HTML page and the other one is my print page.
My question is, how am I going to make my print page the same as my html page? As you can see, the print page is less wide than the HTML page.
Also, I want to ask how am I going to make the width of <th> longer without affecting the width of <td>? Is that possible?
Sorry, I don't have that much knowledge in CSS.
Print Page
HTML Page
and here is my code:
<table width="100%" border="1">
<tr>
<th align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
To get a nice print page width use media queries for example:
#media print {
#page {
margin: 30mm;
size:297mm 210mm;
}
}
Or use diffent stylesheets with different widths in stead of the same 100%
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
<link href="style_print.css" rel="stylesheet" type="text/css" media="print">
And in the style.css add:
table {width:100%}
And in style_print.css add:
table {width:297mm}
Play with the widths untill you are happy in both ;)
Here are some great posts on how to set up CSS for printing:
https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/
https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
Just add colspan="6" to your th to set the correct width of your first cell.
<table width="100%" border="1">
<tr>
<th colspan="6" align="left" width="20%">II. Documentation</th>
</tr>
<tr>
<td align="center">Subject Routine</td>
<td width="20%" align="center">Person-in-charge</td>
<td width="15%" align="center">Complied</td>
<td width="10%" align="center">Date</td>
<td width="17%" align="center">Remarks</td>
<td align="center">Signature</td>
</tr>
<tr>
<td>1. Travel Documents</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2. National License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3. NAC Certificates/MARINA COP</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4. Medical</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5. POEA / AMOSUP Contracts</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6. Flag License</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7. US Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8. Joining Port Visa</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9. Other Certificate</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Tip: When I don't know what my html elements are doing I give them a border so I can see how they are behaving. In this case you don't have the same amount of <th> cells as <td> cells - just add a colspan=6 ( the same number of cells you have ) and your <th> cell will span across the whole table:
<tr>
<th colspan="6" align="left">II. Documentation</th>
</tr>
also you don't require the width unless you are trying to wrap the text ( but it sounds like you aren't. ) ...
oh, nevermind... answered above

How to structure html table

I'm trying to make a table that looks like the picture but i can't figure it out... This must be so easy question for you but I'm having trouble making this one work... can anyone help me? Please.
here is my current code for it:
<table width="100%" border="1">
<tr>
<th>Name of Candidates</th>
<th>Educational Attainment</th>
<th>Exprerience</th>
<th>In-Service Trainings & Seminars Attended</th>
<th>Eligibility</th>
<th>Other Qualifications</th>
<th>Interview</th>
<th>Total</th>
<th>Remarks</th>
</tr>
</table>
Use a combination of rowspan and colspan
example
The first row will contain all the cells that takes 2 rows and 1 cell that spreads on 4 columns (gray background on the example). The second row will contain the 4 cells under the cell that spreads on 4 cells.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
<td colspan="7" rowspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Its good helper for dificult table generator.
http://html-tables.com/
Use colspan to increase width of a cell:
colspan="4"
Documentation colspan
Use rowspan to increase height of a cell:
rowspan="2"
Documentation rowspan
Here you go, use colspan to span multiple columns.
<table widtd="100%" border="1">
<tr>
<td>Name of Candidates</td>
<td colspan="4">Educational Attainment</td>
<td>Otder Qualifications</td>
<td>Interview</td>
<td>Total</td>
<td>Remarks</td>
</tr>
<tr>
<td>Name of Candidates</td>
<td>Educational Attainment</td>
<td>Exprerience</td>
<td>In-Service Trainings & Seminars Attended</td>
<td>Eligibility</td>
<td>Otder Qualifications</td>
<td>Interview</td>
<td>Total</td>
<td>Remarks</td>
</tr>
</table>
Similarly you could use rowspan for span multiple rows.