I am making some templates to format some tables and what I want is to have this result
As you can see in the last column you have the HORIZONTAL heading and two others start from there, I would like to know how I can achieve that result, I would appreciate it.
This is what I have so far:
STYLES
<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>
TABLE
<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>
Thanks for the collaboration.
look in html there is a property of the th tags that allows them to be combined these properties are colspan and rowspan I'll explain tr is a tag used to create a row th is a tag used to create a column
What I would do to achieve the result you want would be this. First I would change the code that you made and I would do this as a base.
Give them run to see how they look.
and now with the properties that I told you I would do this:
So they fit as you want. And to format it instead of using a css code in the header, I would put everything inside the tags. first I would put a width size to the table as such, for example I used 750px, and for the cells of the table to occupy a specific space I would use width but with percentages. here is an example:
So that it doesn't look so cheap, I would change the background-color of the wacha table:
I know you didn't ask for this but here is how I would do the table... I did it because what you asked is something very basic and I think this code could help you to learn a little more.
As a recommendation I recommend you to put all the css instead of a separate file or in a tag in the head I recommend that you put it inside the tags themselves so it will be easier to modify things and you will not have to remember what you named every thing:
wow:
Although personally I would also prefer the answer given initially, it seems to me that for these cases we can no longer depend so much on things like rowspan and give flexbox a chance to use it
I explain:
div
div
place the 2 texts inside labelsp
div
flexbox we will achieve that both paragraphs appear next to each other imitating the desired appearanceCode suggestion:
Final comment:
justify-content
with a value ofspace-around
we can accommodate the values of each row for when you start filling that table with values.