Dando el formato de tabla con div

[zacktagnan]

Hola buenas:

Quiero pasar a hacer páginas con estructura de tablas pero sin usar las etiquetas <table>...</table> tradicionales. Es decir, con etiquetas <div>, <ul>, <li> y lo que haga falta.

Pero la cuestión es que no sé como se hace exactamente.

Bueno, para una estructura como la que sigue más ó menos ya sé:

---------
| Tema1 |
---------
| Tema2 |
---------
| Tema3 |
---------

Pero mi duda principal es como se hace para una estructura de tabla que ocupe unos determinados pixeles ó %, que sea igual centrada, y un determinado nº de filas ó columnas con una estructura así:

------------------- ---------------------------------------------------
| Tema1 | Tema1a | Tema1b | Team1c |
-----------------------------------------------------------------------
| Tema2 | Tema2a | Tema2b | Team2c |
-----------------------------------------------------------------------
| Tema3 | Tema3a | Tema3b | Team3c |
-----------------------------------------------------------------------

A ver si alguien me hecha una manita porfa. Gracias.

Saludos,

zacktagnan.
================================================== =======

[RoQ]

para eso debes usar una tabla, lo divs no son para simular tablas, son para dividir tu estructura en secciones.

[zacktagnan]

Yo lo quería era algo como esto

<div>
<ul style="margin-left:10px; margin-right:0px;">
<li style="float:left; border:1px solid #000000; width:25%;">cosa</li>
<li style="float:left; border:1px solid #000000; border-left:0px; width:50%;">cosa</li>
<li style="float:left; border:1px solid #000000; border-left:0px; width:15%;">cosa</li>
<li style="float:left; border:1px solid #000000; width:25%;">cosa</li>
<li style="float:left; border:1px solid #000000; border-left:0px; width:50%;">cosa</li>
<li style="float:left; border:1px solid #000000; border-left:0px; width:15%;">cosa</li>
</ul>
</div>

que genera algo como esto

--------------------------
| cosa | cosa | cosa |
--------------------------
| cosa | cosa | cosa |
---------------------------

Lo que al final quiero conseguir es generar mediante ASP tantas filas como registros tenga en una base.
Con tablas ya lo he hecho(generando la tr mientras no se terminen los registros) pero con div y ul y li no.
Lo que no quiero es que en una fila aparezcan bien los tres datos y en otra fila igual solo aparezcan dos porque el tercero no cabe,...

Me faltaría saber como centrar el div respecto a la ventana, porque poniendo <div align="center"> me alinea el texto dentro de los li pero no el div ó la ul.

Saludos,

zacktagnan.
================================================== =======

[ramm]

Igual que lo que te dice RoQ, los ul y li tampoco son para simular tablas.

Lo que quieres hacer es presentar datos tabulados y para eso son las tablas, la idea es utilizar los elementos HTML para lo que fueron concebidos.

[zacktagnan]

Vamos a ver. Al final posiblemente lo que pasa es que esté algo confundido. Pero en algún que otro sitio Web ó revista ó lo que fuera me pareció entender que dentro poco ó de algún tiempo no muy lejano, al igual que pasó por ejemplo con las etiquetas <font>, se dejarían de usar las <table> ó por lo menos se recomendaría no emplear y utilizar en su lugar las <div>, <ul>, <li>...

No sé, que alguien me lo aclaré definitivamente.

¿Las etiquetas de tablas siguen vigentes por mucho tiempo ó en un futuro más ó menos anunciado desaparecerán? ¿Las reglas de la W3C siguen de acuerdo con el uso de tablas ó si pasa por el validador te puede dar errores?...

No sé, algún experto de accesibilidad, css, ó lo que sea que me lo aclare.

Yo ahora me dispongo a realizar un nuevo proyecto web, más que nada a programarlo y limpiar código y adaptarlo con hoja de estilos...
Entonces, pensaba que si quería que cumpliera todas esas normas de accesibilidad Nivel A, AA, AAA, XHTML, y de W3C, una de las cosas que había que hacer es estructurar la página sin usar tablas, poniendo en su lugar
<div>, <ul>, <li> y cosas así...

Como digo, ya no lotengo tan claro según las respuestas ya recibidas. Pero si que he visto códigos de algunas páginas en las que dónde tradicionalmente habría etiquetas <table><tr><td>... hay <div><ul><li style=float:left;... ó algo así.

Por ejemplo: http://www.irunweb.com/portafolios.php

Pues eso. Si algún experto del foro me puede aclarar la cuestión de una vez por todas se lo agradecería.

Saludos,

zacktagnan.
================================================== =======

[baccxus]

Mira te lo aclaro:

Los font, cellpadding, width, height y otros atributos de las tablas no se deben usar, para ello están los CSS, pero las tablas se seguirán usando, puesto que están hechas para tabular datos, y es muy engorroso aparentar una tabla a puro CSS.

Ahora lo que si puedes es usar CSS para darle la apariencia que quieras a tus tablas, un ejemplo de esto está en http://icant.co.uk/csstablegallery/, allí verás como aplican el CSS al diseño de las TABLAS.

Saludos,

[webosiris]

para la accesibilidad, es tan malo maquetear con tablas como tabular con capas
Te recomiendo leer con paciencia esto (en inglés, 44 páginas) u esto otro en español (+ corto, eso sí)

[zacktagnan]

Gracias por todos los comentarios y reseñas que se han enviado.

Se intentará en la medida de lo posible aplicarlos.

Por los últimos, parece que más que nada se sugiere que se siga incluyendo tablas más que nada porque con solamente DIV sería muy en gorroso y daría mucho trabajo. Pero bueno...

Nada más. Saludos,

zacktagnan.
================================================== ======


Si alguien quiere añadir algo más...

[furoya]

Hola todos :

zacktagnan : el tema es más simple, o mucho más complejo.

Si estás pasando páginas a otra esructura, entonces ya debes saber hacerlas con una primera estructura. Como estamos en CSS, no puedo adivinar qué lenguaje base estás usando. Si es XML, vas a tener que usar div. Pero supongo que hablas de HTML.

Entonces sabes que los documentos tienen una estructura natural, que hay etiquetas para títulos, para párrafos, para listas, y para tablas.

Hacer un documento maquetado con tablas es -como dices- engorroso; tanto como hacer tablas con otras etiquetas.

Ahora bien, cuando empiezas a 'inventar' en el documento, te encuentras con que algunos efectos o diseños se complican con las etiquetas tradicionales. Si bien sabemos que las tablas fueron hechas para tabular, cuando conocemos bien los límites y posibilidades de un lenguaje podemos perfectamente usarlas para cualquier cosa. De la misma forma, si queremos hacer tablas con etiquetas input, no hay nada que te lo prohiba.. ¿pero vale la pena? ¿se justifica para el diseño que estás haciendo?.

Una cosa es que estés convencido, y otra muy distinta que lo hagas poque no entiendes de qué estás hablando.

Las tablas seguiran existiendo hasta que se vuelva al XML. Si tienes maquetada una pagina con ellas y ahora descubres que te convenía hacerla con otro elemento, te felicito. Pero si estás usando una tabla como tabla y la quieres cambiar porque hay por ahí gente que explica las cosas a medias y tú le entiendes a cuartos ...

Hace poco hubo una discusión sobre el daño que puede hacer el lavado de cerebro sobre el uso de CSS que están apoyando -algunos con buena voluntad- no sólo desde este foro sino en toda la web.

Compatibilidad IE OPERA FIREFOX

Y hay gente como tú que así termina entendiendo cualquier cosa.

saludos

furoya

[furoya]

Uff... Que duros fuimos en algunas épocas. Aunque también hay gente que cree cualquier cosa que le dicen, y en algún momento la situación se hizo dificil, porque lo repetían y terminaban confundiendo a todos los novatos. De alguna forma había que parar la bola de nieve.

Bien, en realidad volví para poner un ejemplo de lo que dice el título y así ayudar un poco a los que usan el buscador. Supongo que es más para XML, pero Firefox lo acepta (hasta IE6 al menos, no).

Código:

 <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>
<head>
<title>TABLA CON CSS.</title>
</head>
<body>

<div style="display:table; background-color:red; border:2px solid pink; table-layout:fixed; ">

<div style="background-color:lightblue; border:2px solid black; display:table-caption; ">CAPTION</div>
<div style="background-color:white; border:2px solid blue; display:table-row;  ">
   <div style="background-color:lime; border:2px solid black; display:table-cell; ">TH 1</div>
<div style="background-color:yellow; border:2px solid black; display:table-cell; ">TD 1</div>
<div style="background-color:yellow; border:2px solid black; display:table-cell; ">TD 2</div></div>
<div style="background-color:white; border:2px solid blue; display:table-row; ">
   <div style="background-color:lime; border:2px solid black; display:table-cell; ">TH 2<br/>%</div>
<div style="background-color:yellow; border:2px solid black; display:table-cell; ">TD 3</div>
 <div style="background-color:yellow; border:2px solid black; display:table-cell; ">TD 4%%</div></div>
<div style="background-color:white; border:2px solid blue; display:table-row; ">
   <div style="background-color:lime; border:2px solid black; display:table-cell; ">TH 3</div>
<div style="background-color:yellow; border:2px solid black; display:table-cell; ">TD 5</div>
<div style="background-color:yellow; border:2px solid black; display:table-cell; ">TD 6</div>
</div>

</body>
</html>

Centrar datos, tablas, textos,... en la vertical

Cómo hacer que una division con <DIV> se alargue a la misma altura que la de al lado?

[Abruzzi]

Mira zacktagnan con div es mejor....
a cada css... es decir a cada div... ponle esta propiedad en el style:
float:left;
y de asi:

|cosa|
|cosa|
|cosa|
|cosa|

se te mostraran asi:

|cosa||cosa||cosa||cosa|

espero que te sirva....

[Biorens]

Yo también he visto en el libro DHTML y CSS de Anaya que decían lo de que las tablas se tenía que acabar y que se tendrían que usar las etiquetas <div> para las filas y <span> para cada columna. Y he visto un ejemplo complicadísimo de como usarlo... luego lo pego.

Creo que el tío que ha escrito que se deberían usar <div> y <span> se había fumado algo.
Tal como se comenta en un mensaje anterior de este foro, no, no se puede hacer que las columnas queden rectas. Con este método solo se puede definir el espacio que quieres que sobre, pero no se puede dar un width fijo, tal como se hace en las tablas.
Es mucho más cómodo y más limpio las clásicas <table><tr><td>, y consigues que las tablas que tu página esten alineadas!!

El siguiente código es una función, que pasandole los parámetros, devuelve una tabla hecha a partir de etiquetas <div> y <span> (además usa CSS para definir los estilos y extrae datos de una BD)

<%
' *** MostraGrid
function MostraGrid(Taula,Camps,strWhere,ValorsCamps,Operad orsSelect,TitolCamps,strOrdenaPor,strMetodoOrden,s trBusqueda,Apartat,Modifica,Elimina,Detalle,Buscad or,Lengua,PagCurrent,OffsetMove,OffsetFinal,NumReg Pag)

dim NomCamps,CapsaleraTitolCamps,StrSelect,CapsaleraTa ula

'ABRE LA BD
set rsDadesGrid = Server.CreateObject("ADODB.Recordset")
rsDadesGrid.ActiveConnection = "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & Server.Mappath("rs.mdb")
rsDadesGrid.Source = StrSelect
rsDadesGrid.CursorType = 1
rsDadesGrid.CursorLocation = 3
rsDadesGrid.LockType = 3
rsDadesGrid.PageSize = NumRegPag
rsDadesGrid.Open()

TotalPag = rsDadesGrid.PageCount
TotalReg = rsDadesGrid.RecordCount

Ordenacion = rsDadesGrid(strOrdenaPor).Name & " " & strMetodoOrden
rsDadesGrid.Sort = Ordenacion

OffsetInici = OffsetFinal + OffsetMove
OffsetFinal = OffsetInici + NumRegPag
RegFinal = OffsetFinal
if (RegFinal>=TotalReg) then
RegFinal = TotalReg - 1
end if

if NOT rsDadesGrid.EOF then

rsDadesGrid.Move OffsetInici


'ESCRIBE LOS CAMPOS EN UNA TABLA
for OffsetReg=OffsetInici to RegFinal
LineesTaula = LineesTaula & "<div class='" & EstilLineaTaula & "'>"
for i=1 to (NumCamps-1)
LineesTaula = LineesTaula & "<span class='Camp'>" & rsDadesGrid(i) & "</span>"
next
if Detalle=1 then
LineesTaula = LineesTaula & "<span class='Detalle'><a href='#?Id=" & rsDadesGrid(0) & "'>" & Diccionari(Lengua,"Detalle") & "</a></span>"
end if
if Modifica=1 then
LineesTaula = LineesTaula & "<span class='Modifica'><a href='#?Id=" & rsDadesGrid(0) & "'>" & Diccionari(Lengua,"Modifica") & "</a></span>"
end if
if Elimina=1 then
LineesTaula = LineesTaula & "<span class='Elimina'><a href='#?Id=" & rsDadesGrid(0) & "'>" & Diccionari(Lengua,"Elimina") & "</a></span>"
end if
LineesTaula = LineesTaula & "</div>"
rsDadesGrid.MoveNext
next

PeuTaula = "<div id='PeuTaula'>&nbsp;</div>"

Posicio = ""
Posicio = Posicio & "<div id='" & EstilCapPosicio & "'>"
Posicio = Posicio & "<span id='PosicioReg'>" & Diccionari(Lengua,"Registro") & " " & OffsetInici+1 & "-" & RegFinal+1 & " " & Diccionari(Lengua,"ArticuloDe") & " " & TotalReg & "</span>"
Posicio = Posicio & "<span id='PosicioPag'>" & Diccionari(Lengua,"Pagina") & " " & PagCurrent & " " & Diccionari(Lengua,"ArticuloDe") & " " & TotalPag & "</span>"
Posicio = Posicio & "</div>"

SaltReg = ""
SaltReg = SaltReg & "<div id='" & EstilCapSaltReg & "'><span id='NavReg'><span class='TextNavReg'>" & Diccionari(Lengua,"Ver") & " :</span>"
if NumRegPag = 5 then
SaltReg = SaltReg & "<span class='TextNavReg'>5</span>"
else
SaltReg = SaltReg & "<span class='TextNavReg'><a href='dispatch.asp?Apartat=" & Apartat & "&amp;OrdenarPor=" & strOrdenaPor & "&amp;MetodoOrden=" & strMetodoOrden & "&amp;NumRegPag=5" & "&amp;strBusqueda=" & strBusqueda & ValorsCamps & "'>5</a></span>"
end if
if NumRegPag = 10 then
SaltReg = SaltReg & "<span class='TextNavReg'>10</span>"
else
SaltReg = SaltReg & "<span class='TextNavReg'><a href='dispatch.asp?Apartat=" & Apartat & "&amp;OrdenarPor=" & strOrdenaPor & "&amp;MetodoOrden=" & strMetodoOrden & "&amp;NumRegPag=10" & "&amp;strBusqueda=" & strBusqueda & "&amp;ValorsCamps=" & ValorsCamps & "'>10</a></span>"
end if
if NumRegPag = 25 then
SaltReg = SaltReg & "<span class='TextNavReg'>25</span>"
else
SaltReg = SaltReg & "<span class='TextNavReg'><a href='dispatch.asp?Apartat=" & Apartat & "&amp;OrdenarPor=" & strOrdenaPor & "&amp;MetodoOrden=" & strMetodoOrden & "&amp;NumRegPag=25" & "&amp;strBusqueda=" & strBusqueda & "&amp;ValorsCamps=" & ValorsCamps & "'>25</a></span>"
end if
if NumRegPag = 50 then
SaltReg = SaltReg & "<span class='TextNavReg'>50</span>"
else
SaltReg = SaltReg & "<span class='TextNavReg'><a href='dispatch.asp?Apartat=" & Apartat & "&amp;OrdenarPor=" & strOrdenaPor & "&amp;MetodoOrden=" & strMetodoOrden & "&amp;NumRegPag=50" & "&amp;strBusqueda=" & strBusqueda & "&amp;ValorsCamps=" & ValorsCamps & "'>50</a></span>"
end if
if NumRegPag = 100 then
SaltReg = SaltReg & "<span class='TextNavReg'>100</span>"
else
SaltReg = SaltReg & "<span class='TextNavReg'><a href='dispatch.asp?Apartat=" & Apartat & "&amp;OrdenarPor=" & strOrdenaPor & "&amp;MetodoOrden=" & strMetodoOrden & "&amp;NumRegPag=100" & "&amp;strBusqueda=" & strBusqueda & "&amp;ValorsCamps=" & ValorsCamps & "'>100</a></span>"
end if
'SaltReg = SaltReg & "<span class='TextNavReg'>Registres per pantalla</span>"
SaltReg = SaltReg & "</span>"

strVolverHome = ""
strVolverHome = strVolverHome & "<div id='Ayuda'>"
strVolverHome = strVolverHome & "<p>"
strVolverHome = strVolverHome & "<a href='default.asp'>" & Diccionari(Lengua,"VolverHome") & "</a>"
strVolverHome = strVolverHome & "</p>"
strVolverHome = strVolverHome & "</div>"

if NoReg=0 then
MostraGrid = strFormBusqueda & Posicio & CapsaleraTaula & LineesTaula & PeuTaula & SaltReg & strVolverHome
else
MostraGrid = strFormBusqueda & strNoReg & strVolverHome
end if

response.write(MostraGrid)
end function
'' *** MostraGrid
%>

[furoya]

Hola de nuevo.

Un par de comentarios sobre la vieja discusión, o más bien, sobre mi mensaje anterior.

1. Me parece que vamos a tener que seguir siendo duros.
   
2. El ejemplo que puse para crear una tabla con div también funciona en Opera y en Chrome (y seguramente en Safari). En IE 7 todavía no.

Existe en el Foro la política de no revivir temas muy viejos, pero sospecho (y por la experiencia, es algo más que una sospecha) que lo que se trata de evitar es que un tema redondo o resuelto vaya a ser arruinado por quienes no saben leer y vienen a re-resolver o agregar comentarios ya superados. Uno podría pensar "peor para ellos, que hacen un papelón", pero la verdad es que es una falta de respeto y no se la puede fomentar. A veces es un poco violento para un moderador o administrador decirle esto a alguien que quiere colaborar, aunque lo haga mal y nos arruine un tema; pero como yo no soy nadie y ya todos saben que soy un bestia, se los puedo decir : Chicos, lean antes de postear, y entiendan de lo que están escribiendo; porque si nos cierran un tema y hay que actualizarlo más tarde, ni lo vamos a poder hacer ni vamos a poder agregarle un enlace al otro tema donde siga la discusión.

La otra vez lo dejé pasar, pero como ya estoy aquí ... y bue ... : el ejemplo que pusiste ya estaba, Abruzzi. Y no resuelve nada porque no hace tablas. Es lo mismo que puso justamente zacktagnan, con etiquetas li.
Por otro lado, después de que yo puse el método para hacer tablas con div, tu mensaje está totalmente fuera de lugar; estás inventando un truco —que insisto, no anda— cuando ya está escrito el código propuesto por el estándar.



Qué tal Biorens, bienvenido al Foro.
A mi me gustaría ver esa burrada del libro de DHTML (?) y CSS de Anaya. O mejor no, tenemos que leer cada cosa! (Yo tampoco sé que se fumó, pero seguro no es legal.)
A menos que se refiera al ejemplo que puse antes. Pero no parece.


Alguna sugerencia. Si bien es cierto que al principio se habló de una base de datos, el foro es de CSS; tratemos de evitar lenguajes de programación si no es absolutamente necesario. Y si lo es, a mi me gustaría que fuese javascript, o cualquiera que pueda verse "copiando y pegando" localmente, como el CSS. El ejemplo que pusiste parece lenguaje propietario de MS.
Pero es un gusto personal, para mantener cierta coherencia. Nada más.

Lo que sí te vamos a agradecer es que uses las etiquetas [code] para meter código. Así es más fácil de leer.

Arriba puse un ejemplo de uso de javascript para igualar las medidas de las celdas. Pero es un método complicado cuando el usuario hace ajustes en el documento.

Saludos

furoya

[sychowaves]

Pues piyen este codigo

Código HTML:

<div style = "display: table; width: 500px;">
    <div style = "float: left; width: 104px;">
        <div style = "float: left; height: 100px; width: 102px;"></div>
        <div style = "float: left; height: 143px; width: 102px;"></div>
    </div>
    <div style = "float: left; height: 250px; width: 100px;"></div>
    <div style = "float: left; height: 150px; width: 100px;"></div>
    <div style = "float: right; height: 50px; width: 175px;"></div>
    <div style = "float: right; height: 194px; width: 80px;"></div>
    <div style = "float: right; height: 194px; width: 87px;"></div>
    <div style = "float: right; height: 93px; width: 100px;"></div>
</div>
 

Esta de locos... exito jejeejej

[furoya]

Si le quitas el display: table también funciona. No tiene que ver conque sea tabla, sino conque "flota". O yo no veo eso que te llama la atención; por eso no termino de entender por qué está ese código en este tema.

Igual sí es interesante que se sepa que se pueden 'ensamblar' bloques. Todo sirve.

Aprovecho para comentar que la tabla CSS ya anda en Internet Explorer 7.x. Aunque insisto en que es inútil usarla en HTML, porque ya existe la etiqueta para hacerla.