164 - Using tables in webpages

Written after noon, so not a joke. There is a good deal of help in how to do this, from such wonderful people as OldToad, Wyodor, Cédric Giger. In response to a plea asking how to upload a small budget file, Old Toad posted this:

#1

A - put the budget.htm file on your server where you can link to it.

B - on the web page add an HTML snippet with the following code:


<iframe height="XXXpx" allowTransparency="true" frameborder="0" scrolling="no" style="width:XXXpx;border:none" src="URL TO BUDGET.HTM FILE"></iframe>

              Set the width and height, in pixels, so that the snippet will display the entire table.


#2

A - open the budget.htm file with a text editor and copy all of the code.

B - add an HTML snippet to the iWeb page and paste the code into the snippet.

One must read every word, of course, not just copy and paste the text into an HTML snippet on your page. Though in practice that is what one does (what I have been doing), because then you see what it is that you have not understood. The first significant problem is the URL in src=”URL...”; I have discovered what the problems and solutions are.

So, suppose I want to show the 2014 essays in a table: I copy the script above into a snippet, leave the XXX sizes for now and put in the URL  /Blog_Site/Essays2014.htm  I can’t see it on the page I’m typing, I have to use another screen (or ‘desktop’ on OSX) and I don’t see yet how to place it on this page so text wraps around it, but it is there. I do not need an absolute address starting http://scoins.net/ , I use a relative address that assumes root (/) is the root of the website (subsite) I’m writing for. If I’m lost I can look this up in two ways: (i) stay within my desktop application (iWeb in my case) and check what I’ve titled this sub-site to be (Blog_Site) (ii) I go to my ftp client or to my host file access and look to see where this page will go. In both cases I must then upload the excel file (select the cells you want, save as the

Iterations:

Because this isn’t WYSYWYG and because what is in Excel is not the same as in .htm  Better behaviour is to sort out the .htm file on your desktop. When that layout is okay, right-click on the .htm file and in my case ‘webinspector’ tells me what size the cells are by showing me the html code created when Excel saves as HTML.

selection

as web page, .htm) to that correct sub-folder. And then test the script works on the other screen. My system is fussy about capitals in filenames and shoving the file onto the host server is not as easy as I feel it should be; I’m used to drag and drop.

To fix the size you can see your .htm file on your desktop and this will show you what formatting failures have occurred. Fix that on your desktop, far easier (for me, anyway).

Height and Width:

I have 30 lines each of 12 units = 360 says Excel but 500 [480 cuts through the bottom line] on the webpage,here. My spreadsheet is 31 units wide, which seems to be 310px. The smallest that worked here was 490x250.


When you upload a page your agent software has a target address. In my case you’d think that is simply scoins.net but that is not true; the URL is the sub-folder where your page belongs, in my case ../Blog_Site. 

Method #2:

Save your file as htm. Open that htm file and right-click so as to see all the html code. Copy and paste the whole thing into the snippet. that has the advantage of making it visible on your page and that makes it much easier to fiddle with (code) to get the result that you want, BUT it renders your excel file useless except as a draft. If you take the effort to get the .xlsx file into shape, then updates are far easier.






Sites to view:

http://oldtoad.net/Contents/  for iWeb help, much of which is not about iWeb at all.

http://www.kryogenix.org/code/browser/sorttable/   Stuart Langridge did some good work on making tables sortable. Add sorttable.js to your site (at the right level, where your webpages are uploaded to. e.g. ...../public_html)

http://www.htmlgoodies.com/tutorials/tables/article.php/3479851 Very readable, html for dummies.



Page anchors

I found a dead simple but clumsy way to jump within a page, demonstrated on the page experimental lists. The link given should open a new window so you can look at that AND read this.

What one does is:

•   set up the page as required.

•   insert the tiniest manageable HTML snippets.

I used  <a name="2008"></a> <hd>2008</hd>

and then shrank the box to just fit the 2008 text, placing it beside the head of the 2008 list.


The pointer that says ‘Jump to 2008’ is set up as a link pointing at external page (the URL for that page) with #widgetX tacked on the end,  so it looks like this:  ...list.html#widget5.

It then jumps so the marker for widget5, “2008”, is at the top of the screen.

The clumsy bit is that you need to use the back arrow on your browser (to go back to the collection of widgets / anchors and put the address back to its correct state).

Something arguably easier to work with is shown in the table below labelled Essays 2015.

The table sits on top of a text box of about the same size set to force this text to wrap around it. Reformatting the text on the page will possibly require re-placement of the table on top of the empty text box.


This table is made by input directly to an html snippet:


<TABLE BORDER="4" CELLSPACING="2" CELLPADDING="2">

<CAPTION>2015 Essays

</CAPTION>


<TR> <TD> Recycling </TD><TD>150</TD><TD>social</TD></TR>

<TR><TD> Devolution </TD> <TD> 51</TD><TD> politics </TD>

<TR><TD> Retyred </TD> <TD>152</TD><TD> politics </TD>

...

...

</TR> <TR> </TR>

</TABLE>

I noticed, in experimenting with being lazy, that the html can be reduced by losing the closure and each line end, giving this less complete code which I’ll demonstrate so you can see if it fails on your browser:



<TABLE BORDER="6" CELLSPACING="4" CELLPADDING="4">

<CAPTION>2015 Essays

<TR> <TD> Recycling </TD><TD>150</TD><TD>social

<TR><TD> Devolution </TD> <TD>151</TD><TD> politics

<TR><TD> Retyred </TD> <TD>152</TD><TD> politics

...

<TR><TD> Dress Sizes </TD> <TD> 166 </TD><TD >UK - diary


I even left off the end of table </TABLE>

This second version has the borders set larger so you can see the effect. There must be a lot of default settings being picked up.


DJS  20150401





When recreating these pages after computer disaster in May 2016 I reproduced the top table of 2014 essays by going to my published site, which remained safe being hosted (so not on my machine) and then used control-click (right click?) to choose the option to inspect the html element for that table. Having found what looked like the right thing, I copied that code and pasted it into an html snippet box on my desktop machine (into my new iWeb file). This has the advantage of letting me see what is occurring in a wysiwig way. It also gives me direct control of what appears on the page. What it does not do is provide any automatic functionality, such as updating or extension.

© David Scoins 2017