Otras opciones al momento de disenar una tabla | HTML5 y CSS3 parte 3: Trabajando con formularios y tablas

Solucionado (ver solución)

Solucionado
(ver solución)

2
respuestas

por Jessica Bonilla Arciniegas

| 52.9k xp | 3 posts

Buenos dias, tengo una duda, en este caso la tabla que se diseno, tiene dos filas y en cada columna hay una opcion ya que el horario es jornada continua de 8h a 20h, como podria modificarse la tabla en casos donde por ejemplo los horarios sean de Lunes a viernes de 8am a 12pm y de 2pm a 6pm. y sabados de 8 a 12

Trate pero me queda es como otra columna abajo, con un espacio en blanco antes del horario.

como podria hacer que en la columna donde coloco los horarios, puedan aparecer "2columnas" pero que pertenezcan a la misma.

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

solución!

por Rafaela Rocha

| 2875.2k xp | 8758 posts

Alura Scuba Team Scuba Team

08/05/2023

¡Hola Jessica!

Para lograr lo que estás buscando, puedes utilizar la propiedad "rowspan" en HTML. Esta propiedad te permite combinar varias celdas en una sola fila.

En tu caso, podrías tener una fila para los horarios de lunes a viernes y otra para los horarios de los sábados. En la fila de lunes a viernes, tendrías dos celdas combinadas en una sola utilizando "rowspan=2". En la primera celda colocarías "8am a 12pm" y en la segunda celda "2pm a 6pm". En la fila de los sábados, tendrías una sola celda con "8am a 12pm".

Te dejo un ejemplo de cómo quedaría el código HTML:

<table>
  <tr>
    <th>Día</th>
    <th>Horario</th>
  </tr>
  <tr>
    <td>Lunes a Viernes</td>
    <td rowspan="2">8am a 12pm<br>2pm a 6pm</td>
  </tr>
  <tr>
    <td>Sábado</td>
  </tr>
</table>

Espero que esto te ayude a solucionar tu problema. ¡Buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)

por Jessica Bonilla Arciniegas

| 52.9k xp | 3 posts

08/05/2023

Muchisimas gracias, me fue de mucha ayuda.