KOMPX.COM or COMPMISCELLANEA.COM   

HTML table borders without CSS

Creating visual borders in HTML tables without CSS and without border attribute of HTML table:

Header Header
Data Data

HTML code:


<table cellspacing="3" bgcolor="#000000">
	<tr bgcolor="#ffffff">
		<th>Header</th>
		<th>Header</th>
	</tr>
	<tr bgcolor="#ffffff">
		<td>Data</td>
		<td>Data</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 visual borders was one of them.

It is not exactly handling borders themselves, but rather imitating doing it by exploiting the cellspacing and bgcolor attributes. Nowadays, as with HTML centering, this method is perfectly usable, even if CSS border styling is more convenient in most cases.

Concept

  1. Bgcolor attribute of table tag is used to make its background to be of a certain color.
  2. Bgcolor attribute of tr tag is employed to make the background of table's content (that is, rows and cells) to be of a certain, different from table background's, color.
  3. Cellspacing attribute of table tag is used to create a space around table cells. That space gets the color set by bgcolor attribute of table tag and since it differs from the background of rows and cells, this creates visual boundary line of the table background's color around the cells.

Ancient Netscape, Mozilla and Arachne

The method of handling HTML table borders without CSS has been around since the earliest days of Internet, so much so that with some adjustment it works in Netscape 3.04 - 6.0, Mozilla 0.6 - 1.7.13 and Arachne web browser for DOS:

Header Header
Data Data

HTML code:


<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000000">
	<tr>
		<td>
			<table cellspacing="3" border="0">
				<tr bgcolor="#ffffff">
					<th>Header</th>
					<th>Header</th>
				</tr>
				<tr bgcolor="#ffffff">
					<td>Data</td>
					<td>Data</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Note: this adjusted code works as much well not just in Netscape 3.04 - 6.0, Mozilla 0.6 - 1.7.13 or Arachne, but also in all web browsers listed in "Browser support" section below: both modern and older ones.

Browser support
Windows
Internet Explorer 3.0+
Firefox 1.0+
Google Chrome
Opera 2.12+
Safari 3.1+
SeaMonkey 1.0+
Mozilla 1.0+
Netscape 7.0+
Linux
Firefox 1.0+
Google Chrome / Chromium
Opera 5.0+
SeaMonkey 1.0+
Mozilla 1.0+
Netscape 7.0+
NetSurf 3.0
Dillo 3.0.2
More