html table with span issues

MrKenneth
May 10, 2024
92 views
1 vote
2 Answers

I am trying to create a table with colspan and rowspan inside.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

.top {
background-color: yellow;
}
.left {
background-color: blue;
}

.right {
background-color: green;
}
</style>
</head>
<body>

<h2>HTML Table</h2>
 <table class="">
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td colspan="5"></td>
            <td colspan="2" rowspan="2"></td>
            <td colspan="3" rowspan="2"></td>
        </tr>
        <tr>
            <td class="top" colspan="5"></td>
        </tr>
        <tr>
            <td rowspan="5"></td>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="2"></td>
            <td class="left" ></td>
            <td class="right" colspan="7"></td>
        </tr>
        <tr>
            <td rowspan="1"></td>
            <td colspan="10"></td>
        </tr>
        <tr>
            <td rowspan="1"></td>
            <td colspan="10"></td>
        </tr>
    </tbody>
</table>

</body>
</html>

I want to make the last blue/green to be the same with the first 4 rows. But when I change it to use the same colspan values, below is the result.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

.top {
background-color: yellow;
}
.left {
background-color: blue;
}

.right {
background-color: green;
}
</style>
</head>
<body>

<h2>HTML Table</h2>
 <table class="">
    <tbody>
        <tr>
            <td rowspan="2"></td>
            <td colspan="5"></td>
            <td colspan="2" rowspan="2"></td>
            <td colspan="3" rowspan="2"></td>
        </tr>
        <tr>
            <td class="top" colspan="5"></td>
        </tr>
        <tr>
            <td rowspan="5"></td>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td rowspan="1"></td>
            <td colspan="10"></td>
        </tr>
        <tr>
            <td rowspan="1"></td>
            <td colspan="10"></td>
        </tr>
    </tbody>
</table>

</body>
</html>

It rearranges the table’s width. I want to keep the initial width based on colspan and rowspan.

I guess the issue lies with the colspan/rowspan values added but I don’t know where.

Tags: html html-table

Answers

Add table-layout: fixed; to table css like below.

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

Also, your the second code is correct. Your table column has no data. So, the column has less content or no content, which means width is primarily influenced by colspan. If a cell has colspan = 5 and it has no much content then it may appear to have the same width as multiple individual columns.

When I initially set 11 columns like below then you can get the corrected table.

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

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

.top {
background-color: yellow;
}
.left {
background-color: blue;
}

.right {
background-color: green;
}
</style>
</head>
<body>

<h2>HTML Table</h2>
 <table class="">
    <tbody>
        <tr>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
            <td colspan="1"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td colspan="5"></td>
            <td colspan="2" rowspan="2"></td>
            <td colspan="3" rowspan="2"></td>
        </tr>
        <tr>
            <td class="top" colspan="5"></td>
        </tr>
        <tr>
            <td rowspan="5"></td>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td class="left" colspan="1"></td>
            <td class="left" colspan="1"></td>
            <td class="right" colspan="8"></td>
        </tr>
        <tr>
            <td rowspan="1"></td>
            <td colspan="10"></td>
        </tr>
        <tr>
            <td rowspan="1"></td>
            <td colspan="10"></td>
        </tr>
    </tbody>
</table>

</body>
</html>

But when we add content it automatically changes the layout. Therefore add CSS to the table and fix the table for not changing layout when adding content.

Following the layout you shown in your first attempt:

In the picture I highlighted the index of the minimum amount of columns you need to address to have that structure. You don’t need any more than that.

And this is the html to achieve that exact layout where inside each cell is written where each one is spanning across:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid black;
  text-align: center;
  padding: 8px;
}

.top {
  background-color: yellow;
}

.left {
  background-color: blue;
}

.right {
  background-color: green;
}

<table>
  <tbody>

    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>

    <tr>
      <td rowspan="2">1</td>
      <td colspan="3">2-4</td>
      <td rowspan="2">5</td>
      <td rowspan="2">6</td>
    </tr>
    
    <tr>
      <td class="top" colspan="3">2-4</td>
    </tr>
    
    <tr>
      <td rowspan="5">1</td>
      <td class="left">2</td>
      <td class="left">3</td>
      <td class="right" colspan="3">4-6</td>
    </tr>
    
    <tr>
      <td class="left">2</td>
      <td class="left">3</td>
      <td class="right" colspan="3">4-6</td>
    </tr>
    
    <tr>
      <td class="left">2</td>
      <td class="left">3</td>
      <td class="right" colspan="3">4-6</td>
    </tr>

    <tr>
      <td class="left">2</td>
      <td class="left">3</td>
      <td class="right" colspan="3">4-6</td>
    </tr>

    <tr>
      <td class="left">2</td>
      <td class="left">3</td>
      <td class="right" colspan="3">4-6</td>
    </tr>

    <tr>
      <td>1</td>
      <td colspan="5">2-6</td>
    </tr>

    <tr>
      <td>1</td>
      <td colspan="5">2-6</td>
    </tr>

  </tbody>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.