3

Quisiera agregar o ya sea dividir una fila para agregar información en mi tabla hecha en HTML, tengo el siguiente código con el que he realizado una tabla en HTML:

<table cellpading=0 cellspacing=0 style="margin-left: 15px; margin-top: 10px; font: bold 9pt 'Arial';">
            <tbody>
                <tr>
                    <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Nombre:</p></td>
                    <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{Nombre}</p></td>
                </tr>
                
                <tr>
                    <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 111px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Apellido:</p></td>
                    <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{apellido}</p></td>
                </tr>
                <tr>
                    <td style="height: 40px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 111px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Puesto:</p></td>
                    <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{puesto}</p></td>
                </tr>
            </tbody>            
        </table>

Lo que quisiera es agregar información al lado de la columna de Nombre y apellido de la siguiente manera:

introducir la descripción de la imagen aquí

Pero dejando que la fila Puesto si vaya hasta el final de la tabla.

Alguien me puede dar un poco de orientación en el manejo de las tablas en HTML

Actualización:

Intente con lo que comentan en la respuesta pero hace que nuevo vaya hasta el final de la línea, quisiera ajustarlo a la mitad de la línea tal cual como esta en la imagen.

introducir la descripción de la imagen aquí

¿Hay algo que deba cambiar en mis estilos?

5 respuestas 5

4

Si no quieres que la línea inferior se extienda hasta el final de la tabla, tienes dos opciones:

  1. No crear las dos celdas del final en esa fila
  2. Agregar una celda, ocupando dos espacios colspan="2" y eliminando el borde inferior

Nota: En el fragmento de código dejé una fila para cada ejemplo de estas opciones.

Solo como sugerencia para tener un código más limpio y fácil de mantener, identifica los atributos que se repiten para cada elemento y crea reglas CSS en una hoja de estilos aparte.

Además, no necesitas la etiqueta <p>, porque las reglas se pueden aplicar directamente en la celda.

table {
    /* Todas las celdas de la tabla tienen estas dos propiedades */
    font: bold 9pt 'Arial';
    line-height: 15px;
    /* Esto aplica solo para la tabla */
    margin: 10px 0 0 15px;
}

/* Todas las celdas con borde inferior, sin clase, aplica a todas */
table td {
    height: 20px;
    border-bottom: #C0C0C0 1pt solid;
    padding: 0 0 0 3px;
}
/* Solo la primera fila con borde superior */
table tr:nth-child(1) td {
    border-top: #c0c0c0 1pt solid;
}
/* Celdas con propiedades diferentes */
td.puesto-tit {
    height: 40px;
    width: 111px;
}
td.puesto {
    height: 20px; /* Esto debería ser igual que la anterior */
    width: 643px;
}
td.no-border {
    border-bottom: none;
}
<table cellpading=0 cellspacing=0>
    <tbody>
        <tr>
            <td>Nombre:</td>
            <td>{nombre}</td>
            <td>Ubicación:</td>
            <td>{ubicacion}</td>
        </tr>
        <tr>
            <td>Apellido:</td>
            <td>{apellido}</td>
            <td>Sede:</td>
            <td>{sede}</td>
        </tr>
        <tr>
            <td class="puesto-tit">Puesto:</td>
            <td class="puesto">{puesto}</td>
            <!-- Se puede dejar sin las dos celdas faltantes -->
        </tr>
        <tr>
            <td class="puesto-tit">Puesto:</td>
            <td class="puesto">{puesto}</td>
            <!-- O agregar una sin borde abajo -->
            <td class="no-border" colspan="2"></td>
        </tr>
    </tbody>            
</table>

Si sigues usando los estilos "en línea", imagina el trabajo de cambiar el color de borde; aunque un buen editor o IDE te da las opciones para remplazo múltiple, no tiene caso complicar tanto la escritura como la lectura y mantenimiento del código.

3

Buen día,

Lo que puedes hacer es definir al inicio de tu tabla el número de columnas que vas a utilizar, en el ejemplo adjunto puse 6 columnas (Cada columna va a utilizar el 16.66% del ancho de tu tabla

<col width="16.66%"><col width="16.66%"><col width="16.66%"><col width="16.66%"><col width="16.66%"><col width="16.66%">

Si deseas agregar más columnas debes tener en cuenta que la suma del ancho de todas las columnas debe ser 100%. No siempre es necesario definir las columnas en las tablas, pero cuando hay que unir celdas es mucho más sencillo hacerlo de esta forma, puedes ver otra pregunta similar como referencia

Cuando desees que una celda abarque más de una columna puedes utilizar colspan seguido del número de columnas que la celda va a utilizar, por ejemplo colspan="2" indica que la celda va a utilizar 2 columnas

Te dejo un ejemplo:

<table cellpading=0 cellspacing=0 style="margin-left: 15px; margin-top: 10px; font: bold 9pt 'Arial';">
    <col width="16.66%"><col width="16.66%"><col width="16.66%"><col width="16.66%"><col width="16.66%"><col width="16.66%">
    <tbody>
        <tr>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Nombre:</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;" colspan="2"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{Nombre}</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Ubicación</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;" colspan="2"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{Ubicación}</p></td>
        </tr>
                
        <tr>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 111px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Apellido:</p></td>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;" colspan="2"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{apellido}</p></td>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Sede</p></td>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;" colspan="2"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{Sede}</p></td>
        </tr>
        
        <tr>
            <td style="height: 40px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 111px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Puesto:</p></td>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{puesto}</p></td>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 643px;" colspan="1"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;"></p></td>
        </tr>
    </tbody>
</table>

Nota: En la fila de "puesto" inserté una celda vacía que abarca 1 columna, pero si deseas que la celda donde dice {puesto} abarque 2 columnas entonces solo utilizas colspan="2" en esa celda y puedes eliminar la celda vacía.

2
+50

Personamente no recomiendo aplicar estilos en cascada directamente a las filas y celdas dentro de tablas, pero si el requerimiento pide que así sea, entonces yo lo haría de la siguiente manera.

<table cellpading=0 cellspacing=0 style="margin-left: 15px; margin-top: 10px; font: bold 9pt 'Arial';">
    <tbody>
        <tr>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Nombre:</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{Nombre}</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Ubicación</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{ubicacion}</p></td>
        </tr>

        <tr>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 111px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Apellido:</p></td>
            <td style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 200px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{apellido}</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Sede</p></td>
            <td style="height: 20px; border-top: #c0c0c0 1pt solid; border-bottom: #C0C0C0 1pt solid; padding: 0px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{sede}</p></td>
        </tr>
        <tr>
            <td style="height: 40px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 111px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">Puesto:</p></td>
            <td colspan="3" style="height: 20px; border-bottom: #C0C0C0 1pt solid; padding: 0px; width: 200px;"><p style="padding-left: 3px; margin-top: 0px; margin-bottom: 0px; font: bold 9pt 'Arial'; line-height: 15px;">{puesto}</p></td>
        </tr>
    </tbody>            
</table>

Espero te sirva, saludos.

2

Si he entendido bien, la cosa es bastante sencilla.

  • Tienes una tabla con un máximo de 4 celdas por fila
  • Algunas filas sólo se rellenan 2 de las celdas

La cosa consiste en poner las cuatro celdas por fila si todas tienen datos y en las celdas que sólo tienen un dos celdas cubiertas, añadir una tercera celda que se expanda hasta el final (colspan), o hacer que la segunda celda se expanda hasta el final (así te lo puse en el ejemplo)

Por otro lado, no deberías usar NUNCA estilos inline, usa hojas css. El motivo, a parte de mejorar el mantenimiento, es que para la usabilidad web no suele gustar la presencia de este tipo de estilos.

table {
  margin-left: 15px;
  margin-top: 10px;
  font: bold 9pt 'Arial';
}

table td {
  height: 20px;
  border-top: #c0c0c0 1pt solid;
  border-bottom: #C0C0C0 1pt solid;
  padding: 0px;
}

table td p {
  padding-left: 3px;
  margin-top: 0px;
  margin-bottom: 0px;
  font: bold 9pt 'Arial';
  line-height: 15px;
}

td.first {
  width: 111px;
}

td.second {
  width: 500px;
}
<table cellpading=0 cellspacing=0>
  <tbody>
    <tr>
      <td class="first">
        <p>Nombre:</p>
      </td>
      <td class="second">
        <p>{Nombre}</p>
      </td>
      <td>
        <p>Ubicación:</p>
      </td>
      <td>
        <p>{ubicacion}</p>
      </td>
    </tr>

    <tr>
      <td>
        <p>Apellido:</p>
      </td>
      <td>
        <p>{apellido}</p>
      </td>
      <td>
        <p>Sede:</p>
      </td>
      <td>
        <p>{sede}</p>
      </td>
    </tr>
    <tr>
      <td>
        <p>Puesto:</p>
      </td>
      <td colspan=3>
        <p>{puesto}</p>
      </td>
    </tr>
  </tbody>
</table>

1

Buenas puedes probar de la siguiente manera (puedes maquetar con la siguiente herramienta online Table Tag)

<table>
<tbody>
    <tr>
        <td>Nombre</td>
        <td>{nombre}</td>
        <td colspan="2"></td>
        <td>Ubicacion</td>
        <td>{ubicacion}</td>
    </tr>
    <tr>
        <td>Apellido</td>
        <td>{apellido}</td>
        <td colspan="2"></td>
        <td>Sede</td>
        <td>{sede}</td>
    </tr>
    <tr>
        <td>Puesto</td>
        <td>{Puesto}</td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td colspan="6"></td>
    </tr>
    <tr>
        <td colspan="6"></td>
    </tr>
</tbody>
1
  • Intente con lo que me comentas pero esta opción hizo que se llevara los nuevos td al final de la línea, ¿hay manera de ajustarlos en cierta posición o hay que cambiar algo a mis estilos? Acabo de agregarlo en una actualización a mi pregunta
    – John Doe
    Commented el 10 mar. 2022 a las 19:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.