How to add multiple rows in a column on a table using HTML?

Question

Hope you have an amazing day. The table will be contain a list of students. I've make a column named Progress Evaluation for the table. In a column for Progress Evaluation for a specific student, there will be several link in it which is why i want to know how to add multiple rows in a specific column. I figured that maybe it will be easier to insert the links by then.

This is the table that I've created. It connect to the database. I have tried rowspan attribute but i don't get the result that i want or maybe i don't fully understand how to use it.

echo '<table align="center">
<tr><th><b>Matric Number</b></th><th><b>Name</b></th><th><b>Programme</b> 
</th><th><b>Project Title</b></th><th><b>Progress Evaluation</b></th> 
</tr>';

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
echo '<tr><td>' . $row['Matric_Number'] . '</td>
<td>' . $row['Name'] . '</td>
<td>' . $row['Programme'] . '</td>
<td>' . $row['Project_Title'] . '</td>
<td><b>mutiple row in here</b></td>

 </td></tr>';

So yeah,basically i want each column under the Progress evaluation contains 3 rows. Thank you for your time.

Answer 1

I think this is what you need:

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

<table>
  <tr>
    <th>Matric Number</th>
    <th>Name</th>
    <th>Programme</th>
    <th>Project Title</th>
    <th>Progress Evaluation</th> 
  </tr>

  <tr>
    <td rowspan="4">123</td>
    <td rowspan="4">sky</td>
    <td rowspan="4">Student at school</td>
    <td rowspan="4">How to add multiple rows in a column on a table using HTML?</td>
    <td>mutiple</td>
  </tr>

  <tr>
    <td>rows</td>
  </tr>

  <tr>
    <td>in</td>
  </tr>

  <tr>
    <td>here</td>
  </tr>
</table>

and the rowspan number will be the row number in Progress Evaluation.

Answer 2

Assuming I've understood you correctly, you have one of two different issues:

1. Iterating through a PHP array to output repeated, nested HTML:

Use PHP loops to enclose bare HTML sections that you want repeated:

<table>
    <tbody>
    <?php while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) : ?>
        <tr>
            <td><?= $row["Matric_Number"] ?></td>
            <td><?= $row["Name"]          ?></td>
            <td><?= $row["Programme"]     ?></td>
            <td><?= $row["Project_Title"] ?></td>
            <td>
                <?php foreach($row["Progess_Evaluation"] as $sub_row) : ?>
                <div> <?= $sub_row ?> </div>
                <?php endforeach; ?>
            </td>
        </tr>
    <?php endwhile; ?>
    </tbody>
</table>

The <?= $value ?> tags are a shorthand way to write <?php echo $value; ?>.

You can of course use strings with HTML markup embedded inside, but this can become a mess very quickly, especially when many nested tags are involved.

2. Splitting an HTML table cell into separate rows

As @aleck said, you need the rowspan attribute. Unfortunately, this is a little complicated to apply in your case, as it means three <tr>…</tr> rows are needed per "apparent" row.

If you're used to using a spreadsheet application like Excel, it might help to think of rowspan as merging the next cell of a column into the first.

An illustration might help you visualise how rowspan works:

      A      B                 A      B    
  +------+------+          +------+------+ 
1 |  1A  |  1B  |          |      |  1B  | 
  +------+------+        1 |  1A  +------+ 
2 |  2A  |  2B  |          |      |  2B  | 
  +------+------+          +------+------+ 
3 |  3A  |  3B  |        3 |  3A  |  3B  | 
  +------+------+          +------+------+ 
     No rowspan             1A rowspan = 2  


      A      B    
  +------+------+ 
  |      |  1B  | 
  |      +------+ 
1 |  1A  |  2B  | 
  |      +------+ 
  |      |  3B  | 
  +------+------+ 
   1A rowspan = 3

Following the Excel analogy, you need to insert extra rows for every subdivision.

It might be easier to format the last column using block tags (like the <div>…</div> rows I used in my first example), and use CSS to blend it into the table to appear seamless.