css - 在 HTML 中对齐表格

Question

我有一个 HTML 页面。这就是我想要的样子 desired page layout这就是我到目前为止所得到的。 enter image description here

它在 SharePoint 中，我想使用内联 CSS。下面的 HTML，欢迎任何建议。

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-     style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
 </style>
<table class="tg" align="left" table border="1" style="padding-right:   10px;">

    <h1>Devices</h1>
    <div id="devices">
    </div>
</td>

<table class="tg">
<//table align="center">
  <tr>
<    td class="tg-yw4l">
        <h1>Device Details</h1>
    <div id="devicedetails">
    </div>
</td>
<td class="tg-yw4l">
<h1>Specfication </h1> 
    <div id="deviceoverview">
     <div id="devicekind">   
    </div>

</table>
<p>  </p>
<table class="tg">
  <tr>
    <td class="tg-yw4l">
        <h1>Known Issues</h1>
    <div id="knowntitle">
        <div id="knownsystemissues">

    </div>
</td> 
</tr>
</table>

<table class="tg" align="center">
  <tr>
   <td class="tg-yw4l" align="center">

      <h1>Accessories</h1>
    <div id="deviceacc">


</td>

<table class="tg" align="left" width="50%">
      <tr>
<td class="tg-yw4l">
    <h1>Typical Usage</h1>

    <div id="deviceuse">
    </div>
</td>
<//td class="tg-yw4l">

    <div id=" ">



    </div>

Answer 1

<style>
  td {
    padding: 2rem;
    border: 1px solid black;
  }
</style>
<table>
  <tr>
    <td rowspan="3">Devices</td>
    <td>Devise Details</td>
    <td>Specification</td>
  </tr>
  <tr>
    <td>Known Issues</td>
    <td>Accessories</td>
  </tr>
  <tr>
    <td colspan="2">Typical Usage</td>
  </tr>
</table>