HTML COLSPAN and ROWSPAN table settings

Table cells can span across more than one column or row. The attributes COLSPAN (“how many across”) and ROWSPAN (“how many down”) indicate how many columns or rows a cell should take up.

For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows span across two columns to indicate the department for each group of names.










Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

which gives us:

Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

It often happens with multiple-column cells that a little color helps to set off the headers, giving the table a more visually organized look. Let’s add some color to the headers using BGCOLOR.










Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

which gives this table:

Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It’s particularly useful in this situation to add borders to the table during the design process, even if the table won’t ultimately use borders.

This table code creates two header cells which span three rows each:






















Production Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

which creates

Production Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

Note that in the two rows after each header, the first cell in the row ends up in the second column because the first column is taken up by the multi-column cell.

Embedding a web cam feed into a web page

To embed an object in HTML document, the object class ID is required. The class ID for Windows Media Player 7, 9, 10 and 11 is clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6.
 
Embedding a Windows Media File
 
The example below shows the code for embedding a Windows Media file. Note that it uses two tags: and. This is to enable maximum browser compatibility.You will need to set the file name (and other attributes if required) for both tags. Use true or false for the tag, 1 or 0 for the tag.

To get started, all you have to do is copy the code above into your web page and replacevideofilename.wmv with your own file name.
Embedding a Windows Media Stream
The example below shows the code for embedding a live Windows Media stream to one of Tatton Park’s farm web cam’s.
To get started, copy the code and replace the URL of the web cam feed with your own feed URL.

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
Configuration
If you want to get more advanced you can alter the parameters below. Note that including extra features such as the status bar requires the player to have more height. Where applicable, we have shown the number of pixels required — if necessary, add this number of pixels to the height parameter.Autostart
If this value is set to true/1, the video will begin playback as soon as it has buffered. Otherwise it will wait for the user to pressPlay.ShowControls
If this value is set to true/1, the video transport controls will be shown (play,stop,pause, etc). If it is set to false/0, the controls will not be shown and the user will not be able to control playback at all. Obviously, in this case you would need to have autostart enabled or there will be no way to play the video.
Height: 46 pixelsShowStatusBar
If this value is set to true/1, the status bar is shown. This includes the buffering progress and playback status of the clip. Showing the status bar is a good idea as it shows the user how long they have to wait before the clip will be ready for playback
Height: 26 pixelsShowDisplay
When set to true/1, this displays information such as the file name.
Height: 74 pixels

The importance of doctype in stylesheets and html

I don’t know if many people realize how important it is to place the appropriate DOCTYPE declaration at the top of their HTML files so I have created the following HTML sample to illustrate some of the value:

<!DOCTYPE html PUBLIC
 “-//W3C//DTD XHTML 1.0 Transitional//EN”
 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html>
 <head>
  <title>Table Test</title>
 
  <style type=”text/css”>
   .myFont
   {
    font-family: Arial,
                 Helvetica,
                 sans-serif;
    font-size: 1.3em;
   }
  </style>
 </head>
 
 <body>
  <h1>Doctype</h1>
 
  <p>
   This is a simple page to test the
   effect of doctypes and what they
   do with your CSS.
  </p>
 
  <table border=”1″>
   <tr>
    <th>Name</th>
    <th>Surname</th>
   </tr>
  
   <tr>
    <td>Hannes</td>
    <td>Foulds</td>
   </tr>

   <tr>
    <td>Lize</td>
    <td>Taljaard</td>
   </tr>
  </table>
 </body>
</html>
This is what it looks like when the DOCTYPE is in place, notice how the font size we set in the body tag trickles down to all the child tags:
 
When we take out the DOCTYPE it ignores the font of the parent and renders thus:
 
I have provided the most common DOCTYPE declarations below and you may find them usefull:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
 “http://www.w3.org/TR/html4/strict.dtd“>

<!DOCTYPE HTML PUBLIC
 “-//W3C//DTD HTML 4.01 Transitional//EN”
 “http://www.w3.org/TR/html4/loose.dtd“>
<!DOCTYPE html PUBLIC
 “-//W3C//DTD XHTML 1.1//EN”
 “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“>
<!DOCTYPE html PUBLIC
 “-//W3C//DTD XHTML 1.0 Strict//EN”
 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<!DOCTYPE html PUBLIC
 “-//W3C//DTD XHTML 1.0 Transitional//EN”
 “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>