Más arriba comenté que para dejar los números bien encolumnados era necesaria una fuente monospace. sin embargo, la mayoría de los diseñadores crean sus tipografías tratando de hacer a los números del mismo ancho, justamennte para facilitar el encolumnado.
Aún así, ésto no vale para las fuentes sicopatonas,
hand-writing o diseñadores desprolijos; por lo que el siguiente ejemplo de tabla alínea los puntos independientemente de la fuente utilizada y de lo que ocurra con los dígitos.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>CENTRA PUNTO DECIMAL EN COLUMNAS. </title>
<script type="text/javascript">
var clasesCentradas = ["centraPunto0","centraPunto1"]; /*NOMBRES DE CLASE EN CADA COLUMNA*/
function centra(){
alert("Tabla original.");
//alert("Total clasesCentradas = "+clasesCentradas.length)
var contenidos = new Array();
var contenidosPunteados = new Array();
var enteros = new Array();
var decimales = new Array();
var anchoEnteros = new Array();
var anchoDecimales = new Array();
var anchoEnterosMax = 0;
var anchoDecimalesMax = 0;
var inicioCentrado = 0;
var celdas = document.getElementById("alineadas").getElementsByTagName("td").length;
//alert(celdas)
/*CUENTA EL TOTAL DE CELDAS*/
for(t=0; t<clasesCentradas.length;t++){
//alert("clase = "+clasesCentradas[t])
/*REVISA TANTAS VECES COMO CLASES A CENTRAR EXISTAN*/
for(c=0; c<celdas; c++){
/*RECORRE TODAS LAS CELDAS*/
//alert("clase celda "+c+" = "+document.getElementById( "alineadas" ).getElementsByTagName( "td" )[c].className)
if(document.getElementById( "alineadas" ).getElementsByTagName( "td" )[c].className.indexOf(clasesCentradas[t]) != -1){
contenidos[inicioCentrado] = document.getElementById( "alineadas" ).getElementsByTagName( "td" )[c].innerHTML;
//alert("inicioCentrado = "+inicioCentrado+" \r\ncontenidos = "+contenidos)
/*SI LA CELDA TIENE CLASE A CENTAR, LEE EL CONTENIDO*/
contenidosPunteados[inicioCentrado] = c;
//alert("contenidosPunteados = "+contenidosPunteados.length)
/*...Y LO GUARDA EN ARRAY*/
inicioCentrado += 1;
}
}
var punteadasTotal = contenidosPunteados.length;
//alert(contenidos + "¬" + punteadasTotal)
/*TOTAL DE CELDAS A CENTRAR*/
for(c=0; c<punteadasTotal; c++){
contenidos[c] = (contenidos[c].indexOf(".")!=-1) ? contenidos[c] : contenidos[c] + ".";
var divide = contenidos[c].split(".");
//alert(divide);
/*SI NO TIENE PUNTO SE LO AGREGA Y DIVIDE PARTE ENTERA DE DECIMAL*/
var entero = divide[0]+".";
document.getElementById("dummy").innerHTML = entero;
anchoEnteros[c] = document.getElementById('dummy').offsetWidth;
anchoEnterosMax = (anchoEnteros[c]>anchoEnterosMax)? anchoEnteros[c] : anchoEnterosMax;
//alert("ancho entero "+c+"= "+anchoEnteros);
enteros[c] = entero;
/*LEE LA PARTE ENTERA, MIDE EL ANCHO, REGISTRA EL ANCHO MÁXIMO Y GUARDA LOS VALORES EN ARRAY*/
var decimal = divide[1];
document.getElementById("dummy").innerHTML = decimal;
anchoDecimales[c] = document.getElementById('dummy').offsetWidth;
anchoDecimalesMax = (anchoDecimales[c]>anchoDecimalesMax)? anchoDecimales[c] : anchoDecimalesMax;
//alert("ancho decimal "+c+"= "+anchoDecimales);
decimales[c] = decimal;
/*LEE LA PARTE DECIMAL, MIDE EL ANCHO, REGISTRA EL ANCHO MÁXIMO Y GUARDA LOS VALORES EN ARRAY*/
}
document.getElementById("dummy").innerHTML = "_";
for(c=0; c<punteadasTotal; c++){
var parteEntera = enteros[c];
var parteDecimal = decimal[c];
document.getElementById( "alineadas" ).getElementsByTagName( "td" )[contenidosPunteados[c]].innerHTML =
"<div style='padding:0; background:yellow; margin-right:" +(anchoDecimalesMax - anchoDecimales[c])+ "px;'>" +enteros[c] + decimales[c]+ "</div>";
}
//alert(anchoEnterosMax)
//alert(anchoDecimalesMax)
/*REESCRIBE EL CONTENIDO DE CADA CELDA DENTRO DE UN div Y POSICIONA CON RESPECTO AL PUNTO DECIMAL*/
inicioCentrado = 0;
anchoEnterosMax = 0;
anchoDecimalesMax = 0;
}
//alert(enteros);
//alert(decimales);
}
onload = centra;
</script>
<style type='text/css'>
#alineadas {margin-top:50px;}
#alineadas td{padding:0; vertical-align:bottom; font:bold 16px arial , sans-serif; white-space:nowrap; }
.centraPunto0 , .centraPunto1{text-align:right; }
.negativo {color:#ff0000; }
#dummy {position:absolute; t¬op:-100px; left:0; padding:0; background-color:#cccccc; font:bold 16px arial , sans-serif; }
</style>
</head>
<body>
<span id="dummy">_</span>
<table border=1 id="alineadas">
<tbody>
<tr><td class="a">a</td>
<td class="centraPunto0">0</td>
<td class="centraPunto1">.1</td>
<td>z</td></tr>
<tr><td>a</td>
<td class="centraPunto0">123.456</td>
<td class="centraPunto1">32.1</td>
<td>z</td></tr>
<tr><td>a</td>
<td class="centraPunto0">12.1111111111111119</td>
<td class="centraPunto1 negativo">-4.321</td>
<td>z</td></tr>
<tr><td>a</td>
<td class="centraPunto0">1.0000000000000009</td>
<td class="centraPunto1">5.4321</td>
<td class="z">z</td></tr>
</td></tr></tbody>
</table>
</body>
</html>
Ahora lo más importante : ¿Cómo hago para pedir que lleven el tema al foro de javascript?. Ya no tiene nada que hacer en CSS...