I am patching together an app. But the layout looks horrendous. I am no coder or developer by any stretch of the imagination. I'm just looking for some help to help my site not look so bad. This is how the site looks now.

This is the app.js code:

 <div style={{ width: "80%", margin: "0 auto" }}>
  <table>
    <thead>
      <tr>
        <th>Tx Hash</th>
        <th>Tx Height</th>
        <th>Latest Posts/Comments</th>
        <th>New Order Request</th>
      </tr>
    </thead>
    <tbody>
      {transactions.slice(0, 10).map((tx, index) => (
        <tr key={index}>
          <td>{tx.txHash.slice(0, 15)}</td>
          <td>{tx.txHeight}</td>
          <td>{tx.bicoText.slice(0, 300)}</td>
          <td>{tx.newOrderRequest}</td>
          <td>{tx.subNewOrderRequest}</td>
        </tr>
      ))}
    </tbody>
  </table>
  {Object.keys(newOrderRequests).map(key => (
    <div key={key}>
      <h2>{key}</h2>
      <table>
        <thead style={{ textAlign: "center" }}>
          <tr>
            <th>Tx Hash</th>
            <th>Tx Height</th>
            <th>Tx Text</th>
          </tr>
        </thead>
        <tbody>
          {newOrderRequests[key].map((tx, index) => (
            <tr key={index}>
              <td>{tx.txHash.slice(0, 15)}</td>
              <td>{tx.txHeight}</td>
              <td>{tx.bicoText.slice(0, 300)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  ))}
</div>


  );
              }  

export default App;

Any help is appreciated.