Embedding using iFrame - html

Question

I want to build a website for a local football (soccer) team but I'm not sure how I can display the league table standings on the site which are available at http://wnl.org.uk/tables.htm.
I can create an iframe but it pulls in the entire page and I only need one of the tables. I would also like to make it responsive and apply my own styles to be consistent with my theme.
It's only an amateur league so it's not available via opta or something similar so I'm unsure what's the best approach.
Can any one help - This question is more of a how can I do something rather than this is what I've got. I'm not sure how I can achieve it.

Answer 1

If the page you want to fetch the data from is inside your server you can use the jQuery .load() function like this: (this method is without the iframe)
<div id="target-div">
</div>
And than use this code:
$('#target-div').load('./tables.htm #main');
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of target-id, and the rest of the retrieved document is discarded.
.load() jQuery Documentation
But this can only be done if this site is inside your server, because it gets the contents using AJAX.
Hope this helps.
Another Way
If you want to do this with iframe you can use some css-tricks to display only the part of the page you want.
<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">
<iframe scrolling="no" src="http://wnl.org.uk/tables.htm" style="border: 0px none; margin-left: -36px; height: 812px; margin-top: -486px; width: 650px;">
</iframe>
</div>
Source: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html
The downside of this is that you will need to test different values for the margins of the iframe and the width of the div manually until you get the result you want.
Shortest way using PHP
1) Create a file "tables.htm" and leave it empty.
2) Create a file "test.php" (Make sure those are in the same folder).
3) Add there this lines of code:
<?php
$contents = file_get_contents("http://wnl.org.uk/tables.htm");
$file = fopen("tables.htm", "w") or die ("Unable to open file");
fwrite($file, $contents);
fclose($file);
echo "Successful";
?>
4) Run this file in your browser. This will write the contents of the file in that website to the file "tables.htm" in your Server.
5) Now that the file is written access its data using the .load() function I mentioned above.
<div id="target-div">
</div>
<script>
$('#target-div').load('tables.htm #main');
</script>
6) If you have option "Cron Jobs" in your host, use that to make the script "test.php" run in a specific time without you needing to run it in your browser manually.
This is the best way you can do it, and the best part is that you can change the style of the elements as well.