Category: HTML

Tables, borders, and border-collapse

Need a table? For your table data, not for layout? (We’re clear on that issue, right?) Okay, make one. Here’s how to do the borders using CSS.

The border property is what you use to add a border to a table with CSS. You might have a rule such as this one:

table {
border: 1px solid #333;
}

That would add a one pixel, solid border in a gray color around the table. But it wouldn’t add borders to the table cells themselves. So write this rule, too.

td, th {
border: 1px solid #333;
}

Now everything has a border. In fact, there are two borders around everything, because each individual td, th, and table has its own borders.

To remove the space between these borders and make them appear as a single border line, use border-collapse. Put it in the table rule only. The possible values for border-collapse are separate, collapse, and inherit. You want them to collapse.

table {
border: 1px solid #333;
border-collapse: collapse;
}

Now you can get rid of those inline HTML attributes in your table code that set the borders and move table presentation to the CSS, where it belongs. Peace and joy will follow you where ever you go.

HTML5 First Working Draft

The W3C released the first working draft of HTML5. They really, really, really want your help and input. Here are a few of the phrases from the spec that prove how in need they are of careful critical appraisal for this spec.

This specification should be read like all other specifications. First, it should be read cover-to-cover, multiple times. Then, it should be read backwards at least once. Then it should be read by picking random sections from the contents list and following all the cross-references.

Almost everything is marked “non-normative” but just in case you don’t get the point, they say,

All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative.

The working draft is sprinkled with sentences similar to this one:

The current situation with IDL blocks is pitiful.

There is a section on the DOM, the semantics, browsing contexts, APIs and the language context. In the HTML section, they explain new HTML elements which are under consideration, such as the section element.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

The document is huge. To comment helpfully, you’ll need to devote several hours to studying it prior to having your say. The more people to apply some sharp intelligence to this effort, the better off we’ll all be in the end.

Technorati Tags: ,

A Look at Weebly

I recently tried out Weebly. It’s a site that offers drag and drop web page creation, along with free hosting of the pages you create. You can publish the pages you create on a domain of your own choosing.

They offer a blog among the choices as to what you can make with their interface, but if you add a blog to a site, it must be hosted at Weebly to work.

I was trying it out because I was writing a how-to article about it for eHow. I made a test web site, which reflects my quickly done effort while testing for the eHow article.

It is easy. Very easy. But if you run an HTML validator on the test site I made, you find 48 validation errors on the first page. The blog, where I didn’t go as wild dragging and dropping widgets and elements onto the page only (only?) has HTML 22 errors.

I didn’t make an effort to create anything real that I would use. I just tried out the elements to see if they fulfilled the promise of letting an inexperienced user create and publish their own information in a web page. Weebly does that. However, I don’t think it provides any useful fodder for education in web design. If you are teaching programming and want to look at a smoothly working example of a web 2.0 site, it could be instructive.

Are sites like Weebly going to eliminate the need for instruction and education in web design by making it so simple to get published on the web that even a kid could do it? I don’t think so. They have a place, a niche. For example, if you were getting married and wanted a short-term, fast and easy site to store information about the wedding and its related events, maps, gift registration sites, and such info, Weebly would be a solution. But Weebly is limited. Which means a solid grounding in the web development nuts and bolts is still necessary for most web site creators.

ADDENDUM: July 27, 2010. Weebly made news today with a new drag and drop image editor called Image Perfect. You can read about it at TechCrunch.

Technorati Tags: ,

Related Posts: SynthaSite, SiteKreator, and Webnode

HTML WG links

Lots of disagreement, dissatisfaction, and conflicting opinions about what needs to be done with HTML. Here’s the latest round of discussion:

WCAG 2.0 ready for review and comment

The Web Content Accessibility Guidelines (WCAG) Working Group wants you to
review the second WCAG 2.0 Last Call Working Draft published on December 11,
2007. WCAG 2.0 deals with how to make Web sites, applications, and other
content accessible to people with disabilities. Submit any comments by February 1, 2008. WCAG Quick Reference will help you review.

Today’s Useful links

Ensuring your HTML Emails Look Good and Get Delivered by David Greiner at Think Vitamin is informative on its own. Its also part of the new Email Standards Project campaign to bring mail apps into the standards fold, so you’ll find out what some of the current problems are in getting HTML email to look good.

Tiny Bubbles: SVG Version at Burningbird requires that you watch what happens for a couple of seconds. It’s a good demo of the very interesting effects Shelley Powers has done on her blog with SVG (Scalable Vector Graphics). The clock in the sidebar is created with SVG, too. She has a book coming out from O’Reilly about SVG very soon.

Google Information for Webmasters tells you how to remove websites, cached pages, dead links and other material from the Google index. You can only remove your own info, no one else’s.

The Story of Stuff with Annie Leonard is a “20-minute, fast-paced, fact-filled look at the underside of our production and consumption patterns.” This film makes me think of a serious problem that prevents change: we operate out of a split mind. One side of our mind wants to consume, consume, consume for the lowest possible cost. The other side of our mind wants to do the right thing for the common good and the planet. But acts we take as a money-saving consumer are exactly the wrong thing for the common good and the planet. We need to talk about and deal with this split between our behavior and the desire—no, the urgent need—to do the right thing.

Got Fear? This site was set up to prepare for the upcoming session “Who’s Afraid of Blogs, Wikis, Podcasts, and the Big Bad CMS? A Digi-Drama About Fear 2.0” at the January 2008 annual meeting of the EDUCAUSE Learning Initiative. They want to hear from you about your fears (and the fears you’re observing at your institutions) about the role of Web 2.0 tools and technologies in higher education.