Help a luddite edit an old webpage

August 19, 2015 8:26 PM

Please help me to reformat a table and make other simple changes to an old, ugly webpage in time for class on Monday.

I'm about to teach a class, and need a simple webpage. The last professor has one, but it's in in html and was probably written in the stone age. I just want to make some simple changes, but can't seem to find an editor that can do what I want. The most pressing is the class schedule. It is in a table, which is ugly, but good enough for now. For the most part, I can find each entry and replace it. But the table only has four columns (#, M, W, F) and I want homework to be due on tuesday, so I'd like to add column in the middle.

I've tried looking through various free website editors, but none has an obvious way to make a table (I've gotten this table into excel if that helps, but it looses all the bounding boxes on excel export).

I'm actually somewhat proficient at programming (especially matlab), but the html formatting is just really horrible to try and decipher. It's safe to say that I don't plan to really get too deep into the html before class monday (still have lecture notes to prepare, etc. ).

So, should I:
1) Give up and put the homework due dates somewhere else and move on.
2) Use web design software and start from scratch (recommendations welcome)
2) Use an html editor and learn just enough html to put the table boundaries back on from excel (e.g. I have komodo editor installed and can use that)
3) Use some magical thing that you recommend that will solve all my problems.

I plan to post the actual homework, solutions, etc. into our also terrible internal course management software, but having just a bit of control over this tiny webpage would be really useful. So while the ability to edit a table is a must, the ability to make other changes relatively easily would also be appreciated.

Thank you!

posted by lab.beetle to Computers & Internet (13 answers total)

Best answer: I can write stone-age HTML and will be happy to do this for you, feel free to email me the html and I can email you back the table. That said, you can just make an image instead of the table for the schedule if it's easier (i.e. take a screenshot of what you have in excel, it's clunky but it will work). That said, this little thingdoo can sort of give you a visual sense of what your HTML is doing (there are many others) if you want to wrestle it out which I think is possible. The big things you need to know are TR is table row and TD is table data (i.e. a cell within the row). And HTML is really focused on the ROWS so you have to work out the rest of the stuff from that.

My "Learn HTML!" class which I teach starts on Monday and I am having similar issues learning how to do crap with Moodle. I feel your pain.
posted by jessamyn at 8:33 PM on August 19, 2015 [3 favorites]

Yeah, adding a column in raw HTML is a pain. Either use a table editor, or take up jessamyn on her offer :)
posted by intermod at 8:37 PM on August 19, 2015

Yeah, for the purposes of one weekly schedule, you can probably just use an online generator. Check out this table generator and see if it works for you.

In an academic environment, I'd advise against using a screenshot/image. You likely have accessibility/Section 508 requirements for assistive technology compatibility, and a screenshot won't meet those needs. Worst case scenario, I'd export from google docs or Word before screen shotting. Your code might not be clean, but it will likely be somewhat accessible at least. Oh, hey, that makes me realize what you should do: use an accessible table generator.
posted by instamatic at 8:42 PM on August 19, 2015

Since you're familiar with Matlab, that outs you as not-a-Luddite, so maybe this could be a better solution for you. Depending on the complexity of the webpage, you could quickly convert it to Markdown. Making tables in Markdown is pretty easy, and converting Markdown to simple HTML is very easy to do using a program called Pandoc. For example, this:

Test File 

Num |   Tues|   Wed |   Thurs
--- |   ----|   --- |   -----
1   |   31  |   48  |   7
2   |   32  |   423 |   700
3   |   34  |   4212|   70
4   |   36  |   411 |   70

More text

Run through this:
pandoc testfile.txt -o test.hml -f markdown_github
Generates this
posted by demiurge at 9:07 PM on August 19, 2015

Also, if the original webpage is really simple, you can try converting it into markdown with pandoc, altering the table in the markdown format, then converting it back to html.
posted by demiurge at 9:11 PM on August 19, 2015

I regularly edit and fix stone-age HTML tables for my work's space-age site. Memail me if you want help.

This will also show you the HTML table stuff and let you fiddle with things and see results; you can then just copy the HTML and drop it into the page you need it to be on.
posted by rtha at 9:35 PM on August 19, 2015

Another DIY option is a handy Windows program called Blocknote. If you cannot figure out how to open and edit your file using it, use it to create a new table and then open the HTM files in a plain-text editor and replace the code from and including the [table][/table] pair.
posted by megatherium at 4:15 AM on August 20, 2015

If you want a WYSIWYG tool, Kompozer is free & will do what you want. I believe you can right-click in an existing table to add a row or column. Or just click the table button to create a new table.
posted by belladonna at 5:37 AM on August 20, 2015 [1 favorite]

Mozilla SeaMonkey has a web page editor that does tables.
posted by Sophont at 8:03 AM on August 20, 2015

You basically need to add one extra cell to every row of your table. It is a repetitive nuisance, but not that hard. You could also add some CSS to make the table less butt ugly, which can improve usability.

Since you can find each entry and replace it, it shouldn't be too hard to find your Monday and Wednesday entries and stick an extra cell between them with the TD tags (open tag, cell data, close tag). If the existing cells have been assigned a percentage value of the table width, that will need to be modified. If that is the case, you might want to accept free offers of help from above or remove the table and replace it with an image as suggested above. That might be too confusing as a first time table edit job.

CSS can be added to the header that will alter the look of the table to make it less butt ugly without rewriting the table code. CSS just adds visual formatting on top of the existing html code. You can find code snippets for that online, and copy and paste it into the header without really knowing how to write CSS.
posted by Michele in California at 10:38 AM on August 20, 2015

Kompozer is essentially the stand-alone version of SeaMonkey's inbuilt web page editor, if that helps you save time evaluating stuff.
posted by flabdablet at 11:17 AM on August 20, 2015

Response by poster: Hi everyone, thanks for all the help. I've managed to fix the table, but in the process seem to have broken other pages, aarrgh. I think I'll be taking some of you up on your offer for help.
posted by lab.beetle at 2:33 PM on August 20, 2015

One option that might work: create the class schedule in a Google Sheet, then "publish it to the web" (a File menu command) with "Embed" selected. Presumably this will give you some code that you can copy and paste into your HTML file in the same place where the table used to be.

This would have the added advantage of enabling easy edits to the class schedule: modify the original Google Sheet, then republish. Not sure how the embedded sheet would look, but it might be worth a try.
posted by baseballpajamas at 7:37 PM on August 23, 2015 [1 favorite]