Ver Mensaje Individual
  #12 (permalink)  
Antiguo 16/01/2009, 21:04
Biorens
 
Fecha de Ingreso: enero-2009
Mensajes: 6
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Dando el formato de tabla con div

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
%>