I would like to add or divide a row to add information in my table made in HTML, I have the following code with which I have made a table in 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>
What I would like is to add information to the side of the First and Last name column as follows:
But letting the row Puestogo to the end of the table.
Can someone give me some guidance on handling tables in HTML?
Update:
Try what they say in the answer but it makes new go to the end of the line, I would like to adjust it to the middle of the line as it is in the image.
Is there something I need to change in my styles?
If you don't want the bottom line to extend to the end of the table, you have two options:
colspan="2"and removing the bottom borderNote: In the code snippet I left a row for each example of these options.
Just as a suggestion for cleaner, more maintainable code, identify the repeating attributes for each element and create CSS rules in a separate style sheet.
Also, you don't need the tag
<p>, because the rules can be applied directly on the cell.If you're still using the "inline" styles, imagine the hassle of changing the border color; although a good editor or IDE gives you the options for multiple replacement, there is no point in complicating both writing, reading and maintaining the code.
Good day,
What you can do is define at the beginning of your table the number of columns that you are going to use, in the attached example I put 6 columns (Each column is going to use 16.66% of the width of your table
If you want to add more columns you must take into account that the sum of the width of all the columns must be 100%. It is not always necessary to define the columns in the tables, but when you have to join cells it is much easier to do it this way, you can see another similar question for reference
When you want a cell to cover more than one column you can use
colspanfollowed by the number of columns that the cell is going to use, for examplecolspan="2"it indicates that the cell is going to use 2 columnsI leave you an example:
Note: In the "post" row I inserted an empty cell that spans 1 column, but if you want the cell where it says to
{puesto}span 2 columns then just usecolspan="2"in that cell and you can delete the empty cell.If I understand correctly, the thing is quite simple.
The thing is to put the four cells per row if they all have data and in the cells that only have two cells covered, add a third cell that expands to the end (colspan), or make the second cell expand to the end. final (so I put it in the example)
On the other hand, you should NEVER use inline styles, use css sheets. The reason, apart from improving maintenance, is that web usability does not usually like the presence of this type of style.
I personally don't recommend applying cascading styles directly to rows and cells within tables, but if the requirement calls for it to be, then I would do it like this.
I hope it helps you, greetings.
Good, you can try the following way (you can layout with the following Table Tag online tool )