Voici le code correspondant à un exemple de prix pour l'impression de prospectus, les quantités à gauche et le grammage en haut :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exemple de table avec styles CSS</title>
<style type="text/css" title="text/css" media="all">
/* <![CDATA[ */
table	{border-collapse:collapse;}
thead th {
	font:bold 13px/18px georgia;
	text-align:left;
	background:#fff4c6;
	color:#333;
	padding:8px 16px 8px 8px;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
}
th.vide {background:#fff;}
tbody th {
	font:bold 12px/15px georgia;
	text-align:left;
	background:#fff9e1;
	color:#333;
	padding:8px;
	border-bottom:1px solid #f3f0e4;
	border-right:1px solid #fff;
}
tbody td {
	font:normal 12px/15px georgia;
	color:#333;
	padding:8px;
	border-right:1px solid #f3f0e4;
	border-bottom:1px solid #f3f0e4;
}

tbody td.on {background:#f3f0e4;}
thead th.on {background:#ffe068;}
tbody th.on {background:#ffe068;}
/* ]]> */
</style>
<script type="text/javascript">
/*
	For functions getElementsByClassName, addClassName, and removeClassName
	Copyright Robert Nyman, http://www.robertnyman.com
*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}

function addClassName(elm, className){
    var currentClass = elm.className;
    if(!new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i").test(currentClass)){
        elm.className = currentClass + ((currentClass.length > 0)? " " : "") + className;
    }
    return elm.className;
}

function removeClassName(elm, className){
    var classToRemove = new RegExp(("(^|\\s)" + className + "(\\s|$)"), "i");
    elm.className = elm.className.replace(classToRemove, "").replace(/^\s+|\s+$/g, "");
    return elm.className;
}

function makeTheTableHeadsHighlight() {
	// get all the td's in the heart of the table...
	var table = document.getElementById('prospectus');
	var tbody = table.getElementsByTagName('tbody');
	var tbodytds = table.getElementsByTagName('td');
	
	// and loop through them...
	for (var i=0; i<tbodytds.length; i++) {
	
	// take note of their default class name
		tbodytds[i].oldClassName = tbodytds[i].className;
		
	// when someone moves their mouse over one of those cells...
		tbodytds[i].onmouseover = function() {
	
	// attach 'on' to the pointed cell
			addClassName(this,'on');
			
	// attach 'on' to the th in the thead with the same class name
			var topheading = getElementsByClassName(this.oldClassName,'th',table);
			addClassName(topheading[0],'on');
			
	// attach 'on' to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName('th')[0];
			addClassName(rowheading,'on');
		}
	
	// ok, now when someone moves their mouse away, undo everything we just did.
	
		tbodytds[i].onmouseout = function() {
	
	// remove 'on' from this cell
			removeClassName(this,'on');
			
	// remove 'on' from the th in the thead
			var topheading = getElementsByClassName(this.oldClassName,'th',table);
			removeClassName(topheading[0],'on');

	// remove 'on' to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName('th')[0];
			removeClassName(rowheading,'on');
		}
	}
}
addLoadEvent(makeTheTableHeadsHighlight);
</script>

</head>

<body>
<table id="prospectus">
  <tr>
    <th class="vide"> </th>
    <th class="135">135gr</th>
    <th class="170">170gr</th>
    <th class="300">300gr</th>
  </tr>
  <tr>
    <th>1000 ex.</th>
    <td class="135">100 €</td>
    <td class="170">200 €</td>
    <td class="300">300 €</td>
  </tr>
  <tr>
    <th>2000 ex.</th>
    <td class="135">150 €</td>
    <td class="170">250 €</td>
    <td class="300">350 €</td>
  </tr>
  <tr>
    <th>3000 ex.</th>
    <td class="135">200 €</td>
    <td class="170">300 €</td>
    <td class="300">400 €</td>
  </tr>
  <tr>
    <th>4000 ex.</th>
    <td class="135">250 €</td>
    <td class="170">350 €</td>
    <td class="300">450 €</td>
  </tr>
</table>
</body>
</html>

et son exemple.

Nous avons un tableau HTML tout simple avec une en-tête en haut et à gauche avec les balises <thead><th> pour le haut et <tbody><th> pour la gauche.

L'utilisation de ":hover pour ce type d'effet n'est pas approprié, nous allons utilisé Javascript avec les événements "onmouseover" et "onmouseout".
Nous souhaitons que lors du passage sur une cellule que la classe 'on' lui soit appliquée, ainsi qu'aux cellules dans les en-têtes haut et gauche.
Et lorsque l'on sort de la cellule du tableau, on retire la class 'on' de toutes les cellules.

Pour ce faire nous allons utiliser des fonctions Javascript :

  • getElementsByClassName
  • addClassName
  • removeClassName
  • une fonction pour lier les deux
  • addLoadEvent
Le nom est assez évocateur pour ne pas rentrer dans les détails...