Should I use "<table mat table ... " or "<mat-table ..."

Question

The title already says it, which one should I use and is there / what is the difference between having

<table mat table [dataSource]="items" ...

or

<mat table [dataSource]="items" ...

in my HTML markup?

On a cursory glance they both work fine, but I assume there must be a difference...

EDIT: I'm specifically talking about resizeable columns, like in this example: https://stackblitz.com/edit/angular-rtfc5v?file=src%2Fapp%2Fapp.component.html

If you switch the

Answer 1

Option 1 Stackblitz: <mat-table>: When you use as an element it uses CSS flex-box properties to align your data/table so when you have very long text it will not resize automatically unless specified otherwise. Note using this option you have to compromise on rowspan and colspan such as if the need arises you can't span your rows/cols

Option 2 Stackblitz: table[mat-table]: When you use as an attribute to html table the td takes care of auto resizing its content based on the cell in turn based to the column. So the whole column gets the width

The modern approach would be to use the Option-1 CSS flex-box approach, but if you have very long content in cell you can specify the column width to a large number, but if you don't want to go to a lot of hassle you can use it with Option-2 native html table/tr/td

Here is the source code of Angular material table

Thanks to @joyBlanks