Html Question posted in
Some basic documentation can be found here.

html table multi layer colspan

I understood that this might have been answered before but I am unable to wrap my head around how to create a multi layered colspan in html table

I have this html table from w3schools, however I want to create a colspan of 2 in the Data 2 and Data 5

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="3">Head1</th>
    <th>Head2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <th colspan="2">
      <tr>
        <td>Data 2a</td>
        <td>Data 2b</td>
      </tr>
    </th>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <th colspan="2">
      <tr>
        <td>Data 5a</td>
        <td>Data 5b</td>
      </tr>
    </th>
    <td>Data 6</td>
  </tr>
</table>
</body>
</html>

However, colspan is not colspanning. I know my approach for this problem is wrong. How should I proceed with this?

My expected output: enter image description here

Note: this is just a simplified version of the current table on the project that I am working on.

Tags:

2

Answers


  1. 0 
    <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th colspan="3">Head1</th>
    <th>Head2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td colspan="2"> <!-- colspan for Data 2 -->
      <table style="width:100%"> <!-- Nested table for multi-layered colspan -->
        <tr>
          <td>Data 2a</td>
          <td>Data 2b</td>
        </tr>
      </table>
    </td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td colspan="2"> <!-- colspan for Data 5 -->
      <table style="width:100%"> <!-- Nested table for multi-layered colspan -->
        <tr>
          <td>Data 5a</td>
          <td>Data 5b</td>
        </tr>
      </table>
    </td>
    <td>Data 6</td>
  </tr>
</table>

</body>
</html>
    • Each cell that requires a colspan is enclosed within a element with the colspan attribute set to the desired value.
    • Inside these cells, a nested table is used to create the multi-layered colspan effect.
    • The nested table contains the rows and cells that need to be grouped together under the colspan.

    This structure should achieve the expected output where Data 2 and Data 5 span across two columns each.

    Login or Signup to reply.
  2. 0

    Try this. Add TR as per your need.

    table {
            border-collapse: collapse;
        }
        td, th {
            border: 1px solid black;
            padding: 8px;
        }
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-layered Colspan</title>
</head>
<body>
    <table>
        <tr>
            <td colspan="2">Cell 1</td>
            <td colspan="2">Cell 2</td>
        </tr>
        <tr>
            <td colspan="2">
                <table>
                    <tr>
                        <td>Sub Cell 1</td>
                        <td>Sub Cell 2</td>
                    </tr>
                </table>
            </td>
            <td colspan="2">Cell 3</td>
        </tr>
    </table>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search