Try something like this. I used the rowspan attribute on the first element row on the table to make the Self column common. For example in this example since the array is of length 2. the rowspan will be 2 therefore the first column will stay common to all rows of the table

<table>
  <tr>
    <th></th>
    <th>Nature of liability</th>
    <th>Creditor</th>
  </tr>
      {SelfData.map((data,i)=>{
       return <tr>
         {i===0 && <td rowSpan={SelfData.length}>Self</td>}
         <td>{data[0]}</td>
         <td>{data[1]}</td>
       </tr> 
     })}
</table>

codesandbox

please try this way:

SelfData = [
  ["Mortgage on Marrickville investment property (with C. Tebbutt)", "Commonwealth Bank"],
  ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"],
];
  return (
    <table>
      <tr>
        <th>Nature of liability</th>
        <th>Creditor</th>
      </tr>
      {SelfData?.map((items, index) => {
        return (
          <tr>
            <td>SelfSelf</td>
            {items?.map((subItems, sIndex) => {
              return <td>{subItems}</td>;
            })}
          </tr>
        );
      })}
    </table>

You can use colspan property in td elements to make the first column merge and the vertical-align CSS property to align the text to the top of the cell.

This would also work

const SelfData = [
  [
    "Mortgage on Marrickville investment property (with C. Tebbutt)",
    "Commonwealth Bank"
  ],
  ["Mortgage on Dulwich Hill investment property", "Commonwealth Bank"]
];

function App() {
  return (
    <table>
      <tr>
        <th />
        <th style={{ textAlign: "left" }}>Nature of liability</th>
        <th style={{ textAlign: "left" }}>Creditor</th>
      </tr>
      {SelfData.map((data, i) => (
        <tr>
          {i === 0 && (
            <td rowspan="2" style={{ verticalAlign: "top" }}>
              Self
            </td>
          )}
          {data.map((d) => (
            <td>{d}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"))

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>