Problema con tabla

oscarten · #1 (**permalink**) 29/09/2009, 15:13

Hola.
Soy un novato en esto del HTML y tengo un montón de dudas.
La última me ha surgido al hacer una tabla.
Vereis,es una tabla para un blog de wordpress.Quería poner la clasificación de la liga española de fútbol.El problema que tengo es que no se visualiza la lista al comienzo del articulo sino abajo del todo,tras hacer un monton de scroll.
¿que hago mal?¿necesitais que ponga el código?

cristian_cena · #2 (**permalink**) 29/09/2009, 19:04

Hola oscarten:

Si, postea el codigo o una url a tu sitio. como eres nuevo (bienvenido) no incluyas "http://www." o ponlo con espacios " w w w"

A grandes rasgos supongo q debes tener un problema de maquetacion en tu css

Saludos!

oscarten · #3 (**permalink**) 30/09/2009, 00:06

Pongo aquí el código,ya que la tabla es aún un borrador y no está publicada.

<TABLE BORDER="3">
<TR>
<TH>Posición</TH>
<TH>Jugados</TH>
<TH>Ganados</TH>
<TH>Empatados</TH>
<TH>Perdidos</TH>
<TH>Goles a favor</TH>
<TH>Goles en contra</TH>
<TH>Puntos</TH>
</TR>
<TR>
<TD bgcolor="green">1.R.Madrid</TD>
<TD>5</TD>
<TD>5</TD>
<TD>0</TD>
<TD>0</TD>
<TD>16</TD>
<TD>2</TD>
<TD>15</TD>
</TR>
<TD bgcolor="green">2.F.C.Barcelona</TD>
<TD>5</TD>
<TD>5</TD>
<TD>0</TD>
<TD>0</TD>
<TD>16</TD>
<TD>3</TD>
<TD>15</TD>
<TR>
<TD bgcolor="green">3.Sevilla</TD>
<TD>5</TD>
<TD>4</TD>
<TD>0</TD>
<TD>1</TD>
<TD>12</TD>
<TD>3</TD>
<TD>12</TD>
</TR>
<TR>
<TD bgcolor="green">4.Mallorca</TD>
<TD>5</TD>
<TD>3</TD>
<TD>1</TD>
<TD>1</TD>
<TD>10</TD>
<TD>3</TD>
<TD>10</TD>
</TR>
<TR>
<TD>5.Deportivo</TD>
<TD>5</TD>
<TD>3</TD>
<TD>0</TD>
<TD>2</TD>
<TD>9</TD>
<TD>6</TD>
<TD>9</TD>
</TR>
<TR>
<TD>6.Athletic Club</TD>
<TD>5</TD>
<TD>3</TD>
<TD>0</TD>
<TD>2</TD>
<TD>5</TD>
<TD>7</TD>
<TD>9</TD>
</TR>
<TR>
<TD>7.Valencia</TD>
<TD>5</TD>
<TD>2</TD>
<TD>2</TD>
<TD>1</TD>
<TD>11</TD>
<TD>9</TD>
<TD>8</TD>
</TR>
<TR>
<TD>8.Zaragoza</TD>
<TD>5</TD>
<TD>2</TD>
<TD>1</TD>
<TD>2</TD>
<TD>7</TD>
<TD>7</TD>
<TD>7</TD>
</TR>
<TR>
<TD>9.Osasuna</TD>
<TD>5</TD>
<TD>2</TD>
<TD>1</TD>
<TD>2</TD>
<TD>5</TD>
<TD>6</TD>
<TD>7</TD>
</TR>
<TR>
<TD>10.Español</TD>
<TD>5</TD>
<TD>2</TD>
<TD>1</TD>
<TD>2</TD>
<TD>5</TD>
<TD>7</TD>
<TD>7</TD>
</TR>
<TR>
<TD>11.Almeria</TD>
<TD>5</TD>
<TD>1</TD>
<TD>3</TD>
<TD>1</TD>
<TD>5</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
<TR>
<TD>12.Getafe</TD>
<TD>5</TD>
<TD>2</TD>
<TD>0</TD>
<TD>3</TD>
<TD>7</TD>
<TD>8</TD>
<TD>6</TD>
</TR>
<TR>
<TD>13.Tenerife</TD>
<TD>5</TD>
<TD>2</TD>
<TD>0</TD>
<TD>3</TD>
<TD>3</TD>
<TD>9</TD>
<TD>6</TD>
</TR>
<TR>
<TD>14.Sporting</TD>
<TD>5</TD>
<TD>1</TD>
<TD>2</TD>
<TD>2</TD>
<TD>4</TD>
<TD>7</TD>
<TD>5</TD>
</TR>
<TR>
<TD>15.Racing</TD>
<TD>5</TD>
<TD>1</TD>
<TD>2</TD>
<TD>2</TD>
<TD>7</TD>
<TD>12</TD>
<TD>5</TD>
</TR>
<TR>
<TD>16.Valladolid</TD>
<TD>5</TD>
<TD>1</TD>
<TD>1</TD>
<TD>3</TD>
<TD>56</TD>
<TD>10</TD>
<TD>4</TD>
</TR>
<TR>
<TD>17.Malaga</TD>
<TD>5</TD>
<TD>1</TD>
<TD>0</TD>
<TD>4</TD>
<TD>5</TD>
<TD>7</TD>
<TD>3</TD>
</TR>
<TR>
<TD bgcolor="red">18.Atletico</TD>
<TD>5</TD>
<TD>0</TD>
<TD>3</TD>
<TD>2</TD>
<TD>7</TD>
<TD>13</TD>
<TD>3</TD>
</TR>
<TR>
<TD bgcolor="red">19.Villareal</TD>
<TD>5</TD>
<TD>0</TD>
<TD>2</TD>
<TD>3</TD>
<TD>4</TD>
<TD>8</TD>
<TD>2</TD>
</TR>
<TR>
<TD bgcolor="red">20.Xerez</TD>
<TD>5</TD>
<TD>0</TD>
<TD>1</TD>
<TD>4</TD>
<TD>0</TD>
<TD>11</TD>
<TD>1</TD>
</TR>
</TABLE>

cristian_cena · #4 (**permalink**) 30/09/2009, 06:28

Oscarten:

No sirve de mucho que postees el codigo de la tabla sin más, pues el problema no está en la tabla sino en su relación con los demás elementos de la maqueta. Debe haber algun div
dando vueltas por ahi y algun estilo que esta afectando a tu tabla y no te das cuenta.

Postea todo el codigo asi te ayudamos.

Saludos!

alexk · #5 (**permalink**) 30/09/2009, 08:49

mmmm... tendrias que publicarla ya que influye el CSS de tu template... asi sin mas esta correcta la tabla (supongo)... si te complica mucho ponla como imagen y tantan... chao!...

oscarten · #6 (**permalink**) 30/09/2009, 14:49

Cita:

Iniciado por cristian_cena

Oscarten:

No sirve de mucho que postees el codigo de la tabla sin más, pues el problema no está en la tabla sino en su relación con los demás elementos de la maqueta. Debe haber algun div
dando vueltas por ahi y algun estilo que esta afectando a tu tabla y no te das cuenta.

Postea todo el codigo asi te ayudamos.

Saludos!

no entiendo.
ese es todo el código.
perdon,pero soy un novato total

oscarten · #7 (**permalink**) 30/09/2009, 14:50

Cita:

Iniciado por alexk

mmmm... tendrias que publicarla ya que influye el CSS de tu template... asi sin mas esta correcta la tabla (supongo)... si te complica mucho ponla como imagen y tantan... chao!...

¿como se pone como imagen?

cristian_cena · #8 (**permalink**) 30/09/2009, 17:02

Calma oscarten jeje, todo bien.

Si ese es todo el codigo que tienes entonces debes empezar por:

Definir un doctype, por ejemplo:

<!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">

luego dentro de <head></head> prueba incluir lo siguiente:

<style type="text/css">
*{margin:0; padding:0;}
</style>

¿Seguro que no tienes ningun estilo definido dentro de <style></style> ni etiquetas <div> dentro de <body></body>?

Saludos!

alexk · #9 (**permalink**) 30/09/2009, 18:39

cristian_cena segun mal entendi hara un post en su blog (WP) entonces el CSS... viene de la template tambien... no sabemos si tiene un reset o algo...

Cita:

como se pone como imagen?

presiona la tecla "Impr Pant" hazle una captura y guardala en JPG con MSPaint bueno en mi caso que no me manejo muy bien con tablas eso hago jaja... chao y suerte!...

Hardsmoke · #10 (**permalink**) 30/09/2009, 18:45

Empieza por dejar de un lado ese html viejo y feo que tiene ese asrquroso border y bgcolor que apesta hasta lo mas profundo de lo apestoso.
y empieza con xhtml luego aprender maquetacion con CSS una tegnologia muy chula de la mano de dios con la que aprenderas a maquetar sin tener este tipo de errores que te envian abajo o encima las cosas.
como wordprees esta bien estrucuturado y maquetado con css al meter la tabla te la acomoda abajo donde el navegador vea un espacio.
si solo tienes una tabla puedes probar esto:
un poco copy/paste cristian_cena ^_^:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "direccio n que coloco cristian/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="direcio n que coloco cristian">

luego dentro de <head></head> prueba incluir lo siguiente:

<style type="text/css">
table{ position:relative;
top:0px;
l}
</style>
ATENCION:el 0px no es literal debes ir probando, cambiando los valores de estos y ir visualizando notaras que la tbla va cambiando de pocision segun los valores que tu coloquees en los 0 el top indica arriba normalmente esta alineado ala izquierda asi que no hay problema.
Si no te soluciona avisanos por favor.
mi consejo es que estudies xhmtl y css :p

no puedo publicar enlaces por no ser antiguo ni tener ma s de 30 mensaje por eso fijate en la estructura que te da cristian y coloca el style que yo te di a ver si funciona ;D
=========

Cita:

Iniciado por alexk

cristian_cena segun mal entendi hara un post en su blog (WP) entonces el CSS... viene de la template tambien... no sabemos si tiene un reset o algo...

presiona la tecla "Impr Pant" hazle una captura y guardala en JPG con MSPaint bueno en mi caso que no me manejo muy bien con tablas eso hago jaja... chao y suerte!...

ç
Lo del <style> predomina sobre la pagina si el Css es llamado de afuera.
¿luego de que guarda en su pcla imagen se publica sola genio?
no... sube la imagen a un host gratituo por ejemplo freeimages . org hay te dan una url encerrada entre
[IMG] [/IMG] es un bbcode para foro luego pegala aca y seras feliz :p

alexk · #11 (**permalink**) 30/09/2009, 19:17

las tablas se usan para contenidos tabulares por lo cual esta bien usada!...

Cita:

wordprees esta bien estrucuturado y maquetado

pero la template no sabemos...

PD: Pero si uno habla sin leer los otros post....
Hardsmoke trankilo...

Hardsmoke · #12 (**permalink**) 30/09/2009, 19:28

Cita:

Iniciado por alexk

las tablas se usan para contenidos tabulares por lo cual esta bien usada!...

pero la template no sabemos...

PD: Pero si uno habla sin leer los otros post....
Hardsmoke trankilo...

¿Es extraño tu usas wordpress y me dices algo como eso?
hasta donde tengo entendido las templates de worpress vienen con css predefinidos que se encargan de la mquetacion y estos suerlen tener o errores.
a menos que tu le cambies algo pero en no importa pues si tienes concecion de como usar un id o un class y como usar position etc no hay este tipo de problemas.
a mi parecer tal vez el mismo la embarro o coloco la tabla fuera de un contenedor o quiensabe que diablos.
como no uso mucho cms y me creo mis proias templates pues.. se lo ue estoy haciendo paso por paso sin comenter errrores.
no se q a que te refieres con lo de tabla buien usada yo no eh dicho lo contrario.
solo dije que migrar de hmtl apestoso a xhtml evita este tipo de cosas pues te haces un profesional de como construir un buen box model con css y gestionar las pocisiones.
en todo caso perdoname por solo hacers webs estandar :D

cristian_cena · #13 (**permalink**) 30/09/2009, 22:23

Tienes razon alex, olvidé que se trataba de WP, seguramente dicha tabla esta heredando algun estilo.

Bien, no manejo WP pero si joomla! supongo que debe ser parecido su funcionamiento, por lo que, oscarten, busca los archivos css y modificalos, existen addons para firefox que te pueden ser utiles como "firebug" y "web developer"

Tiene razon Hardsmoke al referirse a las propiedades css position, pero no hace falta usar "table{ position:relative; top:0px;}". Bastaría con asegurarse de que la tabla no tenga asignado un "margin" o que el div contenedor de la tabla no tenga asignado un "padding" en los estilos ya que por defecto la tabla ocuparia el primer lugar que encuentre lo mas a la izquierda y arriba posible.

Hardsmoke, sera necesario que manejes xhtml y css es cierto, aunque me gustaria ayudarte es imposible si no vemos concretamente lo que sucede.

Saludos!

P/D:Hardsmoke, gracias por ayudar, mas trata de evitar expresiones como "ese asrquroso border y bgcolor que apesta" ¿si? disculpame si no tengo sentido del humor pero creo que ayudamos más siendo amables y cuanto esperamos las respuestas amables cuando hacemos una consulta

oscarten · #14 (**permalink**) 01/10/2009, 00:32

Cita:

Iniciado por cristian_cena

Calma oscarten jeje, todo bien.

Si ese es todo el codigo que tienes entonces debes empezar por:

Definir un doctype, por ejemplo:

luego dentro de <head></head> prueba incluir lo siguiente:

<style type="text/css">
*{margin:0; padding:0;}
</style>

¿Seguro que no tienes ningun estilo definido dentro de <style></style> ni etiquetas <div> dentro de <body></body>?

Saludos!

Ahora si que me habeis vuelto loco de verdad

.
OK-He puesto los 2 códigos que me has puesto.Ahora la tabla se ve perfecta,arriba del todo.Unicamente tengo un problema,encima de la tabla me sale lo de *{margin:0;padding:0}

oscarten · #15 (**permalink**) 01/10/2009, 00:39

AlexkLo de la captura ya se hacerlo,no sabía que te referias a eso.Lo que pasa es que se ve un poco borrosa.Utilizo el Gadwing print screen para capturas.Gracias de todas formas.

HARDSMOKEIntentare seguir tu consejo sobre XHTML y CSS.No me habia fijado en que tu style es diferente al tro,probare a ver que tal.De todas formas yo lo del Html lo llevo muy mal y basicamente copio codigos que pillo por ahí.
Algun sitio online donde aprender algo mas?GRACIAS

cristian_cena · #16 (**permalink**) 01/10/2009, 07:18

CITO="Unicamente tengo un problema,encima de la tabla me sale lo de *{margin:0;padding:0}"

Fijate *{margin:0;padding:0} te aparece arriba de tu tabla bien porque te lo has olvidado fuera de<style>aqui</style>, porque lo has colocado entre </head>aqui<body> o bien lo pusiste dentro de <body>.

Para que "desaparezca" debe estar dentro de<style></style> en head.

Bien ahora comprenderás la importancia de tener un Doctype definido.

¿Quieres aprender?
http://www.htmlya.com.ar/
http://www.cssya.com.ar/
http://www.librosweb.es/
http://www.araudi.net

Una pequeña sugerencia: comienza despacio pero seguro con (x)html y luego sigue con css.

Saludos!

Hardsmoke · #17 (**permalink**) 01/10/2009, 12:10

Cita:

Iniciado por cristian_cena

Tienes razon alex, olvidé que se trataba de WP, seguramente dicha tabla esta heredando algun estilo.

Bien, no manejo WP pero si joomla! supongo que debe ser parecido su funcionamiento, por lo que, oscarten, busca los archivos css y modificalos, existen addons para firefox que te pueden ser utiles como "firebug" y "web developer"

Tiene razon Hardsmoke al referirse a las propiedades css position, pero no hace falta usar "table{ position:relative; top:0px;}". Bastaría con asegurarse de que la tabla no tenga asignado un "margin" o que el div contenedor de la tabla no tenga asignado un "padding" en los estilos ya que por defecto la tabla ocuparia el primer lugar que encuentre lo mas a la izquierda y arriba posible.

Hardsmoke, sera necesario que manejes xhtml y css es cierto, aunque me gustaria ayudarte es imposible si no vemos concretamente lo que sucede.

[
P/D:Hardsmoke, gracias por ayudar, mas trata de evitar expresiones como "ese asrquroso border y bgcolor que apesta" ¿si? disculpame si no tengo sentido del humor pero creo que ayudamos más siendo amables y cuanto esperamos las respuestas amables cuando hacemos una consulta

bueno entonces yo entendi mal el enunciado, la verdad yo no ando colocando magin 0 y paddin o a todo especifico con top, etc
pues todo 0 la pagina parece una melcocha.
mi forma de hablar o escribir no la discutire con nadie, yo si tengo sentido del humor, y me interesa que la gente ccontenga la idea que quiero expresar
bye!
¿una prgunta eso de ayudar te refieres ami? xD o alo que dije.
por cierto quien hace la consulta, dice que el margin y padding le salieron en la pagina espo quiere decir que no fue eso lo que le solucion n principio, pues ya habia dicho que le salia arriba del todo

cristian_cena · #18 (**permalink**) 01/10/2009, 18:24

CITO: "Hardsmoke, sera necesario que manejes xhtml y css es cierto, aunque me gustaria ayudarte es imposible si no vemos concretamente lo que sucede."
CITO:"¿una prgunta eso de ayudar te refieres ami? "
Donde puse Hardsmoke debí poner oscarten

. Disculpen me confundi.

CITO:"la verdad yo no ando colocando magin 0 y paddin o a todo especifico con top, etc pues todo 0 la pagina parece una melcocha."
Que tu trabajes de ese modo no quiere decir que sea el correcto.

Lo conveniente es primero incluir un reset CSS y para ello recomende el clásico *{margin:0; paddnig:0;} (importante para que la css-box se vea igual en casi todos los navegadores y sus versiones). Y luego sí trabajar con las posiciones (absolute,relative,etc).

oscarten: ¿lo solucionaste?

Saludos!

oscarten · #19 (**permalink**) 02/10/2009, 00:55

Perdón por no responder antes pero el curro me quita mucho tiempo.

Ya está solucionado.
ahora la tabla se ve arriba a la izquierda y lo del MARGIN ya no se ve....
Ahora bien,yo el código lo puse como tu me lo diste,con el Margin entre las etiquetas STYLE,pero a la hora de ponerlo me descolocó todos los códigos de la tabla.
Despues lo volví a poner arriba de todo.De nuevo problemas,ahora el MARGIN se visualizaba DEBAJO de la tabla.Lo solucioné borrandolo.
Y ahora la tabla por fin se ve bien.
Eso sí ,me ha colocado etiquetas TD para cada registro de la tabla.
Por mí vale así.Pero que es lo que he hecho realmente?

cristian_cena · #20 (**permalink**) 03/10/2009, 12:21

Hola oscarten:

Cita:

Iniciado por oscarten

Ya está solucionado.
ahora la tabla se ve arriba a la izquierda y lo del MARGIN ya no se ve....
...
...
... Y ahora la tabla por fin se ve bien.

Buenisimo, me alegro!

Cita:

Iniciado por oscarten

me descolocó todos los códigos de la tabla.

Te sugerí que hagas esto:

<!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>
<title>Tu titulo</title>
<style type="text/css">
*{margin:0; padding:0;}
</style>
</head>
<body>

</body>
</html>

Cita:

Iniciado por oscarten

Eso sí ,me ha colocado etiquetas TD para cada registro de la tabla.

¿que hiciste

? cualquier cosa postealo y lo vemos (no olvides publicar el codigo o una imagen)

Saludos!

oscarten · #21 (**permalink**) 04/10/2009, 01:15

Eso fue lo que hice.El codigo completo que me pusiste.
Ya esta solucionado.Pero como dije,tuve borrar el margin,padding.
Aun asi la tabla se ve perfecta

jomaruro · #22 (**permalink**) 04/10/2009, 02:05

Hola:

De todas formas te aconsejo que te leas estos manuales:

Introducción a XHTML.
Introducción a CSS.
CSS Avanzado.

Te recomiendo su lectura, y que no te parezca mal, porque he visto que tus conceptos de HTML y CSS son pobres, por no decir que son muy pobres.

Te vendrán bien y procura tenerlos muy a mano.

Saludos.

oscarten · #23 (**permalink**) 04/10/2009, 09:45

Cita:

Iniciado por jomaruro

Hola:

De todas formas te aconsejo que te leas estos manuales:

Te recomiendo su lectura, y que no te parezca mal, porque he visto que tus conceptos de HTML y CSS son pobres, por no decir que son muy pobres.

Te vendrán bien y procura tenerlos muy a mano.

Saludos.

Efectivamente.
Mis conceptos de HTML son nulos.
Ya comenté más arriba que yo lo único que hago es copiar y pegar códigos.
Si alguien me pregunta como se hace algo no se contestarle.Lo único que puedo hacer es mirar los códigos de lo que tenga yo puesto y pasarselos.
Gracias por los links.

cristian_cena · #24 (**permalink**) 04/10/2009, 12:09

Cita:

Iniciado por oscarten

Mis conceptos de HTML son nulos.

Descubir nuestra propia ignoranca es el primer paso hacia la sabiduria. Suerte con los lenguajes.

Te sugiero que no borres *{margin:0; padding:0;} de tus estilos ya que te va a ayudar a que tu maqueta se vea casi igual en todos los navegadores.

Pruebalo y veras que tu tabla se sigue viendo bien.

En caso de que quieras darle un margen a la tabla puedes hacer lo siguiente:

<style type="text/css">
*{margin:0; padding:0;} /*esto es un "reset css" básico buscalo en google*/
table {
margin:/*valor que quieras en px, em, %, etc.*/; modifica los cuatro margenes por igual
margin-top:/*valor que quieras (ej. 10px)*/; modifica solo el margen hacia arriba
margin-left:/*valor que quieras (ej. 25%)*/; modifica solo el margen izquierdo
margin-right:/*valor que quieras (ej. 2em)*/; modifica solo el margen derecho
margin-bottom:/*valor que quieras (ej. 50pt)*/; modifica solo el margen hacia abajo
}
</style>

Saludos y suerte!