Align columns to 50-50 in second row.

Question

For example if I have 3 columns at first row how can the columns of the second row share the same space 50-50?

Answer 1

First, you need to have same count of columns in each row...

Anyway, you can add virtual columns and span cells verticaly and/or horizontaly, so your problem can be solved by something like:

<table>
<tr>
<td style="width: 33.3%;"></td>
<td style="width: 33.4%;" colspan="2"></td>
<!-- <td></td> spanned cells must be retrieved: commented here for teaching purpose ;) -->
<td style="width: 33.3%;"></td>
</tr>
<tr>
<td style="width: 50%;" colspan="2"></td>
<!-- <td></td> -->
<td style="width: 50%;" colspan="2"></td>
<!-- <td></td> -->
</tr>
</table>

However, good practice is to not use <table> element for templating purpose, but follow the official semantical recommandation of Html5 and only use it to display related data at 'table'... For template/layout purpose you have to use the Css 'display' property with table family values ('table', 'table-row', 'table-cell'... and so on) applied on best suited semantical html element related to the content targeted. Unfortunally, Css doesn't provide actually property to imitate the 'colspan' and 'rowspan' html attributes (wich are only allowed for <td> elements)... So you have to workaround with other elements and css properties as 'float', 'position', 'flex'... or whatever else (powerfull of today's css is widely sufficient to avoid table layouts).

Else, another way to solve your problem with <table>, would be to build 2 independent table... but the rows will not be related, and should be independently auto-resized depending on their content if you doesn't provide fixed sizes for all elements (table and cells), and it will be better to use the 'table-layout:fixed;' css property/value on the <table>s elements ;)

Answer 2

@visph Very helpful, thanks! I just started learning html today so I guess I still have some things to learn...