How to organize the columns in a table

Question

How to organize the columns in a table

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Is there a way to do 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 of the second row to cover the entire row and that all cells have the same length !!

As in this example, the 2 upper columns are covering the whole table and the separation is in the middle ...

html html5

asked by anonymous 30.12.2017 / 16:50

2 answers

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>
 </table

30.12.2017 / 17:08

how to select items in while counter, in php How to display the saved image in the database in my html code

score 1 · Accepted Answer

You can do this with colspan and setting width according to the number of columns dividing 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>

Logic is a bit tricky, but it is based on the values of the% added% and the number of columns. See that in the row where you have more columns, I do not specify colspan in the first and last, only in the middle. The sum of colspan + number of columns with% w / o of% of each line must be equal. In the first example, you see that by adding the value of colspan in the first row + 2 columns without colspan , gives 5. In the second line also gives 5 by adding the values of colspan="3" . 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>

See 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.