Crear Tabla usando JS - DOM

[uhilari]

hola a todos.

mi problema es el siguiente quiero crear una tabla usando DOM, pero no quiero que la tabla tenga border, es decir en HTML seria asi:

Código:

<table border="0" cellpadding="0" cellspacing="0">

entonces he intentado hacerlo usando el DOM y javascript algo asi:

Código:

var tb = document.createElement("table");
tb.border = "0";
tb.cellpadding="0";
tb.cellspacing="0";

pero no funciona, la tabla me aparece con el borde por defecto, asi que probe de la siguiente manera

Código:

var tb = document.createElement("table");
var attr = document.createAttribute("border");
attr.nodeValur = "0";
tb.setAttributeNode(attr);
attr = document.createAttribute("cellpadding");
attr.nodeValur = "0";
tb.setAttributeNode(attr);
attr = document.createAttribute("cellspacing");
attr.nodeValur = "0";
tb.setAttributeNode(attr);

pero sigue mostrando su border por defecto.

Alguien me puede echar una mano, por favor?

[Negora]

Bueno, como veo que es un mensaje sin respuesta todavía, te explico...

Las propiedades deben de ser "cellPadding" y "cellSpacing" respectivamente. Ten en cuenta la letra mayúscula. Si no, estás creando una propiedad más en el elemento y no tendrá efecto alguno.

Aparte de eso, recomiendo recurrir a CSS para conseguir lo mismito sin tener que preocuparte por ello mientras programas. De hecho yo he tenido que generar toda una estructura de tablas, capas y subtablas y he recurrido a eso: Con JS trabajo la estructura, y con CSS, aparte, le doy el aspecto que quiero.

Yo antes huía de CSS en favor de los atributos HTML de estilo (cellspacing, etc.), pero XHTML comienza cada vez más a prescindir de estos, separando completamente estructura de aspecto. Y la verdad es que cuando te metes a fondo con CSS y descubres los pesudoelementos y las pseudoclases, puedes hacer de todo sin siquiera programar nada de nada.


PD: Por cierto, en cuanto a atributos de elementos en JS con origen en HTML, acostúmbrate a que siempre que estén compuestos por 2 palabras, la segunda, tercera y demás van siempre con mayúscula. Por ejemplo: bgcolor -> bgColor, colspan -> colSpan.

[uhilari]

hola.

Muchas gracias, tendre en cuenta lo de las mayusculas, eso arreglo mi problema, pero me dices que lo haga con CSS, podrias indicarme cuales son las sentencias para el cellPadding y cellSpacing en CSS por que a la verdad no las he encontrado

Gracias

[Negora]

Con CSS igual al comienzo se te hace más lioso, pero una vez lo manejes verás qué gusto es trucar los estilos de los elementos.

Para aplicar las propiedades "cellPadding" y "cellSpacing" con CSS a TODAS las tablas por ejemplo podrías hacer esto:

Código:

		table {
			border-spacing: 0px;
		}
		
		td {
			padding: 0px;
		}

Personalmente, te explico el estilo que aplico a todas mis páginas, y que sobreescribo cuando necesito algo diferente:

Código:

		* {
			margin: 0px;
			padding: 0px;
		}

		table {
			border-collapse: collapse;
			border-spacing: 0px;
			empty-cells: show;
		}
		
		td {
			border: solid 1px #000000;
			text-align: left;
			vertical-align: middle;
		}

Con el primer estilo me aseguro de que TODOS los elementos XHTML jamás tengan un margen o relleno por defecto, cosa que odio y que con esto evito SIEMPRE. Muy recomendable, ya que los navegadores añaden margen por defecto a "body", a "form", etc. Igualmente evito que las celdas de la tabla tengan "padding" alguno.

Con el segundo, consigo lo mismo que con "cellSpacing" y "cellPadding" igual a 0 y además muestro las celdas aunque estén vacías (otra cosa que los navegadores evitan por defecto y que me parece antiestético). La propiedad "border-collapse" sirve para que cuando apliques bordes a las celdas, estos se unan o fusionen en uno cuando haya 2 adyacentes.

Y con el tercero, aplico un borde de 1, equivalente a usar el atributo HTML "border" igual a 1.