Ячейка таблицы угловых материалов: Показать первое изображение под содержимым, все в одном столбце чуть ниже

Question

Я создал таблицу материалов с тремя столбцами: заголовок, тело и изображение.Теперь я хотел бы изменить структуру этого, потому что я хочу показать все в одном столбце чуть ниже, но я не знаю, как это сделать.

Это мой текущий код, который отображает каждое значение в новом столбце рядом с другим, а не под другим. Вот мой HTML-файл:

<div class="example-container mat-elevation-z8">

<ng-container matColumnDef="Title">
  <mat-header-cell *matHeaderCellDef> Title </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
</ng-container>

<!-- Age Column -->
<ng-container matColumnDef="Body">
  <mat-header-cell *matHeaderCellDef> Body</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.body}} </mat-cell>

</ng-container>

<!-- Grade Column -->
<ng-container matColumnDef="ImageUrl" >
  <th mat-header-cell *matHeaderCellDef> ImageUrl</th>
  <td mat-cell *matCellDef="let element"> <img [src]="element.imageUrl" width=100% height="400" /> </td>
</ng-container>


<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>