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

 

Screenshots in DOS

 

There are several programs for taking screenshots in DOS. SNARF, for instance. Using this application succeeded in taking screenshots in most of the cases. Also, the screenshots' quality (.BMP files) by SNARF results to be the highest among the programs tested: ScreenThief, VideoThief, FLIP, GRABBER, SNARF. Using SNARF with default settings is straightforward, but there is a shortcoming - SNARF always saves screenshots to the folder where the user is currently in. That could be inconvenient or unacceptable. And there is no obvious way to change it. But there is a roundabout option. The initial idea had been found on this page. The result based on it: 1. SNARF [ Download ] 2. Open SNARF.EXE in a text editor in text mode (not hex), find snarf000.bmp and replace it for s:scn000.bin 3. Create a batch file, S.BAT for example, where besides a string for starting SNARF.EXE will be a command assigning the path to the folder screenshots will be saved into to a virtual drive S: The folder and path may be any: C:\SOFT\SNARF.EXE SUBST S: C:\SCREENS\ 4. Start SNARF: S [or S.BAT] 5. To take a screenshot: Alt + S There will be two beeps. The first at the beginning and the second one as a sign the process has completed successfully. After the screenshots are taken, go to the folder where they are saved in and replace the file extensions from .BIN to .BMP SNARF - Freeware.

Mobile-friendly HTML table

 

If an HTML table is too wide, having too much data, it may not shrink anymore, it gets wider than the available space and breaks page layout. An horizontal scroll added to the table fixes it up. Example: 12345678910 Table_data_1 Table_data_2 Table_data_3 Table_data_4 Table_data_5 Table_data_6 Table_data_7 Table_data_8 Table_data_9 Table_data_10 HTML / XHTML. Code: <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> </tr> <tr> <td>Table_data_1</td> <td>Table_data_2</td> <td>Table_data_3</td> <td>Table_data_4</td> <td>Table_data_5</td> <td>Table_data_6</td> <td>Table_data_7</td> <td>Table_data_8</td> <td>Table_data_9</td> <td>Table_data_10</td> </tr> </table> CSS. Code: table {display: block; overflow-x: auto;} /* Extra CSS, just styling the look: */ table {border-collapse: collapse;} table td,th {padding: 10px; border: 1px #000 solid;} Note: the CSS property of display: block makes the table to occupy only as much space horizontally as it is needed to contain the data without shrinking. Not more, not making itself to stretch from the leftmost to the rightmost sides of the available space - even if width: 100% is added to CSS. Example: 123 Table_data_1 Table_data_2 Table_data_3 [ 1 ] As well as Netscape 9.0. [ 2 ] As well as Netscape 9.0.