Con javascript podrías crearlo, te dejo a continuación la función que cree documentado en cada línea para que puedas entenderlo:  

    // función para obtener las columnas en un objeto
    function getRows(json, index) {
      var _index = index | 0;
      var row = [];
      
      // recorro el json por key
      for (key in json) {
        // agrego los textos correspondientes
        row.push({
          param: key,
          type: typeof json[key],
          example: typeof json[key] !== 'object' ? json[key] : '',
          // esto es para saber la posición de los td
          _index: _index
        });
    
        // si es un objeto entonces lo recorro
        if (typeof json[key] === "object") {
          return row.concat(getRows(json[key], _index + 1));
        }
      }
      return row;
    }


Y acá te dejo el código completo para que puedas visualizarlo.


<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-js -->

    // función para obtener las columnas en un objeto
    function getRows(json, index) {
      var _index = index | 0;
      var row = [];
      
      // recorro el json por key
      for (key in json) {
        // agrego los textos correspondientes
        row.push({
          param: key,
          type: typeof json[key],
          example: typeof json[key] !== 'object' ? json[key] : '',
          // esto es para saber la posición de los td
          _index: _index
        });

        // si es un objeto entonces lo recorro
        if (typeof json[key] === "object") {
          return row.concat(getRows(json[key], _index + 1));
        }
      }
      return row;
    }

    var json = {
      Persona: {
        nombre: "Juan",
        edad: 28,
        Residencia: {
          calle: "example",
          numero: "0123"
        }
      }
    };
    var table = document.querySelector('table');
    var rows = getRows(json);

    // armo los tr y td para la tabla

    // armo el header de la tabla
    var tr = document.createElement('tr');
    var tdLength = rows[rows.length - 1]._index;
    for (var i = 0; i <= tdLength; i++) {
      var th = document.createElement('th');
      var text = document.createTextNode(rows[i]._index === 0 ? 'Parametro' : '');
      th.appendChild(text);
      tr.appendChild(th);
    }
    var thTipo = document.createElement('th');
    thTipo.appendChild(document.createTextNode('Tipo'));
    tr.appendChild(thTipo);

    var thExample = document.createElement('th');
    thExample.appendChild(document.createTextNode('Ejemplo'));
    tr.appendChild(thExample);
    table.appendChild(tr);

    // recorro todos las columnas del objeto
    for (var i = 0; i < rows.length; i++) {
      var tr = document.createElement('tr');
      
      for (var j = 0; j <= tdLength; j++) {
        var td = document.createElement('td');
        var text = document.createTextNode(rows[i]._index === j ? rows[i].param : '');
        td.appendChild(text);
        tr.appendChild(td);
      }
      
      var tdTipo = document.createElement('td');
      tdTipo.appendChild(document.createTextNode(rows[i].type));
      tr.appendChild(tdTipo);
      
      var tdExample = document.createElement('td');
      tdExample.appendChild(document.createTextNode(rows[i].example));
      tr.appendChild(tdExample);
      
      table.appendChild(tr);
    }

<!-- language: lang-css -->

    table {
      border-collapse: collapse;
    }

    tr {
      padding: 0;
      margin: 0;
    }

    td, th {
      border: 1px solid #000;
      padding: 2px 5px;
    }

    th {
      font-size: 13px;
      font-family: tahoma;
      text-align: left;
    }

    tr td {
      font-family: monospace;
      font-size: 13px;
    }

<!-- language: lang-html -->

    <div id="container">
      <table></table>
    </div>

<!-- end snippet -->


También lo dejé en [codepen][1] para que puedas cambiar el json y probarlo.


  [1]: https://codepen.io/kleith/pen/bMzYea?editors=1010