It may be tempting to simply include the cellpadding attribute within the table, though there is a CSS equivalent that can be used :-

border-spacing: 3px;


This allows the spacing between cells to be controlled the same as would be possible with cellspacing but with a CSS only solution.

One of the commonest reasons for using cellspacing is to remove any spacing at all from table cells, with cellspacing=0. Historically this has been when tables are used for layout purposes. Whilst this is no longer advisable for layout, there are times when tabular data can benefit for zero spacing. With CSS this can be accomplished as follows :

border-spacing: 3px;
border-collapse: collapse;

The full affect of table cellspacing with a CSS only solution.

Myspace allow users to add CSS codes to the content areas on their pages. By inserting the <style> </style> tags in one of the text boxes, typically ‘About me’ it is possible to change the appearance of many of the page’s attributes. Most of the standard CSS definitions are permitted, but it should be noted that changes to attributes such as z-index are not allowed. Likewise CSS codes which attempt to obscure or remove advertising will be blocked, or be in breach of myspace’s terms and conditions.

There are many aspects that can be ‘pimped‘ to make your pages look cool. If you have any specific requests of ‘How do I …‘ for improving your myspace (or other social networking) pages, please feel free to comment or email myspace_help@xhtmltips.co.uk, and we will suggest some solutions and post additional ‘How to …‘ articles.

The basic CSS code to add a background image is :

background-image: url('http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg');

This will load a purple gradient background. The location of the image file is added by using the url(''); function, which can be a local file, or a complete URI.

By default a background image will be added to the top left of the area and will ‘tile‘ both horizontally and vertically. It is possible through two additional CSS codes to change this setting to achieve other varied effects;

background-position:
background-repeat:

For example; if the gradient image started with a solid colour on the left hand side and faded to white we might only want it to be tiled vertically, and leave the right hand side as the defined background colour of white.

background-repeat: repeat-y;

For a background image which has a colour on the right hand side and fades to white on the left hand side, the two codes can be used together like so :

background-repeat: repeat-y;
background-position: right center;

With these codes we can now modify our myspace background which will be a central purple gradient, with tiling both vertically and horizontally. The myspace CSS code for this is as follows :

<style type="text/css">
* {background:transparent; border:0px;}

body {
background-image: url('http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg');
background-position: center;
}
</style>

Whilst this does the job of adding a tiling background, it does have the unfortunate consequence of making some of the text illegible, where white or light text is shown on a white or light background.

Fortunately with a few more nifty myspace specific CSS codes this can be solved :

<style type="text/css">
body.bodycontent table tr td {
background:transparent; border:0px;
color: black !important;
}

table.navigationBar * {
background: SteelBlue ;
}

table.contactTable * {
background: CornflowerBlue;
}

body {
background-image: url('http://www.xhtmltips.co.uk/myspace/purple_wave_800.jpg');
background-position: center;
}</style>

If you copy the above codes including the ‘<style>’ and ‘</style>’ tags into one of your myspace content areas, such as the ‘About me’ box, you should be able to see the change to your myspace page appearance.

View the myspace background example for the see the finished effect.

Here is an example of the basic markup for some search engine results:

<table>
<tr>
<th>Relevance</th>
<th>Website</th>
<th>URL</th>
</tr>
<tr>
<td>100%</td>
<td>XHTML Tips</td>
<td><a href=”http://www.xhtmltips.co.uk/”>HTML Help</a></td>
</tr>
<tr>
<td>75%</td>
<td>eLiteracy</td>
<td><a href=”http://www.eliteracy.co.uk/”>Internet Safety</a></td>
</tr>
</table>

As you can see there is one row of headers and two rows of data. It is possible to omit the row of headers using a row of regular cells instead but there is a downside to doing so. When someone with a screen reader, or alternate browser views a table that does not have headers the data becomes very confusing.

For example, the data above would be read sequentially like so “Relevance Website URL 100% XHTML Tips HTML Help 75% eLiteracy Internet Safety”.

By using headers it can be logically read as “Relevance: 100% Website: XHTML Tips URL: HTML Help Relevance: 75% Website: eLiteracy URL: Internet Safety”. Table headers provide additional structure to the data and allow interpretation to be done which improves accessibility.

For info the sample table will look like this :

An ideal method would be to use one of the many alternative contact form solutions available. If use of these options is not possible and it is important to display an email address with a mailto: link on a webpage, this tip will help obscure the email address from spam harvesters, whilst allowing the form to work normally.

help_NO_SPAM@xhtmltips.co.uk

Most solutions to publishing email addresses involve changing the address to something that is only humanly readable. For example:

help at xhtmltips dot co dot uk

Whilst it is possible to read this, and understand what the address might be, it does not provide a clickable link.

Most harvesting scripts are scanning for the essential email ‘at-symbol’ @ anywhere within a document. This tip simply replaces that character with the entity reference – @. The result is a link the browser can understand, but that will not match an email address pattern.

When you click this link, it should launch your favourite email client, in order to send a message to the address help@htmltips.co.uk

NB: this is far from a safe way to protect your email address from spammers. The only effective way to do this, is to not publish the address on a public webpage. It does however offer a ‘halfway-house’ solution which may help those using free website hosting solutions.

This format of the address will work in most browsers :

<a href="mailto:help@htmltips.co.uk">help@htmltips.co.uk</a>

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif" />

And that’s really it. Of course there are a few more attributes that you may want to add, especially the alt attribute. The alt attribute provides alternate text, typically used for accessibility and users with alternative devices, who are using a text browser. “Alt-text” can also be indexed by search engines.

A very important rule to remember about alt-text is that it should be descriptive of the image. This is a bad example:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
alt="html_help_link.gif" />

By describing your image with the file name you are not providing any additional or useful information. Something better would be:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
alt="HTML help, animated link into site xhtmltips.co.uk" />

The same is true of the title attribute, which can be used as a descriptive label for your image, and may be displayed when the image is linked to:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
title="XHTML help." />

You can also specify the width and height of your image by using the width and height attributes. The values can be either in percents, using the % symbol, or in pixels:

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
width="50%" height="50%" />

<img src="http://www.xhtmltips.co.uk/site/html_help_link.gif"
width="120" height="60" />

If the % symbol is not used the image will be sized in pixels. Height and width values should be the placement size the image is to occupy on the page. This can help the browser render pages quicker.

So the finished image will look like this :

<ul>
<li>List item #1</li>
<li>List item #2</li>
</ul>

<ol>
<li>List item #1</li>
<li>List item #2</li>
</ol>

You can see the only difference is that the unordered list uses the ul element and the unordered list uses the ol element.

An unordered list appears like this :

• List item #1
• List item #2

Whilst an ordered list appears like this :

1. List item #1
2. List item #2

A definition list is a special list that is intended for a list of terms and definitions. It can also be used for items that have a direct relationship with one another such as the make and model of a car.

<dl>
<dt>Toyota</dt>
<dd>Celica</dd>
<dt>BMW</dt>
<dd>Z4</dd>
</dl>

Use the dl element to start a definition list. A dt element is a definition term and you can have as many of them as you need; they don’t necessarily have to have a corresponding definition description, or dd tag. You can also have as many definition descriptions as you’d like for each given term.

The basic difference between the two is their default behaviour. DIV tags are block-level tags and can be used as containers for other tags. SPAN tags are inline tags and should only contain content. These default behaviours can of course be altered by CSS definitions, but are default in any browser context.

As a reference, if you want to align text within these tags use the following CSS attributes;

DIV - text-align: left|right|center|justify
SPAN - float: left|right

DIV tags are also used to define logical divisions of page content. It also allows CSS to be defined for whole sections of HTML. By applying an id to a DIV you can also add controls using JavaScript.

A SPAN tag is not intended to container other tags, but rather to allow localised styling. This is especially useful when combined with classes. It has even been suggested that future semantic web models will use such markup to define relevant content.

For example by defining a class telephone, it is possible ensure all telephone numbers are displayed in the same fashion:

<span class="telephone">44-20-555-4444</span>

SPAN tags have similar properties but should be used to reference inline content and apply style by classes.

In summary: use DIVs for defining sections of a page, and SPANs to enclose and style text or classes of text.

This can be accomplished very cleanly with a few CSS attributes applied to the following HTML :-

<h1><em>Section: HTML help</em> Date: 21st Apr </h1>

h1 { text-align: right; }h1 em { float: left; }

By using this simple approach it means that the content will still be displayed in the order it was intended to be viewed, even if CSS is not available or rendered correctly in the visitor’s browser. This approach also avoids the temptation to use tables or even floating div tags. By using the h1 (or h2, h3, et al) tag, the semantic nature of the content is preserved.

In a browser without CSS rendering the result will look something like this :-

Section: HTML help Date: 21st Apr

This result at least shows the content in the textual context that was intended. Although the design effect is lost the content remains intact. Aspects like this are key to making a web page as accessible as possible to all audiences.

Now, if we break a rule here and add that CSS style, inline with the tags, you can see the result here :-

Section: HTML help Date: 21st Apr

<p>This is my paragraph that isn’t much of a paragraph. Aren’t paragraphs 3-4 sentences long?</p>

Of course you’ll typically want to express yourself a little more when writing a paragraph by emphasizing text or by making it strong. The tags you use here are equally obvious, that’s right the em and strong tags.

To add emphasis to your words wrap them up in an em tag like this:

<p>This is my paragraph that <em>isn’t much of a paragraph</em>. Aren’t paragraphs 3-4 sentences long?</p>

And to add a little power to a word give it a strong tag:

<p>This is <strong>my</strong> paragraph that isn’t much of a paragraph. Aren’t paragraphs 3-4 sentences long?</p>

I’m sure you’ve heard of the bold and italic equivalents of these elements, b and i. These tags are valid but you shouldn’t use them because they express how something should be presented. It’s best to just use XHTML for structural purposes and let CSS decide what to make bold and italic.

Here’s a quick list of simple things that you can do to make your website more accessible:

1. Non-text content (e.g. images) have descriptive alt or longdesc text
2. Don’t rely on colour alone to get your point across
3. Mark up your documents properly; use a p element for paragraphs and a table element for tabular data
4. Use the lang attribute to specify what the language of your document is
5. Identify row and column headers in tables
6. Group rows and columns using the thead, tfoot, tbody, col, and colgroup elements
7. Organize your documents so they can be logically read without style sheets, in other words, put your content in order on the page
8. Make sure that your page is usable without Javascript or use noscript element to indicate otherwise
9. Don’t use blinking, moving, or scrolling object that can’t be stopped
10. Use clear and simple language
11. Test your pages in multiple browsers with Javascript and images turned off. Don’t forget to try text only!
12. Validate your pages using the W3C validators for CSS, HTML, and Accessibility