1

Estoy haciendo unos templates para dar formato a unas tablas y lo que quiero es tener este resultado Imagen de muestra

Como se puede observar en la ultima columna se tienes el encabezado HORIZONTAL y de ahí parten otros dos, me gustaría saber como puedo lograr ese resultado, se los agradecería.

Esto es lo que llevo hasta el momento:

ESTILOS

<style type="text/css">
    .center-title{
        text-align: center;
        background-color: greenyellow;
    }
    
    .table-simple{
        width: 100%;
    }

    .table-record{
        width: 100%;
    }

    .title-record h3{
        padding: 10px;
    }
</style>

TABLA

<div id="tabla3" >
            <table class="table-record">
                <thead>
                    <div id="titulo2" class="title-record center-title">
                        <h3><strong>VIVA MAYALES SAS</strong></h3>
                        <h3><strong>BALANCE GENERAL(Análisis Vertical y Horizontal)</strong></h3>
                    </div>
                    <tr>
                        <th>
                            MILLONES DE PESOS
                        </th>
                        <th>
                            2019
                        </th>
                        <th>
                            VERTICAL 2019
                        </th>
                        <th>
                            2018
                        </th>
                        <th>
                            VERTICAL 2018
                        </th>
                        <th>
                            Horizontal
                            <th>
                                Var. Absoluta
                            </th>
                            <th>
                                Var. Relativa
                            </th>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Ruben Dario Ortiz Galeano</td>
                        <td>77034874</td>
                        <td>Gerente Y Representante Legal</td>
                    </tr>
                    <tr>
                        <td>Jase Manuel Ortiz Galeano</td>
                        <td>77034144</td>
                        <td>Gerente Suplente</td>
                    </tr>
                </tbody>
            </table>
        </div>

Gracias por la colaboración.

2 respuestas 2

2

mira en html hay una propiedad de las etiquetas th que permite hacer que estas se combinen estas propiedades son colspan y rowspan te explico tr es una etiqueta que sirve para crear una fila th es una etiqueta que sirve para crear una columna

lo que yo haria para lograr el resultado que tu quieres seria esto. primero cambiaria el codigo que tu hiciste y de base haria esto.

dales en ejecutar para ver como quedan.

<table>
<tr>
  <th>MILLONES DE PESOS</th>
  <th>2019</th>
  <th>VERTICAL 2019</th>
  <th>2018</th>
  <th> VERTICAL 2018</th>
  <th>Horizontal</th>
</tr>

<tr>
  <th>Var. Absoluta</th>
  <th>Var. Relativa</th>
</tr>
</table>

y ahora con las propiedades que te dije haria esto:

<table>
<tr>
  <th rowspan="2" >MILLONES DE PESOS</th>
  <th rowspan="2" >2019</th>
  <th rowspan="2" >VERTICAL 2019</th>
  <th rowspan="2" >2018</th>
  <th rowspan="2" > VERTICAL 2018</th>
  <th colspan="5" >Horizontal</th>
</tr>
<tr>

  <th></th>
  <th rowspan="2">Var. Absoluta</th>
  <th rowspan="2">Var. Relativa</th>
</tr>
</table>

Asi se acomodan como tu quieres. y ya para darle formato en vez de utilizar un codigo de css en el encabezado yo meteria todo dentro de las etiquetas. primero le pondria un tamaño de width a la tabla como tal por ejemplo yo use 750px, y ya para que las celdas de la tabla ocupen un espacio en concreto yo utilizaria width pero con porcentajes. aqui hay un ejemplo:

<table style="width: 750px;">

<tr>
  <th rowspan="2" style="background-color:  black; color: green; width: 20%;">MILLONES DE PESOS</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 8%;">2019</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 20%;">VERTICAL 2019</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 8%;">2018</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 20%;"> VERTICAL 2018</th>
  <th colspan="5" style="background-color:  black; color: green; width: 24%;">Horizontal</th>
</tr>
<tr>

  <th></th>
  <th rowspan="2" style="background-color:  black; color: green;">Var. Absoluta</th>
  <th rowspan="2" style="background-color:  black; color: green;">Var. Relativa</th>
</tr>
</table>

para que no se mire tan chafa le cambiaria el background-color a la tabla wacha:

<table style="width: 750px; background-color: black;">

<tr>
  <th rowspan="2" style="background-color:  black; color: green; width: 20%;">MILLONES DE PESOS</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 8%;">2019</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 20%;">VERTICAL 2019</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 8%;">2018</th>
  <th rowspan="2" style="background-color:  black; color: green; width: 20%;"> VERTICAL 2018</th>
  <th colspan="5" style="background-color:  black; color: green; width: 24%;">Horizontal</th>
</tr>
<tr>

  <th></th>
  <th rowspan="2" style="background-color:  black; color: green;">Var. Absoluta</th>
  <th rowspan="2" style="background-color:  black; color: green;">Var. Relativa</th>
</tr>
</table>

Se que esto ya no lo pediste pero aqui esta como haria yo la tabla... lo hice porque lo que preguntaste es algo muy basico y yo creo que este codigo podria servirte para aprender un poco mas.

como recomendacion yo te recomiendo meter todo lo el css en vez de un archivo aparte o en una etiqueta en el head yo recomiendo que lo metas dentro de las propias etiquetas asi va ser mas facil modificar las cosas y no tendras que estarte acordando de como nombraste cada cosa:

wacha:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<div style="width: 750px; height: 120px; background-color: #84a377; text-align: center;">
    <div style="padding-top: 10px;">
                    <h3><strong>VIVA MAYALES SAS</strong></h3>
                    <h3><strong>BALANCE GENERAL(Análisis Vertical y Horizontal)</strong></h3>
    </div>
</div>

<table style="width: 750px; background-color: black;">

    <tr>
      <th rowspan="2" style="background-color:  black; color: green; width: 20%;">MILLONES DE PESOS</th>
      <th rowspan="2" style="background-color:  black; color: green; width: 8%;">2019</th>
      <th rowspan="2" style="background-color:  black; color: green; width: 20%;">VERTICAL 2019</th>
      <th rowspan="2" style="background-color:  black; color: green; width: 8%;">2018</th>
      <th rowspan="2" style="background-color:  black; color: green; width: 20%;"> VERTICAL 2018</th>
      <th colspan="5" style="background-color:  black; color: green; width: 24%;">Horizontal</th>
    </tr>

    <tr>
      <th></th>
      <th rowspan="2" style="background-color:  black; color: green;">Var. Absoluta</th>
      <th rowspan="2" style="background-color:  black; color: green;">Var. Relativa</th>
    </tr>

</table>
</body>
</html>

4
  • 3
    Es muy mala idea incluir los estilos en línea (en las etiquetas) porque se pierde la flexibilidad que te dan las hojas de estilo. Si no te acuerdas como nombraste cada cosa es porque no usas nombres de clases o id apropiados. Bien por la respuesta, mal por esa sugerencia.
    – Triby
    el 29 ene. 2021 a las 3:47
  • Gracias por la respuesta, y pues lo que dice @Triby si es bastante relevante, igual tendré en cuenta el css que incluiste.
    – DaxTter77
    el 29 ene. 2021 a las 3:49
  • @Triby la verdad si tienes algo de razon en ese sentido, pero a mi personalmente si se me dificulta lo de los nombres, se me hace algo incomodo pero lo tomare en cuenta. gracias! el 29 ene. 2021 a las 5:08
  • @DaxTter77 Claro, yo solo trato de dar ideas. espero te haya servido algo de lo que te puse. suerte el 29 ene. 2021 a las 5:10
0

Aunque personalmente también me decantaría por la respuesta dada inicialmente, me parece que para estos casos podemos ya no depender tanto de cosas como rowspan y darle una oportunidad de uso a flexbox

Me explico:

  • Podemos dejar dentro de la celda donde necesitamos la división un div
  • Dentro de dicho div colocar los 2 textos dentro de etiquetas p
  • Dentro del div mediante flexbox lograremos que ambos párrafos aparezcan uno al lado del otro imitando la apariencia deseada
    • (de hecho para la salida buscada no ocupamos gran cosa de flexbox.)

Propuesta de código:

    <style>
      * {
        color: white;
        padding: 0;
        margin: 0;
      }
      table {
        border-collapse: collapse;
      }
      .encabezado {
        background-color: black;
      }
      .encabezado-celda-division {
        display: flex;
      }
      .encabezado-celda_texto {
        border-right: 1px solid;
      }
      .encabezado-celda-division_texto {
        border: 1px solid;
      }
    </style>
    <table>
      <thead class="encabezado">
        <tr class="encabezado-celda">
          <th class="encabezado-celda_texto">
            Columna 1
          </th>
          <th class="encabezado-celda_texto">
            Columna 2
          </th>
          <th class="encabezado-celda_texto">
            Columna 3
            <div class="encabezado-celda-division">
              <p class="encabezado-celda-division_texto">División 1</p>
              <p class="encabezado-celda-division_texto">División 2</p>
            </div>
          </th>
        </tr>
      </thead>
    </table>

Comentario final:

  • De hecho aplicando este mismo procedimiento de uso de flexbox solo que agregando la propiedad de justify-content con un valor de space-around podemos acomodar los valores de cada renglón para cuando empieces a llenar con valores dicha tabla.

Tu Respuesta

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

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