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
Related
How can I make my table height smaller? I've tried adjusting the height on the <tr> through CSS but it seems like the height it's currently using is the smallest it will get. I can make it larger but anything under height: 50px, I don't notice a difference.
Here's my table now. I just want to make the row height smaller to compress the table so it fits on the screen without having to scroll down.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Overtime Hours</th>
<th scope="col">Compensation Hours</th>
<th scope="col">Vacation</th>
<th scope="col">Personal Hours</th>
<th scope="col">Sick Hours</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Carry Over</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Allotted</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Starting Total</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Jan</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Feb</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Mar</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Apr</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">May</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Jun</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Jul</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Aug</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Sep</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Oct</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Nov</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Dec</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Yearly Total</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Balance in Hours</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Balance in Days</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Accordingly to the Bootstrap docs:
You can simply use table-sm as a complement for your table, to make tables more compact by cutting cell padding in half. It would be like:
<table class="table table-striped table-sm">
<thead>
...
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
As recommended to be responsive, you can use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
Example:
<div class="table-responsive-sm">
<table class="table table-striped">
...
</table>
</div>
<div class="table-responsive-md">
<table class="table table-striped">
...
</table>
</div>
<div class="table-responsive-lg">
<table class="table table-striped">
...
</table>
</div>
<div class="table-responsive-xl">
<table class="table table-striped">
...
</table>
</div>
as you are using bootstrap. you may use <table class="table table-striped table-sm"> class
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>
I have only problem with the small column. How to create the small column.
Here is a rough solution, using the rowspan and colspan attributes:
<style>
th, td {
border:1px solid black;
}
table {
border-collapse:collapse;
}
</style>
<table>
<tr>
<th rowspan="2">Description of waste</th>
<th rowspan="2" colspan="6">List of wastes</th>
<th rowspan="2">Quantity</th>
<th colspan="2">The chemical/biological components</th>
<th rowspan="2">Physical form</th>
<th rowspan="2">Hazard code(s)</th>
<th rowspan="2">Container type</th>
</tr>
<tr>
<th>Component</th>
<th>Concentration</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<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>
<td></td>
<td></td>
<td></td>
</tr>
</table>
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
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.