HTML Table different number of columns in different rows

Html

Html Problem Overview


Like in Excel sheet can I have

  1. 2 columns in 1st row
  2. 1 long column in the 2nd row

is this possible in html ?

Html Solutions


Solution 1 - Html

On the realisation that you're unfamiliar with colspan, I presumed you're also unfamiliar with rowspan, so I thought I'd throw that in for free.

One important point to note, when using rowspan: the following tr elements must contain fewer td elements, because of the cells using rowspan in the previous row (or previous rows).

table {
  border: 1px solid #000;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #000;
}

<table>
  <thead>
    <tr>
      <th colspan="2">Column one and two</th>
      <th>Column three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" colspan="2">A large cell</td>
      <td>a smaller cell</td>
    </tr>
    <tr>
      <!-- note that this row only has _one_ td, since the preceding row
                     takes up some of this row -->
      <td>Another small cell</td>
    </tr>
  </tbody>
</table>

Solution 2 - Html

Colspan:

<table>
   <tr>
      <td> Row 1 Col 1</td>
      <td> Row 1 Col 2</td>
</tr>
<tr>
      <td colspan=2> Row 2 Long Col</td>
</tr>
</table>

Solution 3 - Html

yes, simply use colspan.

Solution 4 - Html

If you need different column width, do this:

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td colspan="9">
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </td>
</tr>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHarsha M VView Question on Stackoverflow
Solution 1 - HtmlDavid ThomasView Answer on Stackoverflow
Solution 2 - HtmlNivasView Answer on Stackoverflow
Solution 3 - HtmloeziView Answer on Stackoverflow
Solution 4 - HtmlВасилийView Answer on Stackoverflow