Style Your Table With Tablecloth
Monday, November 24, 2008 | Javascript, Webmaster 0 Comments

Tablecloth is a small (6 KB) and simple JavaScript file that lets you add some styling and actions to your tables. As you see in the screenshot above, you can highlight the row and column you are looking at. As you hover over the table cells, the rows and columns are highlighted that correspond to the cell you are hovering over. Once you click a cell, Tablecloth will highlight, and keep highlighted, the row and column that make the intersection at the cell selected.
The script is fully customizable through a CSS file (1 KB). There is a default theme, or skin, that comes with the download but can be changed to match your website color scheme. The CSS and JavaScript file together are small and fast loading, adding very little overhead to your page load time.
I did not see any license information available; however, the website does list how to modify the code. This script is written by Alen Grakalic from Css Globe. You can see additional features, view demos, view usage examples, and download Tablecloth from the website.
HTML and CSS Tutorials from HTML Dog

HTML Dog offers HTML and CSS tutorials for a beginner, intermediate, and advanced web designer/developer. The website is very well designed and easy to navigate. The information in the tutorials is clear, concise, informative, very useful, and overall well written. You can also get information from additional references including HTML tags and CSS properties. There are articles available that build on the tutorials providing a more detailed understanding of certain topics. If you would like to see what you have been reading about in the tutorials in action, you can view a large number of examples spread across seven different categories.
The tutorials, articles, and examples from HTML Dog are written with a strict adherence to the Web Standards created by the W3C. The information was created by Patrick Griffiths who has been a front-end web developer using HTML and CSS since 1999. He has contributed to well known and credible sites like A List Apart and the CSS Zen Garden.
If you find the information useful and would like to have a copy of it, you can purchase a copy of the HTML Dog book which includes information similar to the tutorials and articles. You can get your copy at Barnes & Noble, Borders, and Amazon.com.
Learn HTML & CSS at the HTML Playground

The HTML Playground offers XHTML and CSS references by example. The site is still in beta at version 0.4, but offers an easy to use interface that makes digesting all the information displayed simple. It is a fast loading application and I have just found it to be overall a great tool for learning the basics of HTML and CSS.
The concept is pretty easy and follows an intuitive design and interface. The initial information is loaded from the left top pane and allows you to make a selection. Once you have chosen what you want to learn about, it loads more information into the panel directly to the right. Additional information, if available, is loaded underneath the initial pane. The last pane to load contains the examples and a way for you to try it out yourself. The design follows the logical left to right, top to bottom reading layout so you don't miss a beat when you start using it. Although this seems like a no brainer, think of how many blogs out there, like mine, have the menu on the right, which took some time to get used to when it first started showing up. This simple design principle makes the app very easy to use.
The examples pane includes code highlighting to make reading and learning the code easier. The attributes pane in the bottom left contains a color picker of basic/common colors so you can start to learn the Hex codes for colors (for example: white = #FFFFFF). There are also basic choices for other attributes like align and border to help you learn what is available to customize those tags. The search function works well in allowing you to quickly search and find a specific tag to learn.
This is a free website and a good one to bookmark. I'm not sure how much recent activity there has been in development because the last blog entry was back in December of 2006. However, there has been some activity in the community section of the site as recently as July of 2008, so there may be some continued development taking place. Either way, the website is very useful in its current condition. I hope that there will be more features and information continually added, but for now, check out what's there.
What can we expect from HTML 5?

The World Wide Web Consortium (W3C) has been working to set the specifications for the new HTML 5. They have produced a document that outlines all the changes, deletions, and additions. This draft is very long and a little tiring to read, so I've tried to create a short summary of important parts. This summary is by no means all inclusive or a replacement for the information in the draft on the W3C's website.
- New Elements - These new elements are intended to provide better structure.
- section, article, aside, header, footer, nav, dialog, figure, audio, video, embed, mark, meter, time, canvas, command, datagrid, details, datalist, datatemplate, rule, nest, event-source, output, progress, ruby, rt, rb
- New Attributes - The elements listed below have had attributes added to them. There are too many attributes to list in this summary, so I am only listing the elements that have had attributes added.
- a, area, base, value, meta, input, output, select, textarea, button, fieldset, form, textarea, menu, style, script, html, ol, link, iframe
- Changed Elements - These elements have been changed to reflect the way they were being used.
- a, address, b, i, hr, label, menu, small, strong, q
- Deleted Elements - These elements have been removed either because they should be used in CSS, they had a lack of usability, or they were confusing.
- basefont, big, center, font, s, strike, tt, u, frame, frameset, noframes, acronym, applet, isindex, dir
- Deleted Attributes - These attributes have been removed because these, like some of the deleted elements above, they should be used in CSS.
- accesskey, rev, charset, shape, coords, longdesc, target, nohref, profile, version, name, scheme, archive, classid, codebase, codetype, declare, standby, valuetype, type, language, summary, axis, abbr, scope, headers
- align, alink, link, text, vlink, background, bgcolor, border, cellpadding, cellspacing, char, charoff, clear, compact, frame, frameborder, height, hspace, vspace, marginheight, marginwidth, noshade, nowrap, rules, scrolling, size, type, valign, width
- New APIs -HTML5 introduces some new APIs for easier web application creation.
- 2D Drawing, audio, video, persistant storage, offline, editing, drag & drop, network, notification, history, cross document messaging, server sent events
- HTMLDocument Extensions - These provide easier interfacing with the DOM.
- getElementsByClassName(), innerHTML, activeElement, hasFocus, getSelection(), designMode, execCommand()
- HTMLElement Extensions - These provide easier interfacing with the DOM.
- getElementsByClassName(), innerHTML, classList
Although I tried to create a detailed summary, there is a lot more not covered here. I would encourage you to read over the new specifications and get a better idea of what HTML 5 is all about. For instance, the deleted attributes are removed from specific elements, so be sure to look over the full documentation before getting too worried about any changes made in HTML 5.
Although this release was a working draft published on January 22, 2008, it is expected to be in development for at least another year if not more.
What do you think about the new HTML 5? Do you have anything to add to the summary? Leave 'em in the comments for all of us to learn from.