Foros del Web » Creando para Internet » CSS »

Tablas y css

Estas en el tema de Tablas y css en el foro de CSS en Foros del Web. Buenas estoy construyendo un horario tipo de clases a traves de una tabla pero construida en css, mi problema es que tengo todas las celdas ...
  #1 (permalink)  
Antiguo 26/04/2011, 00:10
 
Fecha de Ingreso: agosto-2010
Mensajes: 42
Antigüedad: 7 años, 4 meses
Puntos: 1
Tablas y css

Buenas estoy construyendo un horario tipo de clases a traves de una tabla pero construida en css, mi problema es que tengo todas las celdas fijas y divididas por dia, por ejemplo todos los dìas a las 7.00 am tengo computacion, para no repetirla a diario hay una forma de colocar una celda que se extienda de lunes a viernes y solo escriba computacion en vez de escribirlo para todos los dias. De igual forma para las horas si tengo clases que duran hasta 2 horas como hago para que la celda me ocupe el espacio requerido. Si alguien que conozca de esto por favor que me ayude.
  #2 (permalink)  
Antiguo 26/04/2011, 01:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2100
Respuesta: Tablas y css

Tienes que usar colspan o rowspan, algo así:
Código HTML:
Ver original
  1.     <tr>
  2.       <td>hola</td>
  3.       <td>hi</td>
  4.     </tr>
  5.     <tr>
  6.       <td colspan="2">ey</td>
  7.     </tr>
  8.   </table>

Con CSS directamente no se puede, es un atributo de HTML.
  #3 (permalink)  
Antiguo 26/04/2011, 06:17
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Tablas y css

Hola


Con una tabla podria ser mas facil , poro con css también se puede , te dejo esto que he hecho , pruebalo y ya mediras
Código HTML:
Ver original
  1. <ul id="dias">
  2. <li>Lunes</li>
  3. <li>Martes</li>
  4. <li>Miercoles</li>
  5. <li>Juves</li>
  6. <li>Viernes</li>
  7. </ul>
  8. <ul id="horas">
  9. <li class="borde"> horas</li>
  10. <li>00:00</li>
  11. <li>00:01</li>
  12. <li>00:02</li>
  13. <li>00:03</li>
  14. <li>00:04</li>
  15. <li>00:06</li>
  16. <li>00:07</li>
  17. <li>00:08</li>
  18. </ul>
  19. <ul id="cero">
  20. <li></li>
  21. <li></li>
  22. <li></li>
  23. <li></li>
  24. <li></li>
  25. </ul>
  26. <ul id="uno">
  27. <li></li>
  28. <li></li>
  29. <li></li>
  30. <li></li>
  31. <li></li>
  32. </ul>
  33. <ul class="completa" id="dos">
  34. <span>esta fila esta completa toda la semana</span>
  35. </ul>
  36. <ul id="tres">
  37. <li></li>
  38. <li></li>
  39. <li></li>
  40. <li></li>
  41. <li></li>
  42. </ul>
  43. <ul id="cuatro">
  44. <li></li>
  45. <li></li>
  46. <li></li>
  47. <li></li>
  48. <li></li>
  49. </ul>
  50. <ul id="cinco">
  51. <li></li>
  52. <li></li>
  53. <li></li>
  54. <li></li>
  55. <li></li>
  56. </ul>
  57. <ul id="seis">
  58. <li></li>
  59. <li></li>
  60. <li></li>
  61. <li></li>
  62. <li></li>
  63. </ul>
  64. <ul id="siete">
  65. <li></li>
  66. <li></li>
  67. <li></li>
  68. <li></li>
  69. <li></li>
  70. </ul>
  71. </body>

Este seria el css , pero no olvides agregar la hoja de reset
Código CSS:
Ver original
  1. #dias{
  2.     margin-left:200px;
  3.     margin-top:50px;
  4.     background:#0F6;
  5.     float: left;
  6.    
  7. }
  8. #dias li{
  9.     float:left;
  10.     display:block;
  11.     width:80px;
  12.     padding:10px;
  13.     border-right:1px #000 dotted;
  14.     border-top:1px #000 dotted;
  15.     border-bottom:1px #000 dotted;
  16.     text-align:center;
  17. }
  18. .borde{
  19.     border-top:1px #000 dotted;
  20. }
  21. #cero,#uno,#dos,#tres,#cuatro,#cinco,#seis,#siete{
  22.     float:left;
  23.     clear:left;
  24.     margin-left:200px;
  25. }
  26. #cero li,#uno li,#dos li,#tres li,#cuatro li,#cinco li,#seis li,#siete li{
  27.     float:left;
  28.     display:block;
  29.     width:80px;
  30.     padding:10px;
  31.     border-right:1px #000 dotted;
  32.     border-bottom:1px #000 dotted;
  33.     text-align:center;
  34.     height:16px;
  35. }
  36. #horas{
  37.     position:absolute;
  38.     margin-top:50px;
  39.     margin-left:99px;
  40.     float: left;
  41. }
  42. #horas li{
  43.     display:block;
  44.     width:80px;
  45.     padding:10px;
  46.     border-right:1px #000 dotted;
  47.     border-left:1px #000 dotted;
  48.     border-bottom:1px #000 dotted;
  49.     text-align:center;
  50. }
  51. .completa{
  52.     height:36px;
  53.     width:504px;
  54.     border-bottom:1px #000 dotted;
  55.     border-right:1px #000 dotted;
  56. }
  57. </style>
  #4 (permalink)  
Antiguo 26/04/2011, 07:37
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Tablas y css

Hola, fijate este enlace:
http://www.redips.net/javascript/dra...rop-example-3/

Es una tabla de horarios con drag and drop.
No es exactamente lo que pides, pero a mi me sirvió como base.
Espero te sea útil.

En cuanto a tu problema, con css no se puede repetir un texto tal como quieres, tienes que hacer a mano en html, o usando javascript o php.
Para más ayuda publica el codigo que estas usando o un enlace para ver que tienes.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:46.