¿Por qué colspan no es un atributo nativo conocido en Angular 2?

Para entenderlo, necesitamos tener un conocimiento claro y profundo entre el Modelo de objetos de documento (DOM) y el Lenguaje de marcado de hipertexto (HTML).
Básicamente, DOM es un modelo de objetos y es una representación de árbol lógico del documento, mientras que HTML es un lenguaje de marcado que usamos para crear páginas web.
Todos los atributos HTML tienen una asignación uno a uno a las propiedades de los objetos DOM.

Ejemplo: Nombre

<label for="fname">First Name </label>
<input type="text" id="fname" name="fname" disabled >

Entonces, el ejemplo anterior contiene dos etiquetas etiqueta y entrada. Como podemos observar, hay un atributo definido dentro de la etiqueta de entrada que está «deshabilitado».
De manera similar, si habla de las propiedades DOM, disabled también está presente dentro del objeto de entrada.
Pero son casos donde algunos atributos de las etiquetas HTML no están disponibles dentro del DOM. 
Ejemplo: colspán. Al igual que colspan, cuando intente usarlos para vincular atributos en Angular 2+, obtendrá un error que dice «no se puede vincular a colspan ya que no es una propiedad conocida de ‘td'».
De manera similar, tenemos algunas propiedades que están definidas en DOM pero no están presentes en HTML.

Ejemplo:

<h2 [textContent]="title"></h1>

Solución:
para usarlos para vincular atributos, debe usar la siguiente sintaxis «[attr.colspan]».

import {Component} from '@angular/core';
  
  
@Component({
  
selector:'app-colspan',
template:
`
<h4> Colspan Usage </h4>
<table>
  <tr>
   <td [attr.colspan]="colSpan">First Item </td>
  </tr>
  <tr>
   <td>Second Item</td>
   <td>Third Item </td>
  </tr>
</table>
`,
styles:[`
  
table, tr, td{
border: 1px solid black;
border-collapse:collapse;
}
`]
})
  
  
export class ColSpanComponent{
  
colSpan="2"
  
}

Producción: