How to Use Colspan and Rowspan in HTML Tables

How do you use colspan and rowspan in HTML tables?

I'd suggest:

table {    empty-cells: show;    border: 1px solid #000;}
table td,table th {    min-width: 2em;    min-height: 2em;    border: 1px solid #000;}

<table>    <thead>        <tr>            <th rowspan="2"></th>            <th colspan="4"> </th>        </tr>        <tr>            <th>I</th>            <th>II</th>            <th>III</th>            <th>IIII</th>        </tr>    </thead>    <tbody>        <tr>            <td></td>            <td>1</td>            <td>2</td>            <td>3</td>            <td>4</td>         </tr>    </tbody></table>

Tables, rowspan and colspan

You need to add colspan for the last cell in the header and the last cell in the first row of the table body otherwise column sum will be only 3 for them(based on colspan).

<!DOCTYPE html><html>
<head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <style>    table,    td,    th {      border: 1px solid #666;      border-collapse: collapse;    }  </style>  <title>Assignment 4</title></head>
<body>  <table>    <tr>      <th colspan="2">Hi</th>      <th colspan="2">Hi</th>    </tr>    <tr>      <td>Hi</td>      <td>Hi</td>      <td colspan="2">hi</td>    </tr>    <tr>      <td>Hi</td>      <td>Hi</td>      <td>hi</td>      <td>hi</td>    </tr>  </table>

</body>
</html>

Using colspan and rowspan in same cell in HTML table

No you cannot implement this with table cells. However, A similar layout can be displayed using css styles as shown in this fiddle.

html

<table border="2">
    <caption style="border: 1px dotted;">Table 1</caption>
    <tr>
        <td id="r1c1" colspan="2">r1c1 & r1c2</td>
    </tr>
    <tr>
        <td>r2c1</td>
        <td id="r2c2" rowspan="2">r2c2</td>
    </tr>
</table>

css

#r1c1 {
border: none !important;
}

#r2c2 {
border: none !important;
}

You can create a similar L shape using div tags by applying similar css styles as shown in this fiddle. Also you can refer this link to find css styles for creating various shapes.

Why is colspan and rowspan not formatting correctly in this table?

You need to add a final row that actually contains five cells for the behaviour of colspan="2" to be visible.

Then add a width to th and td to maintain the correct styles, and you can hide the empty row to match your design.

table, th, td  {
  border: 1px solid black;
  border-collapse: collapse;
}

.title {
  padding: 10px;
}

th, td {
  width: 20%;
}

<h1>Table</h1>

<table>
  <tr>
    <th colspan="4" class="title">A common header for three subheads</th>
    <th rowspan="2">Header 3</th>
  </tr>
  <tr>
    <th>Header 1</th>
    <th colspan="3">Header 2</th>
  </tr>
  <tr>
    <th>Thing A</th>
    <td colspan="2">dataA1</td>
    <td>dataA2</td>
    <td>dataA3</td>
  </tr>
  <tr>
    <th>Thing B</th>
    <td colspan="2">dataB1</td>
    <td>dataB2</td>
    <td>dataC3</td>
  </tr>
  <tr>
    <th>Thing C</th>
    <td colspan="2">dataC1</td>
    <td>dataC2</td>
    <td>dataC3</td>
  </tr>
  <tr style="visibility: hidden;" aria-hidden="true">
    <th></th><td></td><td></td><td></td><td></td>
  </tr>
</table>

Align table using rowspan and colspan

You should put the first set of cells with 3, 4, 5 after the td with the row+colspan.

And omit the empty cells from the last row.

Result:

table,th,td {  border: 1px solid black;  border-collapse: collapse;}th,td {  padding: 5px;  text-align: left;}

<table style="width:50%">  <tr>    <td width="20%" height="75px">1</td>    <td colspan="4" height="75px">2</td>  </tr>  <tr>    <td rowspan="3" colspan="2">a</td>    <td width="20%">3</td>    <td width="20%">4</td>    <td width="20%">5</td>  </tr>  <tr>    <td>3</td>    <td>4</td>    <td>5</td>  </tr>  <tr>    <td>3</td>    <td>4</td>    <td>5</td>  </tr></table>

Table in a table with rowspan and colspan

See the fiddle

Here i have used only HTML and no CSS

Some part in the HTML is as follows

<tr>
    <td>APHU7031756
        <br/>SEAL
        <br/>Container size
        <br/>
    </td>
    <td rowspan="4">4</td>
    <td>2012 NISSAN VERSA
        <br/>2012 TOYOTA CAMRY
        <br/>2014 TOYOTA CAMRY
        <br/>2014 KIA CAMRY</td>
    <td>1237 Kg
        <br/>1295 Kg
        <br/>1295 Kg
        <br/>1295 Kg</td>
    <td>$2799
        <br/>$1114
        <br/>$1114
        <br/>$1114</td>
</tr>