Tablas y css

elbiendepinga · #1 (**permalink**) 25/04/2011, 23:10

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.

pzin · #2 (**permalink**) 26/04/2011, 00:53

Tienes que usar colspan o rowspan, algo así:

Código HTML:

Ver original<table>
    <tr>
      <td>hola</td>
      <td>hi</td>
    </tr>
    <tr>
      <td colspan="2">ey</td>
    </tr>
  </table>

Con CSS directamente no se puede, es un atributo de HTML.

saul123 · #3 (**permalink**) 26/04/2011, 05:17

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<body>
<ul id="dias">
<li>Lunes</li>
<li>Martes</li>
<li>Miercoles</li>
<li>Juves</li>
<li>Viernes</li>
</ul>
<ul id="horas">
<li class="borde"> horas</li>
<li>00:00</li>
<li>00:01</li>
<li>00:02</li>
<li>00:03</li>
<li>00:04</li>
<li>00:06</li>
<li>00:07</li>
<li>00:08</li>
</ul>
<ul id="cero">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="uno">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="completa" id="dos">
<span>esta fila esta completa toda la semana</span>
</ul>
<ul id="tres">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="cuatro">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="cinco">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="seis">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul id="siete">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>

Este seria el css , pero no olvides agregar la hoja de reset

Código CSS:

Ver original#dias{
    margin-left:200px;
    margin-top:50px;
    background:#0F6;
    float: left;
    
}
#dias li{
    float:left;
    display:block;
    width:80px;
    padding:10px;
    border-right:1px #000 dotted;
    border-top:1px #000 dotted;
    border-bottom:1px #000 dotted;
    text-align:center;
}
.borde{
    border-top:1px #000 dotted;
}
#cero,#uno,#dos,#tres,#cuatro,#cinco,#seis,#siete{
    float:left;
    clear:left;
    margin-left:200px;
}
#cero li,#uno li,#dos li,#tres li,#cuatro li,#cinco li,#seis li,#siete li{
    float:left;
    display:block;
    width:80px;
    padding:10px;
    border-right:1px #000 dotted;
    border-bottom:1px #000 dotted;
    text-align:center;
    height:16px;
}
#horas{
    position:absolute;
    margin-top:50px;
    margin-left:99px;
    float: left;
}
#horas li{
    display:block;
    width:80px;
    padding:10px;
    border-right:1px #000 dotted;
    border-left:1px #000 dotted;
    border-bottom:1px #000 dotted;
    text-align:center;
}
.completa{
    height:36px;
    width:504px;
    border-bottom:1px #000 dotted;
    border-right:1px #000 dotted;
}
</style>

C2am · #4 (**permalink**) 26/04/2011, 06:37

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