PC TRAINING: XHTML

XHTML

XHTML is a markup language for Web pages from theW3C(World Wide Web Consortium). XHTML combines HTMLand XML into a single format (HTML 4.0 and XML 1.0). LikeXML, XHTML can be extended with proprietary tags. Also like XML,XHTML must be coded more rigorously than HTML. Over the years,HTML coders have become sloppy, because Web browser software was originally written to tolerate many variations in HTML coding, but, with XHTML, coders must conform to the XML rules.

In one sentence we can say that XHTML is a superset of HTML, but unlike HTML it is stricter to rules and requires a document to follow XML rules.Whereas HTML is an application of SGML, a very flexible markup language, XHTML is an application of XML, a more restrictive subset of SGML.

Graphics

Supported Graphic Formats

Graphic images can be used to enhance the look of Web pages as well as to provide content that supports the textual information on a page. When used judiciously, images can be attractive and informative; when used to excess, they can be distractive and bothersome.

When choosing images to place on a page you need to make sure they support the purposes of the page and not detract from them. Plus, you need to make sure that the file sizes of images, many of which can become quite large, do not cause unnecessarily long download times.

GIF Image Format

GIF (Graphics Interchange Format) is the most widely supported graphics format. Pictures saved in this format have the .gif file extension. GIF format can display images in black and white, grayscale, or color.

When used for color pictures the GIF format is limited to displaying up to 256 colors. Normally when a graphics program saves an image in GIF format the software uses (up to) 256 colors that best represent the colors in the picture.

Because of the compression technique used for GIF images this format is best for pictures with spot colors rather than continuous colors. In other words, this is a good format for line drawings, logos, icons, text, and other images with discontinuous colors; it is not the best format for photographic images.

One of the concerns about using graphics on a Web page are the file sizes produced by the format. Larger file sizes mean longer download times and the longer the visitor must wait to view the page.

In general, it is not the size of the GIF image that affects the size of the file, it is the number of different colors in the image. Therefore, the most effective way of reducing file sizes and reducing download times is to reduce the number of colors in the image.

Most graphic programs permit choices of the number of colors saved with an image. In Figure are shown two save options for GIF files permitted by Adobe PhotoShop. The default option on the left uses the full complement of 256 colors. The color pallet for the image is shown in the bottom-right of the picture. It produces a file size of approximately 10.9 KB.

On the right is the same image formatted with 16 colors. There are no noticeable differences between the two pictures. The one on the right, however, produces a file size of only 3.5 KB. If you are creating your own images, you should explore techniques that make your file sizes as small as possible without distorting the image or misrepresenting its colors.

Transparent Images

One version of the GIF format -- GIF89a -- has the capability of producing transparent images. You can specify one particular color in the image which is then rendered transparent when the image is displayed on the page.

Most often this is the single background color in the picture. When set to transparent, the background disappears, leaving only the foreground image displayed against the page background. The following figure shows the transparent effect.

Both the standard and transparent images are created on a white background and are saved as GIF89a files. The "Transparent" image, however, has the color white selected as the transparent color.

When the images are displayed on a textured background, the white background of the transparent image is rendered transparent to permit the page background to show through. Of course, if the background color of the page is the same as the background color of the image, then there is no need to make the picture background transparent.

Interlaced Images

Another feature of GIF89a format is its ability to produce interlaced images. Normally, when an image is loaded into the browser it is revealed a few lines at a time beginning at the top of the picture. If the file size is large and the connection speed is slow you see the picture revealed a little at a time until the complete picture is downloaded.

If you choose to save your images as interlaced then the entire picture is revealed at increasingly higher resolutions. That is, it is first revealed as a low-resolution version of the entire picture. As more of the picture is downloaded it becomes sharper and sharper as more details are added.

Although the time taken to download an interlaced image is the same as for a regular image it often appears to download faster since the complete, although not final, image is viewable much quicker. Whether you use standard or interlaced images is more a personal preference than technical need.

Animated Images

Multiple single images can be packaged together to produce animated GIF images. These are image files containing two or more images that are revealed in a timed sequence.

The following Adobe ImageReady screen shows the creation of a few of the 60 images used to produce the above clock whose second hand iterates through 60 seconds. Each hand position is created as a different layer of the image. The software converts the layers to animation frames, or cells, that are revealed in sequence when saved as a GIF file.

A slightly different animation technique is used in other animation programs. Some GIF animators require the creation of separately saved GIF images. Each image represents a different frame of the animation. These individual GIF files are imported into the software and are converted into sequenced cells of the animation.

An animated GIF file is retrieved by the browser just like any other GIF file. When displayed in the browser the file produces the animation. Of course, if you are not particularly skilled in working with graphics or you do not have the patience to put together the series of pictures to be animated you can probably find animated GIF images on the Web that suit your needs.

PNG Image Format

A newer format that is increasing in popularity is PNG (Portable Network Graphic) format, pronounced "ping." This format is used for the same purposes as GIF; however, it produces smaller file sizes and faster loading times without loss of resolution quality. It can reveal interlaced images and produce them faster than GIF format.

The most noticeable difference between PNG and GIF formats occurs with transparent images. PNG format permits up to 254 levels of transparency, allowing images to better blend with the background color or pattern of a page. Figure shows the blending differences between PNG and GIF images.

JPEG Image Format

The JPEG (Joint Photographic Experts Group) format is designed for storing photographic images with millions of colors at different compression rates. During compression, graphics programs use special algorithms to sample and render colors close to those in the original picture but without retaining full color information in order to minimize file sizes.

You normally have a choice of compression settings when saving pictures in JPEG format. Smaller file sizes normally mean greater loss of picture details. Still, with moderate compression you can display an image on screen that appears very similar in quality to the original picture.

The four pictures below show the original image and three compressions along with resulting file sizes.You can notice a loss of sharpness in those images with higher compressions and smaller file sizes.

JPEG images at various compressions

For Web images that are displayed at normal 72 pixels per inch, compression percentages that reduce file sizes to as small as 1/8 to 1/4 of original file sizes still retain satisfactory visual precision.

JPEG images are saved as files with the .jpg extension. JPEG format does not support interlacing or transparency; plus, it is not a good format for text or line drawings since the precision needed to produce straight lines or hard edges is not as accurate with compression.

GIF, JPG and PNG - What's the difference?

The GIF Format

The GIF format is one of the most popular formats on the Internet. Not only is the format excellent at compressing areas of images with large areas of the same color, but it is also the only option for putting animation online (unless you want to use Flash or other vector-based animation formats, which typically cost more). The GIF89a format also supports transparency, and interlacing.

GIF files support a maximum of 256 colors, which makes them practical for almost all graphics except photographs. The most common method of reducing the size of GIF files is to reduce the number of colors on the palette.

It is important to note that GIF already uses the LZW compression scheme internally to make images as small as possible without losing any data.

Transparency

As I mentioned above, the GIF format supports transparency. This allows a graphic designer to designate the background of the image transparent. This means that if you place a transparent GIF in a yellow table cell, the background color of that image will turn yellow.

Interlacing

The interlacing feature in a GIF file creates the illusion of faster loading graphics. What happens is that an image is presented in a browser in several steps. At first it will be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more and more defined until the entire image has been downloaded. It's important to note that interlaced GIF files will usually be a bit larger than non-interlaced ones, so use interlacing only when it makes sense.

When to use them

Generally, GIF files should be used for logos, line drawings and icons. Avoid using it for photographic images, and graphics which have long stretches of continuous-tone in them. When you're designing GIF files, avoid using gradients and turn off anti-aliasing where possible to minimize the file size.

The JPEG Format

The JPEG format, with its support for 16.7 million colors, is primarily intended for photographic images. The internal compression algorithm of the JPEG format, unlike the GIF format, actually throws out information.

Depending on what settings you use, the thrown out data may or may not be visible to the eye. Once you lower the quality of an image, and save it, the extra data cannot be regained so be sure to save the original.

Progressive JPEG's

Any JPEG file can be saved as a Progressive JPEG. This is very similar to the interlaced GIF. As with GIF, this presents a low-quality image to your visitor at first, and over several passes improves the quality of it. Some graphic editing tools allow you to specify the number of passes before the image downloads completely.

When to use

As a rule, the JPEG format should be used on photographic images, and images which do not look as good with only 256 colors.

The PNG format

The third, and newest, file format that's widely supported by the Web is PNG (pronounced Ping). PNG was developed to surpass the limitations of GIFs, and as a means by which developers can avoid having to worry about the patent licenses associated with other formats.

PNG was designed to offer the main features of the GIF format, including streaming and progressive file formats.

It also provides greater depth of color, catering to images up to 24 bit in color. It's expected that support for PNG will be widespread in the near future, although it will never completely replace GIF, as it doesn't support animation.

Graphics

Displaying Images in Web Pages

A graphic image is placed on a Web page by making reference to the location of a GIF, PNG, or JPEG file. The image file is then downloaded from the Web server along with the page. As the browser displays the page, this reference is used to retrieve the image and place it on the page.

The <img/> Tag

Graphic images are placed on Web pages by using the <img/> tag. The general format for this tag is shown in Figure. Note that the <img/> tag is not a container tag and does not require a separate closing tag.

General format for <img/> tag

An <img/> tag appears on the Web page at the location at which the image is to be displayed. The src (source) attribute gives the location of the image file. This can be a local or remote URL.

The alt (alternate text) attribute is required under XHTML 1.1 standards. It provides a text description of the picture which displays inside a small pop-up box when the mouse cursor is moved on top of the image.

It is always a good idea to include the alt attribute, especially to accomodate users with visual impairment. Special browser software can verbalize the text string when the picture itself cannot be viewed in detail. Therefore, you should take care to provide alt text that gives an accurate and useful description of the picture.

Also, browsers can display the text while waiting for the image to download, thereby giving visitors a text preview of the visual contents of the page. Finally, some people prefer to turn off display of graphic images altogether to speed up page downloads or when printing the page; these pop-up boxes help to identify images that are not otherwise displayed.

Note that an <img/> tag is an in-line tag and cannot appear on a line by itself under XHTML standards. The tag must be coded inside a <p>, <div>, or other block-level tag as its container element.

Displaying Local Images

An image file can be located in the same directory as the Web page which displays it; or you can create a separate folder for storing images, usually subordinate to the Web page directory. If the file is in the same directory as the Web page, only the file name is needed as the src URL, as shown in the following listing.

Listing Displaying an image located in the same directory as the Web page.

Figure show the display of this image file. Move your cursor on top of the image to view the pop-up box containing the alt description of this picture.

Display of image file

If the image file is in a different directory from the Web page that displays the picture, then the path to that folder needs to be coded as part of the src URL. In the following example an image file is located in the Media folder, a subdirectory of the directory containing the Web page that displays the image.

Image Size

Unless you specify otherwise, an image is displayed at its original width and height. By coding the width and/or height style you can resize the image for display. If you intend to resize the image proportionately, you need only to code either a width or height dimension.

The browser determines the appropriate size for the other dimension to maintain proper scale. However, you can purposely distort an image by coding disproportionate width and height sizes.

The following image is displayed in two sizes -- its original size and at 1/2 its original size. Only the width is changed to permit the browser to set the picture height to maintain proportionality.

Deprecated Image Attributes

There are a number of deprecated <img/> tag attributes that are being replaced by style settings. You are likely to encounter these attributes on older Web pages, but you are encouraged not to use them on your pages.

border="n"

A solid black border is drawn around the image with the border attribute. The size of the border is given in n pixels.

align="top|middle|bottom"
align="left|right"

One version of the align attribute controls the placement of text surrounding the image. When using align="top", align="middle", or align="bottom", the image appears in-line -- on the same line as surrounding text -- and accompanying text is aligned with the top, middle, or bottom of the picture.

These three alignments attributes are identical in effect to the vertical-align style properties text-top, middle, and text-bottom. If alignment is not specified in the <img/> tag, the image appears in-line with surrounding text aligned with the bottom edge of the picture.

A second variation of the align attribute controls word-wrap around the image. When align="left" or align="right" is coded, the image appears at the specified left or right margin of the page with accompanying text wrapped around it.

The <img/> tag must appear immediately before the text that is wrapped around it. These alignments are identical in effect to the float:left and float:right style properties.

hspace="n"
vspace="n"

You can insert space around an image by using either or both the hspace (horizontal spacing) or vspace (vertical spacing) attributes and specifying the number of pixels for each. The hspace attribute specifies the number of pixels of blank space to leave on the left and right sides of the image; the vspace attribute specifies the number of pixels to leave at the top and bottom of the image. Unlike using margin style settings, you cannot control spacing on individual sides of the image.

height="n"
width="n"

Image sizes are controlled by height and width attributes. These work identically to their style property counterparts, using pixel measurements to set image sizes.

Graphics

Background Images

Any XHTML container, from the tag down through the tag, can use graphic images as backgrounds behind their text content. Of course, you need to be judicious in selecting images that do not overpower or detract from the text communication intended by the page.

Image Sources

Most background images are textures rather than pictures. Pictures tend to be too and distract attention from the message. These textures are either standard GIF or JPEG images; plus, the images are usually not the full size of the container for which they provide the background.

Textures are small, specially designed images that can be repeated across and down a page and fit together seamlessly to form a smooth backdrop.

The accompanying graphic is typical of an image used as a background for page elements. It displays a texture that fits together side by side when the image is repeated horizontally and vertically across and down the background area of the page element.

Repeatable textures such as this are sometimes difficult to make, but there are plenty to choose from at most Web clip-art sites.

Background Styles

There are four style properties pertinent to displaying background images behind text containers. These styles, shown in Figure 5-20, select an image, repeat an image, position an image, and affix an image for text over-scrolling. Not all properties are required for all background images.

Property:		Value
background-attachment		Sets how a background image is attached to a document, whether or not the image scrolls with the text. fixed scroll
background-image		Sets the background image of page element specified as url(url) none
background-position		Sets the location of the top-left corner of the background image relative to the top-left corner of the container element, using a measurement, a percentage, or a keyword or pair of keywords. left top left% top% top\|right\|bottom\|left\|center top left\|top center\|top right center left\|center center\|center right bottom left\|bottom center\|bottom right
background-repeat		Sets whether background image repeats horizontally, vertically, in both directions, or not at all. repeat-x repeat-y repeat no-repeat

Background style properties

A background image is specified with the background-image:url(url) property, where the location of the image file is given by its url address. If the image file is stored in the same location as the page, only the file name need be coded.

If no other style settings are made pertaining to the background image, it is repeated horizontally and vertically, across and down the container, to fill the background with the image.

Creating Links

Text Links

The feature that best characterizes the World Wide Web is the ability to link directly from one page to any other page anywhere on the Web. Normally, this hyperlinking is triggered by a mouse click on a letter, word, phrase, or graphic image on the linking page, with the linked page retrieved and loaded immediately into the browser.

Web links can be made to local pages on the same Web server as the linking page or to a page at any other site on the Web. This is a very powerful yet easy to use feature that permits you to navigate to pages located around the world with the simple click of the mouse.

The <a> Tag

The most common type of link is a clickable word or phrase that transfers directly to the target page. A text link is created by surrounding the text string with an <a> anchor tag specifying the location of the page to which to link. The basic format of the tag is shown in Figure.

<a href="url">linking text</a>

General format for <a> tag

The linking text is, by default, underlined and displayed in blue as a visual clue that the text string is a clickable link. The location of the linked page is given by the href (hyperlink reference) attribute.

You can link to your own page or to a page at a remote Web site. If the local linked page resides in the same directory as the linking page, then only the page name is needed as the URL. If the linked page is on the same Web server as the linking page but in a different directory, then the directory path to that target page is used as the URL (a relative link).

If the linked page is at a different Web site, the link must include the protocol and domain reference "http://domain name" (an absolute link). You can link to the site name to retrieve the default home page or, if it is known, to a particular page at that site.

<a href="same">Reload This Page</a>
<a href=http://www.ebizelindia.com target="_blank" >eBIZ home page </a>

Recall that an <a> tag is an in-line tag and to meet XHTML 1.1 standards must be enclosed inside a block-level tag such as a <p> or <div> tag.

Deprecated target Attribute

Unless instructed otherwise, the linked page opens in the same browser window that displays the linking page. The original page is replaced by the linked page. It is often convenient, especially when linking to remote sites on the Web, to open that page in a different browser window.

When visitors leave your site to browse remote sites they may not be able to back-click their way to your original page. By opening remote sites in a new window your visitors do not lose contact with your pages. Your site is always available in the original window.

You can specify how a linked page is to be opened by coding a target="_window" attribute in the <a> tag. Special values are coded to indicate the target window, each term prefixed with an underscore ( _ ) character. These target window codes are:

_blank	a new window
_self	the current window (default)
_top	the full browser window (relevant when using frames)
_parent	the parent frame (relevant when using frames)

In the following example a remote site is opened in a new browser window; the page containing the link remains visible in the original browser window.

The target attribute is not valid under XHTML 1.1 standards. Still, it is always a good idea to open remote Web sites in a separate browser window. You can handle this situation without violating XHTML standards with the technique described next.

Targeting a New Browser Window

You can open a Web page in a new browser window without violating XHTML standards by adding JavaScript statements to your anchor tag. JavaScript is the default programming language for browsers, but you do not need to know the language in order to use this technique to open pages in a new browser window.

The above code includes a JavaScript onclick "event handler" to trap user clicks on the text link. Clicking on the link runs the open() statement to open the given URL in a new browser window. The href="javascript:" attribute replaces the normal link URL with an indication that a JavaScript routine is run rather than linking to a page. You can use this code for your local or remote links simply by changing the URL and text display values. Make sure you code the surrounding quotes in the exact manner as given.

Link Styles

Text links are displayed in three different colors to identify three conditions of a link. An unvisited link is displayed in blue, a visited link is displayed in purple, and an active link (the mouse button is clicked while pointing at the link text) is displayed in red. Also, text links are underlined. You can override these default colors and underlines as well as include other visual indicators of link status with the style sheet selectors for the <a> tag shown in Figure.

Property:		Value
a:link a:hover a:active a:visited		Any text properties.

Link selectors and stylings

The a:link selector identifies an unvisited link, the a:hover selector identifies a link with the mouse positioned over it, the a:active selector identifies a link being clicked, and the a:visited selector identifies a link that has been visited. Any combination of text style properties and values can be applied to these linking states. The following style sheet illustrates possible settings for the four link states.

Setting styles for text links.

A normal unvisited link is colored blue but does not display the underline. When the mouse cursor is moved on top of the link it changes to green, is underlined, and is displayed in 14pt size. When the link is clicked its color changes to red. A visited link is displayed at 12pt gray with no underline.

On-Page Links

Links are normally made between different Web documents so that visitors can navigate between pages. Links can, however, be made to different locations in the same document. These on-page links are often used to link from a table of contents at the top of a page to information appearing elsewhere on the same page.

<a href="#name">link text</a>
...
<a id="name">target text</a>

General formats for <a> tags to create on-page links

Creating Links

Graphic Links

Links can be triggered by graphic images by enclosing an <img/> tag inside an <a> tag. The general format for assigning links to graphic images is shown below.

General format for graphic link.

Images are particularly effective for links since, with informative graphics, you can tell at a glance the site destinations. The links coded in Listing and shown in Figure are made from images taken from their associated sites.

Code to create graphic and text links

eBIZ.com Pvt.Ltd.

Graphic and text links

By default, the link graphic is surrounded by a border to indicate that it is a link, serving the same purpose as the underline style of text links. In this example the border is suppressed by including a style sheet to set image borders to 0px in width.

When using graphic images as links it is also a good idea to provide text links as well. This is done in the current example by including separate text links which are aligned at the middle of their associated images through the style sheet vertical-align property.

Creating Links

Image Maps

An image map is a graphic image with clickable areas that link individually to different pages. Often, images maps are used to display a large image on the opening page of a site, with portions of the image representing links to the separate site areas to which the visitor can navigate. The clickable areas of the graphic can take the form of circles, rectangles, and/or multi-sided polygons.

The image map and accompanying text links shown in below are on-page links to headings appearing farther down the page. This image map uses graphics of the basic shapes that can be defined for clickable areas. These shapes, however, can be superimposed on any type of graphic, including photographs and complex line drawings.

Determining Mapped Areas

To create an image map you start with the picture on which you wish to map clickable areas. Then, using a graphic program to display the image, you determine the shapes and sizes of the different areas to which you wish to assign links.

Usually, graphic programs display the horizontal and vertical coordinates of the mouse pointer as you move it around the image. By viewing this display, you can determine the exact pixel coordinates that define the shapes of those clickable areas. Once this information is determined, you can code the XHTML to convert the picture to an image map.

Figure shows the picture from which the above image map is made. The image is displayed in the Windows Paint program which can track the movement of the mouse around the image.

Determing horizontal and vertical coordinates on graphic image

Notice in the status bar of the window that the horizontal and vertical coordinates of the "pencil" pointer are displayed. The pointer is at one of the corners of the polygon shape and the tracking position shows 175,200; that is, the pointer is 175 pixels from the left edge of the image (horizontal position) and 200 pixels from the top edge of the image (vertical position). Coordinates are always measured from the top-left corner of the full image.

You need different positioning information depending on the shape of the mapped area.

For a rectangle you need to know the horizontal and vertical coordinates of the top-left and bottom-right corners. These two h,v coordinates can be determined by placing the pencil pointer at each of these corners and reading the coordinates from the status bar. In the above graphic these two pixel coordinates are top-left = 8,13 and bottom-right = 130,123.

For a circle you need to know the coordinates of the center point and the pixel width of the radius. The center coordinates of the above circle are determined by positioning the pencil pointer at the (approximate) center and reading the status bar = 228,123. The radius is the distance from the center to the edge of the circle. You can determine the radius by reading the coordinates of the right edge of the circle (at the same vertical position as its center point) and finding the difference between the horizontal center and horizontal edge: radius = (290 - 228) = 62.

For a polygon you need to know the coordinates of each of its corner points tracing either clockwise or counter-clockwise around its boundaries, starting at any corner point on the polygon. Tracing clockwise from the top of the above polygon the coordinates are 100,144; 175,200; 155,255; 50,250; and 45,172.

With these shape coordinates in hand you are ready to code the image map and to assign URL links to the different shapes.

Coding an Image Map

The image to become an image map is placed on the page using an <img/> tag. Along with its standard attributes this tag contains a usemap="mapname" attribute that points to a like-named <map> tag giving descriptions of the areas of the image that are clickable for linking. The general formats for the <img/> and <map> tags are shown in Figure.

Associating a displayed image with an image map

In the <img/> tag a #mapname is assigned in order to associate the image with a <map> tag identified by mapname. Inside the <map> tag are <area/> tags, one for each mapped area in the image. These tags specify the shape, pixel coordinates, and link page for all clickable areas.

The following code defines the picture shown above in Figure as an image map with links to different on-page headings on a Web page.

Coding an image map

Note the relationship between usemap="#MyImageMap" in the <img/> tag and id="MyImageMap" in the <map> tag. The id "MyImageMap" associates the image map with the graphic image. Also, when coding the final page, both the <img/> and the <map> tags must appear inside a block-level tag such as a <p> or <div>.

The <area/> tags give the coordinates (coords) to define the individual shapes and to associate a URL with a mouse click on that shape. In this example the URLs are on-page links; you can link to other pages at your site or to external Web sites.

• When shape="rect" (rectangle), the coords are specified by four numbers separated by commas. This notation represents two pairs of h,v coordinates, the first pair giving the coordinates of the top-left corner of the rectangle and the second pair giving the coordinates of the bottom-right corner (8,13,130,123).

• When shape="circle", the coords are specified by three numbers separated by commas. The first two numbers represent the h,v coodinates of the center point of the circle and the last number is the pixel width of the radius (228,123,62).

• When shape="poly" (polygon), the coords are specified by as many pairs of h,v coordinates as there are points on the polygon. Number pairs can be listed clockwise or counter-clockwise around the polygon; they are separated by blank spaces (100,144 175,200 155,255 50,250 45,175).

The <map> tag can appear anywhere on the page. Wherever it might be located in the body of the document it is associated with the proper <img/> tag through the map name.

Even if you produce image maps with the alt attribute coded for each clickable area along with alt text for the <img/> tag itself, it is still a good idea to provide a set of comparable text links for visitors with text reader software or for those who have graphics turned off in their browsers.

Overlapped Map Areas

If necessary, you can have overlapping mapped areas. When the mouse is clicked in the overlap area, the link that takes precedence is the one associated with the shape that is coded first in the <map> tag.

In the example in Figure, a click in the overlap area links to the URL specified for shape="rect" since its definition appears prior to shape="circle" in the image map, even though the graphic of the circle overlays the graphic of the rectangle.

Precedence of overlapped image map areas

You might also wish to assign a link to the area of an image that is not specifically mapped to any of the shapes. A link associated with this "background" shape should appear last in the list of <area/> tags so that it does not take precedence over other shapes as an overlapping image. The coordinates for the backgound would encompass the entire rectangular area of the picture.

Coding for an Image Map Page

The following listing shows image map and link coding for the page described in the current example. The text paragraphs are not fully coded, only the on-page links to these sections of the page.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>Using Image Maps</title>
 
<style type="text/css">
  body    {margin:20px}
  .center {text-align:center}
</style>

</head>
<body>

<h2 class="center">Using Image Maps</h2>

<p class="center">
<img src="img1.jpg" usemap="#MyImageMap" 
alt="Image Map" style="border:0px/">

<map id="MyImageMap">
  <area shape="rect" coords="51,9,205,78"
    href="#LINK1" alt="Determining Mapped Areas" />
  <area shape="circle" coords="410,219,79"
    href="#LINK2" alt="Coding an Image Map"/>
 <area shape="poly" coords="12,274,96,247,96,306,68,281,48,312,9,273"
    href="#LINK3" alt="Overlapped Mapped Areas"/>
</map>
</p>

<p class="center"">
<a href="#LINK1">Determining Mapped Areas</a> | 
<a href="#LINK2">Coding an Image Map</a> | 
<a href="#LINK3">Overlapped Mapped Areas</a>
</p>

<h3><a name="LINK1">Determining Mapped Areas</a></h3>
  ...text...
<p><a href="#">Top</a></p>


<h3><a name="LINK2">Coding an Image Map</a></h3>
  ...text...
<p><a href="#">Top</a></p>


<h3><a name="LINK3">Overlapped Mapped Areas</a></h3>
  ...text...
<p><a href="#">Top</a></p>

</body>
</html>

Coding for image map page

Click here to view the file

This example uses on-page links for the image map. The href attribute of an <area/> tag can likewise open an external Web site in the same or in a new browser window.

Deprecated usemap Coding

The general format shown above for the usemap attribute of the <img/> tag,

usemap="#mapname"

prefixes the mapname with the "#" symbol. Under XHTML 1.1 standards, however, this symbol is illegal. Current standards require the attribute to be in the simplified format: usemap="mapname" without the prefix symbol. The problem is that some browsers do not conform to the standards and do not recognize the recommended format.

Therefore, you may need to use the older format for the usemap attribute to get image maps to work correctly. The only drawback is that the page will not validate under the W3C validation service.

Working with Tables

XHTML <table>Tag

Tabular arrangements of data into rows and columns can help the viewer sort through masses of data to understand their underlying structure and content. So, tables are useful devices for presentation of information in a meaningful form. At the same time, tables can be used to structure the layout of a Web page regardless of its content.

You can produce a variety of page designs simply by designing different table structures into which your page information will fit. In short, tables are important presentation devices, and you need to know as much as you can about how to use them.

The <table> tag is used to create a table with rows and cells. The table contains a body <tbody>, header <thead>, a table row <tr>, a table data <td> and a table footer <tfoot>. A table can be very useful if you want to show a report with a header and some data. It can be also useful if you want to show an image with some text next to it.

But as mentioned the main aspect of tables was to show data. However in today’s world we use the tables also for navigation bars and for page layouts to have a cleaner structured as well as organized look.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
 <h3>XHTML table demo</h3>
  <table border="1">
  <thead>
  <tr>
    <th>Name</th>
    <th>EMail</th>
    <th>Permission</th>
  </tr>
  </thead>
   
  <tr>
    <td>Sonu</td>
    <td>sonu@XXXX.com</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td>Mithilesh</td>
    <td>info@XXXX.com</td>
    <td>Admin</td>
  </tr>
   
   
  <tr>
    <td colspan="3"><b>2 Users found</b></td>
  </tr>
   
</table>

 </body>
</html>

Output

Click here to view the file

Attributes

Name:	Description:
align	Aligns the table with one of the following options. left right center
border	Defines the thickness of the border in pixel.
bgcolor	Defines the background color of the table. The value must be in hex form (#XXXXXX) or you can use the color name.
cellpadding	Defines the inner distance between the cells and the cells content in pixel or percent.
cellspacing	Defines the distance between the cells in pixel or percent.
frame	This attribute can be only used in conjunction with the border attribute. And it defines which frames of the table should be visible with one of the following options. void above below hsides lhs vsides box border
rules	This attribute can be only used in conjunction with the border attribute. Defines which of the divider lines should be visible with one of the following attributes. none group rows cols all
summary	Defines the summary of the table for speech-synthesizing.
width	Defines the width of the table in pixel or percent.

Working with Tables

XHTML<tfoot>Tag

This tag <tfoot> is used to define table footer in the table. If you are using this tag you will also have to use the <thead> for the header and <tbody> for the body tag. This can be very useful if you want to print long tables, because the header and footer will be shown on each page.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Table Footer </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <table border="1">  
<![CDATA[ XHTML table footer ]]>

  <tfoot>
  <tr>
    <td colspan="3"><b>2 Users available</b></td>
  </tr>
   </tfoot>
  <thead>
  <tr>
    <th>Name</th>
    <th>EMail</th>
    <th>Permission</th>
  </tr>
  </thead>
   <tr>
    <td>Sonu</td>
    <td>sonu@XXXX.com</td>
    <td>Admin</td>
  </tr>
  <tr>
    <td>Mithilesh</td>
    <td>mithilesh@XXXX.com</td>
    <td>Admin</td>
  </tr>
 
</table>

 </body>
</html>

Output

Click here to view the output.

Attributes

Name:	Description:
align	Aligns the table cell with one of the following options horizontal. left right center
char	This attribute can be only used if you set the align attribute to char. The usage of the attribute is to set the alignment character. This can be very useful if you have a table row with decimal numbers and would like to align the row according to the decimal point.
charoff	Defines in conjunction with the “align” attribute the position of the alignment character.
valign	Aligns the column vertically with one of the following options. top middle bottom baseline

Working with Tables

XHTML<th>Tag

The <th> tag is used to define a table header. You should include this tag nested in a <tr> row tag. It can be useful to show some header information about the current row. The <th> tag just displays the text as bold.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML TH </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>

 <table border="1">

  <thead>

  <tr>
 <![CDATA[ XHTML TH tag]]>

    <th>User</th>

    <th>EMail</th>

    <th>Permission</th>

  </tr>

  </thead>
 <tfoot>

  <tr>

    <td colspan="3"><b>2 Users available</b></td>

  </tr>

 
  </tfoot>
 
  <tr>

    <td>Sonu</td>

    <td>sonu@XXXX.com</td>

    <td>Admin</td>

  </tr>

  <tr>

    <td>mithilesh</td>

    <td>mithilesh@XXXX.com</td>

    <td>Admin</td>

  </tr>

 
 

</table>

 </body>
</html>

Attributes

Name:	Description:
abbr	Defines a short version of the content of the cell.
align	Aligns the table cell with one of the following options horizontal. left right center
axis	Defines a list of categories, which belongs to the cell.
bgcolor	The background color of the page. The value can be one of the following: rgb(x,x,x) = the color values from 0-255 #xxxxxx = hex value of the color Colorname = any colorname
char	This attribute can be only used if you set the align attribute to char. The usage of the attribute is to set the alignment character. This can be very useful if you have a table row with decimal numbers and would like to align the row according to the decimal point.
charoff	Defines in conjunction with the “align” attribute the position of the alignment character.
colspan	Defines through how many cells the current cell is spanned.
headers	Defines a list of IDs of rows and columns that supplies header information.
height	Defines the height of the cell in pixel or percent.
nowrap	This is an empty attribute and defines that the cell isn’t wrapped.
rowspan	Defines through how many rows the current row is spanned.
scope	Specifies for the rest of the row and column the header information. The value must be one of the following values. row col rowgroup colgroup
valign	Aligns the cell vertically with one of the following options. top middle bottom baseline
width	Defines the width of the cell in pixel or percent.

Working with Tables

XHTML<tbody>Tag

The <tbody> tag is used to define the body of a table. In that part you can declare the table data part. The <tbody> tag is not necessary; if you do not use it your table body will still appear. The <tbody> is only an indication that the table body has started. The body can include <th> rows and <td> data. If you decide to use the <tbody> tag then you have to use also the <thead> and <tfoot> tags.

Example

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML tbody </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <table border="1">
  <![CDATA[Table Header]]>
  <thead>
  <tr>
    <th>Name</th>
    <th>EMail</th>
    <th>Permission</th>
  </tr>
  </thead>  

  <![CDATA[Table Footer]]>

  <tfoot>
  <tr>
    <td colspan="3"><b>2 Users Available </b></td>
  </tr>
   </tfoot>  
   <![CDATA[Table Body]]>

  <tbody>
  <tr>
    <td>Sonu</td>
    <td>sonu@XXXX.com</td>
    <td>Admin</td>
  </tr>
  <tr>
    <td>mithilesh</td>
    <td>mithilesh@XXXX.com</td>
    <td>Admin</td>
  </tr>
  </tbody>

</table>

 </body>
</html>

Output

Attributes

Name:	Description:
align	Aligns the table with one of the following options. left right center
char	This attribute can be only used if you set the align attribute to char. The usage of the attribute is to set the alignment character. This can be very useful if you have a table row with decimal numbers and would like to align the row according to the decimal point.
charoff	Defines in conjunction with the “align” attribute the position of the alignment character.
valign	Aligns the column vertically with one of the following options. top middle bottom baseline

Working with Tables

XHTML<td>Tag

The <td> tag is used to create a cell in a table. The data can be written between the tags. Usually this tag is nested in a <tr> row tag.

Example:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML TD tag </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <table border="1" cellspacing="1" cellpadding="0">
  <![CDATA[Table Header]]>

  <thead>

  <tr>

    <th>Name</th>

    <th>EMail</th>

    <th>Permission</th>

  </tr>

  </thead>
  <![CDATA[Table Footer]]>
  <tfoot>

  <tr>

  <![CDATA[Table Cell to display data]]>
    <td colspan="3"><b>2 Users available</b></td>

  </tr>

 

  </tfoot>
  <![CDATA[Table Body]]>

  <tbody>

  <tr>

    <td>Sonu</td>

    <td>sonu@XXXX.com</td>

    <td>Admin</td>

  </tr>

  <tr>

    <td>Mithilesh</td>

    <td>Mithilesh@XXXX.com</td>

    <td>Admin</td>

  </tr>

  </tbody>
</table> 
 </body>
</html>

Output:

Click here to view the file.

Attributes

Name:	Description:
abbr	Defines a short version of the content of the cell.
align	Aligns the table with one of the following options. left right center
axis	Defines a list of categories, which belongs to the cell.
bgcolor	The background color of the cell. The value can be one of the following: rgb(x,x,x) = the color values from 0-255 #xxxxxx = hex value of the color Colorname = any colorname
char	This attribute can be only used if you set the align attribute to char. The usage of the attribute is to set the alignment character. This can be very useful if you have a table row with decimal numbers and would like to align the row according to the decimal point.
charoff	Defines in conjunction with the “align” attribute the position of the alignment character.
colspan	Defines through how many cells the current cell is spanned.
headers	Defines a list of IDs of rows and columns that supplies header information.
height	Defines the height of the cell in pixel or percent.
nowrap	This is an empty attribute and defines that the cell isn’t wrapped.
rowspan	Defines through how many rows the current row is spanned.
scope	Specifies for the rest of the row and column the header information. The value must be one of the following values. row col rowgroup colgroup
valign	Aligns the cell vertically with one of the following options. top middle bottom baseline
width	Defines the width of the cell in pixel or percent.

Working with Tables

XHTML<tr>Tag

The <tr> tag is used in a table to create a new row. In a <tr> tag you can define the data with the <td> tag.

Example:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML TR tag </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <table border="1" cellspacing="1" cellpadding="0">
  <![CDATA[Table Header]]>

  <thead>
 <![CDATA[Table ROW that contains CELLS]]>
  <tr>

    <th>Name</th>

    <th>EMail</th>

    <th>Permission</th>

  </tr>

  </thead>
  <![CDATA[Table Footer]]>
  <tfoot>

  <tr>

  <![CDATA[Table Cell to display data]]>
    <td colspan="3"><b>2 Users available</b></td>

  </tr>

 
  </tfoot>
  <![CDATA[Table Body]]>

  <tbody>

  <tr>

    <td>Sonu</td>

    <td>sonu@XXXX.com</td>

    <td>Admin</td>

  </tr>

  <tr>

    <td>Mithilesh</td>

    <td>Mithilesh@XXXX.com</td>

    <td>Admin</td>

  </tr>

  </tbody>

  

</table>
 </body>
</html>

Output:

Click here to view the file.

Name:	Description:
align	Aligns the row with one of the following options. left right center
bgcolor	The background color of the row. The value can be one of the following: rgb(x,x,x) = the color values from 0-255 #xxxxxx = hex value of the color Colorname = any colorname
char	This attribute can be only used if you set the align attribute to char. The usage of the attribute is to set the alignment character. This can be very useful if you have a table row with decimal numbers and would like to align the row according to the decimal point.
charoff	Defines in conjunction with the “align” attribute the position of the alignment character.
valign	Aligns the row vertically with one of the following options. top middle bottom baseline

Working with Tables

Text Alignment

Normally, table cells are only as large as the data they contain. Their borders close in around the data. Often, this effect makes a table seem crowded and not particularly easy to read. You can, however, introduce white space around data within table cells and you can expand the amount of space between cells.

Cell Padding

Cell padding refers to the amount of blank space surrounding the text within a cell. Its value is set with padding applied to the cell selector in a style sheet. In the following table, padding of 5 pixels is placed around the data in the table cells.

A table with cell padding

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>XHTML TD Padding tag </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 <![CDATA[Style sheet to Format table]]>
  <style type="text/css">
  table    {
  border:inset 2px #33FFFF
  }
  table td {
  border:inset 2px #FFCC33; 
  padding:5px
  }
</style>

 </head>

 <body>
  <table border="1" cellspacing="1" cellpadding="0">
  <![CDATA[Table Header]]>

  <thead>
 <![CDATA[Table ROW that contains CELLS]]>
  <tr>

    <th>Name</th>

    <th>EMail</th>

    <th>Permission</th>

  </tr>

  </thead>
  <![CDATA[Table Footer]]>
  <tfoot>

  <tr>

  <![CDATA[Table Cell to display data]]>
    <td colspan="3"><b>2 Users available</b></td>

  </tr>

 
  </tfoot>
  <![CDATA[Table Body]]>

  <tbody>

  <tr>

    <td>Sonu</td>

    <td>sonu@XXXX.com</td>

    <td>Admin</td>

  </tr>

  <tr>

    <td>Mithilesh</td>

    <td>Mithilesh@XXXX.com</td>

    <td>Admin</td>

  </tr>

  </tbody>

  

</table>
 </body>
</html>

Style sheet to apply padding to table cells

Click here to view the file.

Cell Spacing

Cell spacing refers to the amount of space, in pixels, between the cells of the table, effectively, the width of the inner borders between cells. Although CSS standards propose the border-spacing property to adjust this spacing, current browsers do not recognize it. Therefore, cell spacing must be applied with the deprecated cellspacing="n" attribute of the <table> tag, specifying the number of pixels between cell borders. Although this is a deprecated attribute, it remains valid under XHTML Strict standards. In the following example, cellspacing is set to 10px.

A table with cell spacing

<style type="text/css">
  table    {
border:outset 1
}
table td {
border:inset 3; 
padding:5px
}
</style>

<table border="1" cellspacing="3">
...
</table>

Attribute to apply spacing between table cells

Click here to view the example.

Text Alignment

By default, text appears in a table aligned horizontally to the left of the cell and vertically within the middle of the cell. This alignment becomes noticeable when cell sizes are larger than needed to display their data

A table sized to show text alignment within cells You can, though, override these default horizontal and vertical alignments to position content anywhere within the cell.

Vertical Alignment

By using the vertical-align property, content can be aligned at the top, middle, or bottom of a cell. The table below applies these alignments separately to its three rows. Notice that the table is given width and height settings to make cells larger than needed so that vertical alignment of cell data is visually apparent.

  <style type="text/css">
  table         {
  border:outset 2px #FFCC00; 
  width:250px; 
  height:150px
  }
  table td      {
  border:inset 1px #FFCC33
  }
  table tr#ROW1 {
  vertical-align:top
  }
  table tr#ROW2 {
  vertical-align:middle
  }
  table tr#ROW3 {
  vertical-align:bottom
  }
</style>

Style sheet to apply vertical alignment of text within cells

Horizontal Alignment

By using the text-align property, content can be aligned at the left, center, or right of a cell. The following table applies these alignments separately to its three rows, which have vertical alignments like the previous table.

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

A table sized to show horizontal alignment within cells

<style type="text/css">
  table         {border:outset 1; width:250px; height:150px}
  table td      {border:inset 1}
  table tr#ROW1 {vertical-align:top; text-align:left}
  table tr#ROW2 {vertical-align:middle; text-align:center}
  table tr#ROW3 {vertical-align:bottom; text-align:right}
</style>

Style sheet to apply horizontal alignment of text within cells

Empty Cells

Borders surround cells only when there is data inside the cells. Otherwise, no borders are displayed. This effect can be seen in the first of the two tables in Figure where data are missing from three of the cells. This may be an acceptable display on occasion, but usually borders should display even around empty cells. This situation can be handled by coding a non-break space character ( ) in the cells, producing the second of the table displays where all borders are visible.

	Cell 1.2	Cell 1.3
Cell 2.1		Cell 2.3
Cell 3.1	Cell 3.2

	Cell 1.2	Cell 1.3
Cell 2.1		Cell 2.3
Cell 3.1	Cell 3.2

Tables with missing cell data

<table>
<tr>
  <td> </td>
  <td>Cell 1.2</td>
  <td>Cell 1.3</td>
</tr>
<tr>
  <td>Cell 2.1</td>
  <td> </td>
  <td>Cell 2.3</td>
</tr>
<tr> 
  <td>Cell 3.1</td>
  <td>Cell 3.2</td>
  <td> </td>
</tr>
</table>

Using non-break space characters to display borders around empty cells

Non-wrapped Table Cells

Be default, text within cells is word wrapped to fit within the overall size of the table. Normally, this is acceptable, to let the browser arrange cell content for best fit with the cells. For certain cells, however, you may not wish the browser to wrap its content. An example might be a row of column headings or a column of row labels. The following table shows default sizing and alignment of cell contents with non-wrapped display of column and row headings.

	Table Column 1	Table Column 2	Table Column 3
Table Row 1	Cell 1.1	Cell 1.2	Cell 1.3
Table Row 2	Cell 2.1	Cell 2.2	Cell 2.3

Table with properly spaced row and column headings

The problem arises when the table is resized, say when the browser window is sized smaller than the width of the table needed for non-wrapped presentation of data. When this happens the headings may wrap inside their cells leading to the table display shown below.

	Table Column 1	Table Column 2	Table Column 3
Table Row 1	Cell 1.1	Cell 1.2	Cell 1.3
Table Row 2	Cell 2.1	Cell 2.2	Cell 2.3

Table with improperly spaced row and column headings

There is nothing wrong content-wise with the table; it just looks different from what you intended. You can, though, prevent text wrapping in table cells by coding the white-space style property for any cell in which you do not wish text to be wrapped.

Property:		Value
white-space		normal nowrap pre

The white-space style property

This style property determines how the browser should handle white spaces within a text string. The normal setting collapses all contiguous spaces to a single space and breaks the line of text at a blank space where the remaining text on the line does not fit within the specified width of its container. In contrast, the nowrap setting treats spaces as non-break space characters ( ) and does not break the line. The pre setting works like a <pre> tag and retains as many blanks spaces as are coded, again treating them as non-break spaces.

If a table cell is not wide enough to display its text on a single line, then the text normally is wrapped at a blank space within the text string. This occurs with the column and row headings in the table in Figure. However, by setting the white-space:nowrap property for these table cells, wrapping of headings can be avoided. These specifications are made in recoding the table as follows.

	Table Column 1	Table Column 2	Table Column 3
Table Row 1	Cell 1.1	Cell 1.2	Cell 1.3
Table Row 2	Cell 2.1	Cell 2.2	Cell 2.3

Table with non-wrapped row and column headings

The following listing shows the complete code for the above table with non-wrapped cells. In this case style class .NOWRAP is defined with the property setting white-space:nowrap. All cells that should not permitting text wrapping are assigned to this class.

.......
<style type="text/css">
  table            {border:0; width:230px}
  table td         {border:inset 1; padding:3px} 
  table tr#C-HEAD  {font-weight:bold; 
background-color:#F0F0F0; text-align:center}
  table td#R-HEAD1 {font-weight:bold;
 background-color:#F0F0F0; text-align:left}
  table td#R-HEAD2 {font-weight:bold; 
background-color:#F0F0F0; text-align:left} 
  table td#BLANK   {background-color:#FFFFFF}
  .NOWRAP          {white-space:nowrap}
</style>
.......
.......

<table>
<tr id="C-HEAD">
  <td id="BLANK"> class="NOWRAP"</td>
  <td class="NOWRAP">Table Column 1</td>
  <td class="NOWRAP">Table Column 2</td>
  <td class="NOWRAP">Table Column 3</td>
</tr>
<tr>
  <td id="R-HEAD1" class="NOWRAP">Table Row 1</td>
  <td>Cell 1.1</td>
  <td>Cell 1.2</td>
  <td>Cell 1.3</td>
</tr>
<tr>
  <td id="R-HEAD2" class="NOWRAP">Table Row 2</td>
  <td>Cell 2.1</td>
  <td>Cell 2.2</td>
  <td>Cell 2.3</td>
</tr>
</table>
.......

Using non-wrapping of table cells
Output: try it yourself.

Deprecated Table Attributes

Text is horizontally aligned within cells with the align="left|center|right" attribute applied to the <tr>, <td>, or <th> tags. Text is vertically aligned within cells by applying the valign="top|middle|bottom" attribute to the cell.

Cell padding is specified with the cellpadding="n" (pixels) attribute coded in the <table> tag. Spacing between cells is given by the cellspacing="n" (pixels) attribute. The cellspacing attribute must be used until browsers adopt the proposed border-spacing style property.

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

Cell 1.1	Cell 1.2	Cell 1.3
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1	Cell 3.2	Cell 3.3

Wrapping of text within cells can be controlled by coding nowrap or nowrap="true" for any table cell: <td nowrap> or <td nowrap="true">.

Working with Tables

Column & Row Span

Table cells can be combined to make one larger cell from two or more contiguous cells. A cell can span two or more columns or two or more rows. One use of spanning is to display a heading across several columns as shown by the heading cells in the following table.

The colspan Attribute

In the above example the first row of the table is used for column headings. The cell specifications use the colspan="n" attribute to extend each of the <td> heading cells across 2 cells.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
<style type="text/css">
  table         {
  border:outset 1px #FFCC00
  }
  table td      {
  border:inset 1px #CCCCFF; 
  padding:3px;
  background-color:#E1E1E1
  }
  tr.HEAD { 
  font-weight:bolder;
  text-align:center;
  background-color:#CCCCFF ;
  font-family: Verdana

  }
   tr.SUBHEAD { 
  font-weight:bold;
  text-align:center;
   }

</style>
 </head>

 <body>
  

<table>
<tr class="HEAD">
  <td colspan="2">Name</td>
  <td colspan="2">Address</td>
</tr>
<tr class="SUBHEAD">
  <td>First Name</td>
  <td>Last Name </td>
  <td>City</td>
  <td>State</td>
</tr>
<tr>
  <td>Aman</td>
  <td>Singh</td>
  <td>Noida</td>
  <td>UP</td>
</tr>
</table>

 </body>
</html>

Code to span table cells

Click here to view the file.

Note that there is a need for only two <td> heading tags in the first row, although there are four <td> cell tags for each data row. Since each <td> heading tag spans two cells (colspan="2"), a total of four cells, the full width of the table, is accounted for.

The rowspan Attribute

In the same way that you span columns, you can span rows across two or more contiguous cells by using the rowspan="n" attribute as shown in Figure.

Heading	Cell 1.2	Cell 1.3	Cell 1.4
Heading	Cell 2.2	Cell 2.3	Cell 2.4

Table with spanned rows

<style type="text/css">
  table         {border:outset 1px}
  table td      {border:inset 1px; padding:3px}
  table td#HEAD {font-weight:bold;
                 text-align:center;
                 background-color:#F0F0F0}
</style>

<table>
<tr>
  <td id="HEAD" rowspan="2">Heading</td>
  <td>Cell 1.2</td>
  <td>Cell 1.3</td>
  <td>Cell 1.4</td>
</tr>
<tr>
  <td>Cell 2.2</td>
  <td>Cell 2.3</td>
  <td>Cell 2.4</td>
</tr>
</table>

Code to span table rows

Note that the first cell in the first row spans two rows. Therefore, there is one less cell to specify in the second row. The first row has four <td> tags; the second row needs only three <td> tags since the first cell in that row is encompassed by the previously spanned row.

Spanning Rows and Columns

You can span cells across rows and columns to produce interesting and useful table structures. The coding isn't that complex if you just follow closely across each row, determining whether you need to code a <td> tag for each cell position or whether you can leave out the <td> tag because the cell has already been spanned. In the following code the <td> tags that do not have to be coded are displayed in brackets [ ]. These cells are accounted for by other cells that have spanned across their table positions.

Cell 1.1		Cell 1.3	Cell 1.4
Cell 2.1	Cell 2.2	Cell 2.3
Cell 3.1		Cell 3.3

Table with spanned rows and columns

<style type="text/css">
  table    {border:outset 1px}
  table td {border:inset 1px; padding:3px}
</style>

<table>
<tr>
  <td colspan="2">Cell 1.1</td>
  [<td>Cell 1.2</td>]
  <td>Cell 1.3</td>
  <td rowspan="2">Cell 1.4</td>
</tr>
<tr>
  <td>Cell 2.1</td>
  <td rowspan="2">Cell 2.2</td>
  <td>Cell 2.3</td>
  [<td>Cell 2.4</td>]
</tr>
<tr>
  <td>Cell 3.1</td>
  [<td>Cell 3.2</td>]
  <td colspan="2">Cell 3.3</td>
  [<td>Cell 3.4</td>]
</tr>
</table>

Code to span table rows and columns

A Spanning Example

The output below is an example of using row and column spanning to produce a complex table structure.

Determining Cell Spanning

Before you begin coding it is a good idea to visualize the row and column spanning that needs to take place. Figure shows the table with vertical arrows indicating row spanning and horizontal arrows indicating column spanning. Once this structure is visualized, it becomes relatively easy to produce the code to describe the table.

Visualization of table with spanned rows and columns

Coding the Table Structure

The following code begins the table description with a caption followed by the coding for the first row of the table. At this point setting up the style sheet is not a consideration. Focus needs to be on the structure of the table and required column and row spanning.

<table>
<caption>Quantity and Value of Installed Software</caption>
<tr>
  <td rowspan="2">Software</td>
  <td colspan="2">Accounts</td>
  <td colspan="2">TECH</td>
</tr>

Code for column header spanning

Beginning at the top-left of the table in above notice that the first cell spans two rows. Thus, this top-left cell is coded with rowspan="2" to combine it with the cell beneath to produce a single, combined cell. Also note that this cell contains no content, only the pair of <td></td> tags. By leaving the cell empty, cell borders are not displayed. Moving from left to right across this first row, notice that the next cell, containing Department A, is not a single cell; it spans two horizontal cells. Therefore, the <td> tag contains colspan="2" to combine this cell with the one in the next column.

Moving to the right you come to the cell containing the heading Department B. Again, this is not a single cell, but a spanned cell that crosses two columns. This <td> tag, like the previous one, contains the colspan="2" attribute. You have now reached the end of the first row of the table. It is important to realize that, although you have coded only three cell descriptions, you have accounted for a total of five cells, the total number of columns in the full table. Always keep in mind this fact that you must describe as many rows and as many columns as there are in the full dimensions of the table.

Viewing the Table Structure

When the above coding is completed the overall structure of the table and the cell contents are finished. This unstyled table is shown in Figure. Borders have been added to help visualize the cells. The issue at this point is whether you have correctly produced the table structure, ignoring for the moment any styling of the cells.

Styling the Table

Now it is a matter of adding a style sheet to decorate the table. In this example, style classes are used to assign header, row, and footer styling. Class .HEAD is applied to the column headings, setting bold and centered text with a background color. Class .ROW formats each data row with right-aligned text, and class .LABEL overrides this row styling for the first cell in the row by aligning text labels to the left. Class .TOTAL formats the footer row with bold and right-aligned text with a background color.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> XHTML Row N Colspan demo  </title>
  <meta name="generator" content="jNote-iT" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>

 <body>
  <style type="text/css">
  table         {
  border:outset 1px #FFCC33
  }
  table td      {
  border:inset 1px #FFCC00; 
  padding:5px
  }
  table caption {
  font:bold 12px
  }
  .HEAD         {
  font-weight:bold; 
  text-align:center;
  vertical-align:middle;
  background-color:#F0F0F0
  }
  .ROW          {
  text-align:right
  }
  .LABEL        {
  text-align:left
  }
  .TOTAL        {
  text-align:right;
  font-weight:bold;       
  background-color:#F0F0F0
  }
</style>

<table>
<caption>Quantity and Value of Installed Software</caption>
<tr class="HEAD">
  <td rowspan="2">Software</td>
  <td colspan="2">Accounts</td>
  <td colspan="2">TECH</td>
</tr>
<tr class="HEAD">
  <td>No. of Copies</td>
  <td>Rs. Value</td>
  <td>No of Copies</td>
  <td>Rs. Value</td>
</tr>
<tr class="ROW">
  <td class="LABEL">Word Processors</td>
  <td>10</td>
  <td>700.00</td>
  <td>15</td>
  <td>1,050.00</td>
</tr>
<tr class="ROW">
  <td class="LABEL">Spreadsheets</td>
  <td>12</td>
  <td>780.00</td>
  <td>18</td>
  <td>1,170.00</td>
</tr>
<tr class="ROW">
  <td class="LABEL">J2EESDK</td>
  <td>0</td>
  <td>0</td>
  <td>1</td>
  <td>10000</td>
</tr>
<tr class="ROW">
  <td class="LABEL">Databases</td>
  <td>7</td>
  <td>595.00</td>
  <td>9</td>
  <td>765.00</td>
</tr>
<tr class="TOTAL">
  <td>Total Value</td>
  <td colspan="2">Rs. 2,075.00</td>
  <td colspan="2">Rs. 12,985.00</td>
</tr>
</table>
 </body>
</html>

Final code for table with style sheet attached.

Click here to view the file.

What appeared to be a complex coding exercise turns out to be fairly easily managed by separating structure from styling. First, work systematically across the rows of the table, coding all stand-alone cells and coding cells that require spanning, ignoring cells that are encompassed by a previous span. Then take a look at the raw table, making sure that its structure is correct. Finally, apply a style sheet to format those rows or cells that require styling.

Working with Tables

Using Tables for Page Layout

One of the best uses for tables is to organize the information appearing on a Web page. You can produce virtually any style of page layout by arranging your text, graphics, and links within the cells of a table that encompasses the entire body of the document. A common table layout for a page produces a header (banner) section at the top of the page, a menu section along the left side of the page, and the remaining area for page content.

The general structure of such a page is shown in image below, with dotted lines showing the table layout. Typically, all page of a Web site have this common layout. As visitors move from page to page, the banner and menu remain the same, with only the content section differing to reveal changing information. This type of layout produces a common look to all the pages of a site.

Designing a Page Layout

You begin development of a common page template by setting up a table that spans the width of the browser window. First you should create the table structure without worrying about the information that will populate the table cells. It is sufficient only to make sure that the layout is correct. A three-cell layout is shown below. Here, only table borders and suggestive cell content are displayed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sample Page Layout using Table</title>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
-->
</style></head>

<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td height="60" colspan="2"><div align="center">Header/Banner</div></td>
  </tr>
  <tr>
    <td width="16%" height="469">Menu</td>
    <td width="84%">Content Area </td>
  </tr>
</table>
</body>
</html>

At this point you just need to make sure that the cells are properly spanned and sized horizontally. The table will expand vertically as information is added to the cells. Create the table with borders to view its appearance, and place a notation in each cell indicating the information to appear.

The body of the page has margins set to 0px so that the table encompasses the entire browser window. The width of the table is 100%. This means that the Web page will always occupy the full width of the browser window irrespective of the window size or screen resolution. You may, if you prefer, give the table a fixed pixel width, normally the width anticipated for most visitors to your site. A table width of 100% is common for a full-screen browser window displayed on a monitor set to common 800 x 600 resolution.

The example layout gives a table height of 100% so that it extends to the height of the browser window. It is not necessary to specify a table height since the table will expand vertically as content is added. You also need to vertically align content at the top of all cells. The layout table contains two rows. The top row, occupied by the header, contains a single cell that spans two columns. The second row, occupied by the menu and content, contains two side-by-side cells.

In this example, the cell containing the header is given a fixed height of 60px. It is typical that this cell is sized to that of a graphic image occupying the entire cell. So this height needs to be adjusted to the graphic size. If the header is to contain only text, you can adjust the height to your preference. You can, though, leave the height unspecified and it will adjust itself vertically when actual content is placed in the cell.

The cell within which the menu or other fixed content appears is set to a width of 16%. You can adjust this width to your preference. Recall that browsers normally adjust cell widths equally to fill the available space. However, you do not want this to happen with the column used for menu items or links. It would look a little odd for a menu list to occupy half the screen.

Click here to view the file.

PC TRAINING

XHTML - PART IV

0 comments:

CATEGORIES

POPULAR POSTS

BLOG ARCHIVE

ABOUT ME

Categories

About

Link list 2

Follow us

Link list 3