1
Is there any way to colspan for half a column?!
<table border="1">
<tr>
<td> ola </td>
<td> ola </td>
<td> ola </td>
<td> ola </td>
</tr>
<tr>
<td> ola </td>
<td> ola </td>
<td> ola </td>
</tr>
</table
I would like the columns in the second row to cover the whole row and all cells to be the same length!!
As in this example, the top 2 columns are covering the whole table and the separation is in the middle...
2
You can do this with colspan and defining a width according to the number of columns divided by 100%. For example: 3 columns = 33.3%, 4 columns = 25% and so on...
Example of 2 rows of 4 x 3 columns:
<table width="100%" border="1">
<tr>
<td width="25%"> ola </td>
<td width="25%" colspan="3"> ola </td>
<td width="25%" colspan="2"> ola </td>
<td width="25%"> ola </td>
</tr>
<tr>
<td width="33.3%" colspan="2"> ola </td>
<td width="33.3%" colspan="3"> ola </td>
<td width="33.3%" colspan="2"> ola </td>
</tr>
</table>3x2:
<table width="100%" border="1">
<tr>
<td width="33.3%"> ola </td>
<td width="33.3%" colspan="3"> ola </td>
<td width="33.3%"> ola </td>
</tr>
<tr>
<td width="50%" colspan="3"> ola </td>
<td width="50%" colspan="2"> ola </td>
</tr>
</table>5x4:
<table width="100%" border="1">
<tr>
<td width="20%"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%" colspan="3"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%"> ola </td>
</tr>
<tr>
<td width="25%" colspan="2"> ola </td>
<td width="25%" colspan="5"> ola </td>
<td width="25%" colspan="4"> ola </td>
<td width="25%" colspan="2"> ola </td>
</tr>
</table>The logic is a little complicated, but it’s based on the values of colspan summed and in the number of columns. Note that in the row where there are more columns, I do not specify colspan in the first and last, only in the middle. The sum of the colspan + number of columns without colspan of each row must be equal. In the first example, see that adding the value of colspan="3" in the first row + 2 columns without colspan, gives 5. In the second line also gives 5 summing the values of the colspan. These numbers go up as more columns are added.
See another example with 5x3:
<table width="100%" border="1">
<tr>
<td width="20%"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%" colspan="3"> ola </td>
<td width="20%" colspan="4"> ola </td>
<td width="20%"> ola </td>
</tr>
<tr>
<td width="33.3%" colspan="3"> ola </td>
<td width="33.3%" colspan="7"> ola </td>
<td width="33.3%" colspan="3"> ola </td>
</tr>
</table>Note that the logic follows the same: adding the values of the first line, 1+4+3+4+1 = 13. In the second line also: 3+7+3 = 13.
0
Only use colspan = total number of columns
<table border="1">
<tr>
<td> ola </td>
<td> ola </td>
<td> ola </td>
<td> ola </td>
</tr>
<tr>
<td colspan="4"> ola </td>
</tr>
</tablei want 4 elements in the first line and 3 in the second
edited my question, maybe it’s easier to understand what I want with the image
@Droopy in the figure I see 2 cells in the first, a narrow white line in the middle and a line with 3 cells
exact, the white line doesn’t matter, I want to get this result when I use 2 cells in one line and 3 in another
for example if I put 2 cells in one line and 3 in another line the line that has the 2 cells will have an empty space
@Droopy, can’t, makes a table with two lines, and in each row puts a table. The first divides into 4 or 2 cells and the second divides into 3 cells
Browser other questions tagged html html5
You are not signed in. Login or sign up in order to post.
That is exactly what I wanted, thank you very much for the reply, I understood perfectly
– Droopy