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

 

Windows console applications. Web browsers

 

Lynx : Links : ELinks Text-based, or console web browsers are more typical for the Linux environment and other Unix-like systems. There the text-based web browsers were created, there is their main line of development. Very few (e.g., Wanna-Be / WannaBe for classic Mac OS) console web browsers were made originally for some other operating systems. And the text web browsers for Windows are the versions of console web browsers for *nix systems. Although those of them that do not work in the Cygwin environment have their little peculiarities. In former times text-based web browsers were an important tool for viewing web documents. With the development of GUI programs further in the dial-up era, text web browsers have been useful as the fastest way to view web documents and as a part of text-to-speech systems. The spread of broadband Internet and specialized soft for text-to-speech systems cut the scope of the console web browsers. All the more, most Windows users have always had a quite vague idea of their existence. However, text web browsers are highly specialized mature tools that may be useful in various situations using Windows. Lynx - / home page / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS and classic Mac OS. HTML ( More 1 ) ( More 2 ). Lynx 2.8.5rel.1: lynx.isc.org Lynx 2.8.5rel.1: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.5rel.1: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.5rel.1: ebay.com Lynx 2.8.5rel.1: kompx.com/en/web-browsers-for-dos.htm Lynx 2.8.5rel.1: twitter.com Links - / home page / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, BeOS, Haiku, OS/2, DOS, Windows.

Float bottom

 

There is no "float: bottom" in CSS, but there is a way to achieve it by some other means. Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Code: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Code: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Extra CSS, just styling the look */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} There is a web page with a div box, containing its content - box1. There are two div boxes inside it: 1. "content1" with the content proper on the left and menu on the right. 2. "bottom1" after the content1.