Kompx.com or Compmiscellanea.com

HTML table borders without CSS

Windows : Internet Explorer 3.0+, Netscape 3.04+, Opera 3.50+ [ 1 ], Mozilla 0.6+, Firefox 1.0+, Google Chrome, Safari 3.1+, SeaMonkey 1.0+.

Linux : Netscape 3.04+, Opera 5.0+, Mozilla 0.6+, Firefox 1.0+, Chromium, SeaMonkey 1.0+, Netsurf 3.0, Dillo [ 2 ].

DOS : Arachne [ 3 ].

Example n.1:

  HTML table borders without CSS  
cellspacing="2"   bgcolor="#ff6600"

HTML / XHTML. Code:

<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#ff6600">

<tr bgcolor="#ffffff">

<td width="33%" height="67">&nbsp;</td>

<td width="34%">HTML table borders without CSS</td>

<td width="33%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td height="67">cellspacing="2"</td>

<td>&nbsp;</td>

<td>bgcolor="#ff6600"</td>

</tr>

</table>

Example n.2:

  HTML table borders without CSS  
cellspacing="8"   bgcolor="#999999"

HTML / XHTML. Code:

<table width="100%" cellspacing="8" cellpadding="0" border="0" align="center" bgcolor="#999999">

<tr bgcolor="#ffffff">

<td width="33%" height="67">&nbsp;</td>

<td width="34%">HTML table borders without CSS</td>

<td width="33%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td height="67">cellspacing="8"</td>

<td>&nbsp;</td>

<td>bgcolor="#999999"</td>

</tr>

</table>

Example n.3 - for Netscape 3.04-6.0, Mozilla 0.6-0.92 and Arachne. It works in other web browsers as well:

  HTML table borders without CSS  
cellspacing="2"   bgcolor="#999999"

HTML / XHTML. Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#999999">

<tr>

<td>

<table width="100%" cellspacing="2" cellpadding="0" border="0">

<tr bgcolor="#ffffff">

<td width="33%" height="67">&nbsp;</td>

<td width="34%">HTML table borders without CSS</td>

<td width="33%">&nbsp;</td>

</tr>

<tr bgcolor="#ffffff">

<td height="67">cellspacing="2"</td>

<td>&nbsp;</td>

<td>bgcolor="#999999"</td>

</tr>

</table>

</td>

</tr>

</table>

HTML table borders without CSS

Some time ago, mostly (but not only) in 1990s there were several pure HTML tricks used to achieve things now done by CSS. Handling HTML table borders was one of them.

It is not exactly handling borders, but rather imitating doing it by exploiting the cellspacing and bgcolor attributes. Nowadays, as with centering page content by table tag, this method is perfectly usable, even if obsolescent in its concept.

The concept

1. The bgcolor attribute of the table tag is used to make the background of a table to be of a certain color.

2. The bgcolor attribute of the tr tag is employed to make the background of the table's content (i.e., rows and cells) to be of a certain, different from the table's background, color.

3. The cellspacing attribute of the table tag is used to create the space of a certain amount of pixels around the table cells. That space gets the color set by the bgcolor attribute of the table tag - since it differs from the background of rows and cells, this creates visual boundary line of the table's background color around the cells.

The steps aforementioned create in Arachne a visual boundary line only between the table cells, not around them. And these steps does not make at all any visual boundary line in Netscape 3.04-6.0 and Mozilla 0.6-0.92. So an additional table around the first one should be created.

The bgcolor attribute of the table tag is removed from the inner table and given to the outer one. The cellspacing attribute of the outer table is set to "0". It creates the required visual boundary both in Arachne and Netscape 3.04-6.0, Mozilla 0.6-0.92.

This method works not only in Netscape 3.04-6.0, Mozilla 0.6-0.92 and Arachne, but also in other web browsers as well, so it may be used as a universal one.

Demo page for Internet Explorer 3.0 - the content text is also styled and centered without CSS: [ Open demo page ] [ Download archive file ].

Internet Explorer for Windows, older versions ( Download pack, containing 3.0, 4.01, 5.01, 5.5, 6.0 versions of Internet Explorer )

Demo page for Netscape 3.04-6.0 and Mozilla 0.6-0.92 - the content text is also styled and centered without CSS: [ Open demo page ] [ Download archive file ].

Netscape Navigator 3.04 for Windows ( Download )

Netscape Communicator 4.7 for Windows ( Download )

Netscape Navigator 6.01 for Windows ( Download )

Mozilla 0.6 for Windows ( Download )

Mozilla 0.92 for Windows ( Download )

Demo page for Arachne - the content text is also styled and centered without CSS: [ Open demo page ] [ Download archive file ].

Arachne 1.70 for DOS ( Download )

Arachne 1.95 for DOS ( Download )


[ 1 ]

It works also in Opera 2.12 - 3.50, but with certain flaws.

[ 2 ]

Dillo - partially. Dillo does not recognize the height attribute for td or tr. The visual boundary line trick in itself does work.

[ 3 ]

With a minor flaw.


Aliosque subditos et thema

 

Lightweight web browsers for Linux

 

Netsurf : Hv3 : Dillo : Links2 Nowadays the real lightweight web browsers are those without JavaScript and Flash support or with a very limited one. Because a web browser even with the lightest interface becomes heavyweight working with the modern internet crammed with scripts and multimedia. These browsers are not numerous and some of them are moving towards getting JavaScript support - i.e. towards dropping out of the "Lightweight web browsers" category. Lightweight web browsers may be more advanced - with CSS support. Or less - no CSS support or close to that. Netsurf - / home page / Currently the most advanced lightweight web browser for Linux. CSS support is quite solid. Good support of HTML. Feeble support for JavaScript - may be disabled by default. There is a version of Netsurf for *nix systems that can be run without X, using framebuffer of graphic adapter. Created initially for RISC OS and only later ported to Linux. There are also versions for other *nix systems, for AmigaOS, AmigaOS 4, Atari OS, BeOS/Haiku, Mac OS X, MorphOS. ( More about Netsurf features ) NetSurf 3.0 on PuppyLinux 5.2.8: netsurf-browser.org NetSurf 3.0 on PuppyLinux 5.2.8: w3schools.com/browsers/browsers_stats.asp NetSurf 3.0 on PuppyLinux 5.2.8: en.wikipedia.org/wiki/Netsurf NetSurf 3.0 on PuppyLinux 5.2.8: ebay.com NetSurf 3.0 on PuppyLinux 5.2.8: kompx.com/en/web-browsers-for-dos.htm NetSurf 3.0 on PuppyLinux 5.2.8: twitter.com Hv3 - / home page / Less advanced lightweight web browser for Linux, but still having considerable CSS support. Weak JavaScript / ECMAScript support. Quite good HTML support.

CSS horizontal and vertical centering - 2

 

Centering the content of a web page in the viewable area of a browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically: [ Open demo page ] HTML / XHTML. Code: <!DOCTYPE html> <html> <head> <title>CSS horizontal and vertical centering - 2</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="spacer">&nbsp;</div> <div class="wrapper"> <div class="pagecontent">&nbsp;</div> </div> </body> </html> CSS. Code: html {height: 100%; margin: 0px;} body height: 100%; margin: 0px;} .spacer {position: relative; top: 0px; left: 0px; height: 50%; width: 100px; float: left; margin: 0px 0px -250px 0px; background: #999;} .wrapper {position: relative; top: 0px; left: 0px; height: 500px; width: 100%; clear: both; background: #a3ddc4;} .pagecontent {position: relative; top: 0px; left: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;} The .pagecontent box is for the page content. It must be of a fixed height and width in units like px's or em's - not in percents. Height and width may be larger than web browser viewable area, but here the more practical case is discussed - when the height and width of .pagecontent are smaller than those of the web browser viewable area. The .pagecontent box is horizontally centered by its "margin: 0 auto". .Wrapper creates a space where .pagecontent is centered horizontally. .Wrapper's width is 100% for centering at various web browser viewable area sizes. The height has to be equal to the one of .pagecontent. .Spacer centers .wrapper with .pagecontent in it vertically inside browser viewable area. Its width may be any. The height is 50% - that places the top edge of .pagecontent vertically in the middle of the browser viewable area. The bottom margin of .spacer equal to half the .pagecontent height centers .pagecontent and its contents vertically in the web browser viewable area of a current height. This method is reliable in all major modern web browsers. It also works in older browsers like Internet Explorer 6 or earlier versions of Maxthon. But the height of box for page content has to be assigned explicitly and if it is changed - the size of .spacer bottom margin must be changed accordingly as well. There is another way of CSS horizontal and vertical centering, with CSS code easier to maintain, even if not suitable for older web browsers: CSS horizontal and vertical centering - 1. [ 1 ] As well as Netscape 7.2+, Mozilla 1.5+. [ 2 ] As well as Netscape 7.2+, Mozilla 1.5+.