How to structure html table - html

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.

Related

How can I semantically represent groups of table cells?

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>

Add a two column above div but that column and div should not have gap

In div class background color is black, My question is make a two column in anyway so that the div class of horizontal line should not have gap while making a column.
Suppose i create a two column first and after i make a div class, the output will be shown the gap between column and div , I don't want that gap
<div class="right-div" style="background-color:black">
<table border="2px" style="background-color:red">
<tr>
<th bgcolor="#339A99"><font color="white">S.NO</font></th>
<th bgcolor="#339A99"><font color="white">Course</font></th>
<th bgcolor="#339A99"><font color="white">Duration</font></th>
<th bgcolor="#339A99"><font color="white">Credit Hours</font></th>
<th bgcolor="#339A99"><font color="white">No. Of Learners</font></th>
<th bgcolor="#339A99"><font color="white">Action</font></th>
</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>
</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>
</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>
</tr>
</table>
</div>

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>

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

Copy table data from web page to excel sheet

I am using excel macros to copy calculation result data from a online intranet web calculation website.
For that calculation I have to add many data to webpage. I used macros to automate data entry to webpage and finally I can reach to result page. The calculation result is in tabular form. Now I want to copy that result data to excel sheet in tabular form.
I tried web query but that doesn't work as result web page cannot be loaded directly by just address.
Following is the source of html table I want to extract.
<P>
<BR>
<TABLE width="80%">
<TR>
<TD bgcolor="#ffffff" align="center"><b>Life Calculation Result</b>
</TD>
</TR>
</TABLE>
<P>
<TABLE cellspacing="1" cellpadding="0">
<TR align="center">
<TH colspan="6"></TH>
<TH colspan="3" align="center">--- Inboard ---</TH>
<TH></TH>
<TH colspan="3" align="center">--- outboard ---</TH>
<TH></TH>
<TH colspan="3" align="center">--- System ---</TH>
</TR>
<TR align="center">
<TH>No.</TH>
<TH width="10"></TH>
<TH>Displacement</TH>
<TH width="10"></TH>
<TH>Preload</TH>
<TH width="10"></TH>
<TH>Running
<BR>Distance</TH>
<TH width="10"></TH>
<TH>Total
<BR>Number of
<BR>Revolutions</TH>
<TH width="10"></TH>
<TH>Running
<BR>Distance</TH>
<TH width="10"></TH>
<TH>Total
<BR>Number of
<BR>Revolutions</TH>
<TH width="10"></TH>
<TH>Running
<BR>Distance</TH>
<TH width="10"></TH>
<TH>Total
<BR>Number of
<BR>Revolutions</TH>
</TR>
<TR align="center">
<TH></TH>
<TH></TH>
<TH>[mm]</TH>
<TH></TH>
<TH>[N]</TH>
<TH></TH>
<TH>[10<sup><font size="-1">4<font></sup>km]</TH>
<TH></TH>
<TH>[10<sup><font size="-1">6<font></sup>rev.]</TH>
<TH></TH>
<TH>[10<sup><font size="-1">4<font></sup>km]</TH>
<TH></TH>
<TH>[10<sup><font size="-1">6<font></sup>rev.]</TH>
<TH></TH>
<TH>[10<sup><font size="-1">4<font></sup>km]</TH>
<TH></TH>
<TH>[10<sup><font size="-1">6<font></sup>rev.]</TH>
</TR>
<TR align="right">
<TH>(1)</TH>
<TD></TD>
<TD>0.594874</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD>3.492e+004</TD>
<TD></TD>
<TD>1.705e+005</TD>
<TD></TD>
<TD>9.796e+004</TD>
<TD></TD>
<TD>4.782e+005</TD>
<TD></TD>
<TD>2.710e+004</TD>
<TD></TD>
<TD>1.323e+005</TD>
</TR>
<TR align="right">
<TH>(2)</TH>
<TD></TD>
<TD>0.604874</TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD>4.001e+004</TD>
<TD></TD>
<TD>1.953e+005</TD>
<TD></TD>
<TD>1.033e+005</TD>
<TD></TD>
<TD>5.045e+005</TD>
<TD></TD>
<TD>3.042e+004</TD>
<TD></TD>
<TD>1.485e+005</TD>
</TR>
<TR align="right">
<TH>(3)</TH>
<TD></TD>
<TD>0.614874</TD>
<TD></TD>
<TD>0.00</TD>
<TD></TD>
<TD>4.751e+004</TD>
<TD></TD>
<TD>2.320e+005</TD>
<TD></TD>
<TD>1.088e+005</TD>
<TD></TD>
<TD>5.314e+005</TD>
<TD></TD>
<TD>3.495e+004</TD>
<TD></TD>
<TD>1.706e+005</TD>
</TR>
<TR align="right">
<TH>(4)</TH>
<TD></TD>
<TD>0.630867</TD>
<TD></TD>
<TD>1000.00</TD>
<TD></TD>
<TD>3.003e+004</TD>
<TD></TD>
<TD>1.466e+005</TD>
<TD></TD>
<TD>3.941e+004</TD>
<TD></TD>
<TD>1.924e+005</TD>
<TD></TD>
<TD>1.813e+004</TD>
<TD></TD>
<TD>8.854e+004</TD>
</TR>
<TR align="right">
<TH>(5)</TH>
<TD></TD>
<TD>0.639982</TD>
<TD></TD>
<TD>2000.00</TD>
<TD></TD>
<TD>7.425e+003</TD>
<TD></TD>
<TD>3.625e+004</TD>
<TD></TD>
<TD>7.893e+003</TD>
<TD></TD>
<TD>3.853e+004</TD>
<TD></TD>
<TD>4.075e+003</TD>
<TD></TD>
<TD>1.989e+004</TD>
</TR>
<TR align="right">
<TH>(6)</TH>
<TD></TD>
<TD>0.647481</TD>
<TD></TD>
<TD>3000.00</TD>
<TD></TD>
<TD>2.523e+003</TD>
<TD></TD>
<TD>1.232e+004</TD>
<TD></TD>
<TD>2.592e+003</TD>
<TD></TD>
<TD>1.266e+004</TD>
<TD></TD>
<TD>1.362e+003</TD>
<TD></TD>
<TD>6.648e+003</TD>
</TR>
<TR align="right">
<TH>(7)</TH>
<TD></TD>
<TD>0.654070</TD>
<TD></TD>
<TD>4000.00</TD>
<TD></TD>
<TD>1.131e+003</TD>
<TD></TD>
<TD>5.521e+003</TD>
<TD></TD>
<TD>1.148e+003</TD>
<TD></TD>
<TD>5.605e+003</TD>
<TD></TD>
<TD>6.068e+002</TD>
<TD></TD>
<TD>2.962e+003</TD>
</TR>
<TR align="right">
<TH>(8)</TH>
<TD></TD>
<TD>0.660043</TD>
<TD></TD>
<TD>5000.00</TD>
<TD></TD>
<TD>6.007e+002</TD>
<TD></TD>
<TD>2.933e+003</TD>
<TD></TD>
<TD>6.065e+002</TD>
<TD></TD>
<TD>2.961e+003</TD>
<TD></TD>
<TD>3.214e+002</TD>
<TD></TD>
<TD>1.569e+003</TD>
</TR>
<TR align="right">
<TH>(9)</TH>
<TD></TD>
<TD>0.665559</TD>
<TD></TD>
<TD>6000.00</TD>
<TD></TD>
<TD>3.570e+002</TD>
<TD></TD>
<TD>1.743e+003</TD>
<TD></TD>
<TD>3.593e+002</TD>
<TD></TD>
<TD>1.754e+003</TD>
<TD></TD>
<TD>1.907e+002</TD>
<TD></TD>
<TD>9.311e+002</TD>
</TR>
<TR align="right">
<TH>(10)</TH>
<TD></TD>
<TD>0.670717</TD>
<TD></TD>
<TD>7000.00</TD>
<TD></TD>
<TD>2.296e+002</TD>
<TD></TD>
<TD>1.121e+003</TD>
<TD></TD>
<TD>2.307e+002</TD>
<TD></TD>
<TD>1.126e+003</TD>
<TD></TD>
<TD>1.226e+002</TD>
<TD></TD>
<TD>5.983e+002</TD>
</TR>
<TR align="right">
<TH>(11)</TH>
<TD></TD>
<TD>0.675584</TD>
<TD></TD>
<TD>8000.00</TD>
<TD></TD>
<TD>1.566e+002</TD>
<TD></TD>
<TD>7.646e+002</TD>
<TD></TD>
<TD>1.571e+002</TD>
<TD></TD>
<TD>7.671e+002</TD>
<TD></TD>
<TD>8.354e+001</TD>
<TD></TD>
<TD>4.078e+002</TD>
</TR>
<TR align="right">
<TH>(12)</TH>
<TD></TD>
<TD>0.680208</TD>
<TD></TD>
<TD>9000.00</TD>
<TD></TD>
<TD>1.117e+002</TD>
<TD></TD>
<TD>5.455e+002</TD>
<TD></TD>
<TD>1.120e+002</TD>
<TD></TD>
<TD>5.469e+002</TD>
<TD></TD>
<TD>5.958e+001</TD>
<TD></TD>
<TD>2.909e+002</TD>
</TR>
<TR align="right">
<TH>(13)</TH>
<TD></TD>
<TD>0.684622</TD>
<TD></TD>
<TD>10000.00</TD>
<TD></TD>
<TD>8.262e+001</TD>
<TD></TD>
<TD>4.034e+002</TD>
<TD></TD>
<TD>8.278e+001</TD>
<TD></TD>
<TD>4.042e+002</TD>
<TD></TD>
<TD>4.404e+001</TD>
<TD></TD>
<TD>2.150e+002</TD>
</TR>
</TABLE>

Copy your code as it is from the
<table> ... </table>
tag.
Then switch to Excel, pick a cell and press Command-v or use Edit > Paste. Excel knows HTML tables and will format the table just right.

Without an URL it is guesswork.
You can get all the TABLE tag elements with, say using internet explorer browser to scrape,
IE.document.getElementsByTagName("TABLE")
You then select a particular table by index; Let's say index 0 i.e. the first table in the collection.
IE.document.getElementsByTagName("TABLE")(0)
If you have added references (VBE > Tools > References > Microsoft Internet Controls and HTML Object Library) you can put this table into an HTMLTable object variable:
Dim nTable As HTMLTable
Set nTable = IE.document.getElementByTagName("TABLE")(0)
You can then select tr tags in the table, to get the table rows
nTable.getElementsByTagName("tr")
and within each row you can loop its cells either via td tags or along the row length:
nTable.getElementsByTagName("tr")(i).getElementsByTagName("td")
Where i is the current index of the loop over the rows collections from the step before.
When looping the table cells, which are the inner loop items obtained by the td tags, you can then access their .innerText property to get the values.
Examples of what are contained in the rows of the outer loop (tr tags):
Examples of what is within individual rows (td tags) in the table cells:
So, when you outer loop the rows, and then inner loop the cells, you will get the values shown in the image directly above.
Example of where this is done in full, bearing in mind according to each webpage you have to tweak the loop somewhat: https://stackoverflow.com/a/50888649/6241235