Clever Geek Handbook

HTML table column

I made an HTML table and when I was done I noticed that I made the mistake of having one row with 5 columns while everyone else has 3. Is it possible to fix this by making 2 columns only half a column wide, or automatically customize it using only HTML? I don't want to use colspan because it is a rather large table.

<table border="1">
  <tr>
    <td>something</td>
  </tr>
  <tr>
    <td>these should be</td>
    <td>as long as the others</td>
  </tr>
  <tr>
    <td> something </td>
  </tr>
</table>
Run codeHide result


+3


source to share


3 answers


Nested table

If you absolutely don't want to use colspan

, you can try nesting a table:



<table border="1">
  <tr>
    <td>something</td>
  </tr>
  <tr>
    <td>
        <table border="1">
             <tr>
                 <td>these should be</td>
                 <td>as long as the others</td>
             </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td> something </td>
  </tr>
</table>
Run codeHide result


+2


source


Definition can solve your problem. colspan

  • colspan

    must be specified based on the row with the largest column.
  • It is actually used to expand 2 or more columns as you wish.
  • It also depends heavily on the underlying columns.
<table border="1">
    <tr>
        <td colspan="2">Something</td>
    </tr>
    <tr>
        <td>these should be<td>
        <td>as long as the others</td>
    </tr>
    <tr>
        <td colspan="2">Something</td>
    </tr>
</table>

This should fix your problem.

EDIT . Since you need to skip it without using it colspan

, you can use a nested table.



<table border="1">
    <tr>
        <td colspan="2">Something</td>
    </tr>
    <tr>
        <td>
            <table border="0"> <!-- if you want border set it to 1 -->
                <tr>
                    <td>this should be</td>
                    <td>as long as the others</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">Something</td>
    </tr>
</table>

The above method is a little more complicated. In this example, it is easy to implement it using the snippet above. But for your exact solution, since you need to use it for 5 column rows.

MERGE 5 columns in 1 and span it up to 3 columns: (as shown below)

<tr>
    <td colspan="3">
        <table border="0"> <!-- if you want border set it to 1 -->
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
                <td>col 4</td>
                <td>col 5</td>
            </tr>
        </table>
    </td>
</tr>
+2


source 


<table border="1">
  <tr>
    <td colspan="2">something</td>
  </tr>
  <tr>
    <td>these should be</td>
<td>as long as the others</td>
  </tr>
  <tr>
    <td colspan="2"> something </td>
  </tr>
</table>

see colspan definition here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

0


source






More articles:


All Articles