CODEWITHSUNDEEP
htmlhtml-table
user3657850
user3657850

Reputation: 552

HTML table half column

I've made a html table and when I finished I noticed I made a mistake by having one row with 5 columns while all the others have 3. Is it possible to fix it by making 2 columns only half a column wide or auto adjust it using only html? I do not want to use colspan because its a pretty 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>

Upvotes: 3

Views: 12675

Answers (3)

cuSK
cuSK

Reputation: 839

Defining colspan might solve your problem.

  • colspan must be specified based on the row with largest column.
  • It is actually used to extend 2 or more columns as per your wish.
  • It also hugely depends on 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 must solve your issue.

EDIT: Since you need to span it without the use of colspan, you can use 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 goes little bit tricky. For this example it is easy to implement using above snippet. But for your exact solution, since you need to use it for rows with 5 columns.

MERGE 5 columns into 1 and span it to 3 columns:(as implemented 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>

Upvotes: 2

gfullam
gfullam

Reputation: 12085

Nested table

If you absolutely don't want to use colspan, you could 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>

Upvotes: 3

BastienSander
BastienSander

Reputation: 1848

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

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

Upvotes: 0

Related Questions