Aligning columns on HTML tables

user1781500
December 5, 2023
247 views
0 votes
2 Answers

I’m having to build out tables that have parent / child relationships. Here is an example.

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Apple
    </th>
    <th style="background-color:#ddd;" colspan="1">
      Taste: Very sweet and Delicious
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>2000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>3000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>
<br><br><br>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Orange
    </th>
    <th style="background-color:#ddd;" colspan="1">
      Taste: Sweet and acidic
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>

If you view this you can see that the "Amount" column is pushed way over because the "Taste" header is long and pushes it over. Is there a way to make the lowest level headers (Type,Amount ,Color,Other,Other2) evenly spaced out? Or is there a better way to represent parent/child records with HTML tables?

Answers

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Apple
    </th>
    <th style="background-color:#ddd;" colspan="1">
      Taste: Very sweet and Delicious
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>2000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>3000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>
<br><br><br>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Orange
    </th>
    <th style="background-color:#ddd;" colspan="1">
      Taste: Sweet and acidic
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>

I think you were looking for this! Change colspan="1" to colspan="2" for "Taste".

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Apple
    </th>
    <th style="background-color:#ddd;" colspan="2">
      Taste: Very sweet and Delicious
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>2000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>3000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>
<br><br><br>
<table class="table">
  <tr>
    <th style="background-color:#ddd;" colspan="1">
      Fruit: Orange
    </th>
    <th style="background-color:#ddd;" colspan="2">
      Taste: Sweet and acidic
    </th>
    <th style="background-color:#ddd;" colspan="5">
      Shape: Round
    </th>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 01
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3423
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Granny Smith</td>
    <td>1000</td>
    <td>Green</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Fuji</td>
    <td>2000</td>
    <td>Red</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <th colspan="6" style="padding-left:60px;background-color:#eee;">
      Batch 02
    </th>
    <th colspan="1" style="padding-left:60px;background-color:#eee;">
      Code: #3424
    </th>
  </tr>
  <tr>
    <th colspan="1"></th>
    <th colspan="1">Type</th>
    <th colspan="1">Amount</th>
    <th colspan="1">Color</th>
    <th colspan="1">Other</th>
    <th colspan="3">Other2</th>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
  <tr>
    <td th colspan="1"></td>
    <td>Orange 1</td>
    <td>Orange 2</td>
    <td>Orange</td>
    <td>other info</td>
    <td>other info2</td>
  </tr>
</table>

Please signup or login to give your own answer.

Click here to cancel reply.