css - html中的多表对齐

Question

您好，我是 HTML 和 CSS 的初学者。我创建了一个带有 Power 描述的多表标签，但我无法从 Level1 对齐 level2 和 level3 表标签。另一个查询。我如何创建另一组将处于无功率状态的关卡？但我无法获得想要的结果。

其实需要的是横向创建8组Level。从 L1-Sample1 到 L3-Good 的单个盒子的描述名称是固定的。

请看下面我的初始 HTML 代码。

    <tr>
      <div border: border= "2"; >
           With Power
      </div>  
    </tr> 
    <!--level1 -->
    <table border: border="1"; cellpadding: "1" >
    		<tr>
    			<td style="Background: Gray";>Level1</td>
    		</tr>
    		<tr>
    			<td>L1-Sample1</td>
          <td>value</td>
          <td>value</td>
    		</tr>
    		<tr>
    			<td>L1-sample2</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	
     		<tr>
    			<td>L1-sample3</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	
     		<tr>
    			<td>L1-sample4</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	 
    </table>
    <!---level2 -->
    <table border: border="1"; cellpadding: "1" >
    		<tr>
    			<td style="background: green";
                     >Level2</td>
    		</tr>
    		<tr>
    			<td>L2-sample1</td>
          <td>value</td>
          <td>value</td>
    		</tr>
    		<tr>
    			<td>L2-sample2</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	
     		<tr>
    			<td>L2-sample3</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	
     		<tr>
    			<td>L2-sample4</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	 
     		<tr>
    		<td>L2-sample5</td>
    			<td>value</td>
          <td>value</td>
    		</tr>
      		<td>L2-sample6</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	   
    		<td>L2-sample7</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	   
    </table>
    
    <!--Level3---->
    <table border: border="1"; cellpadding: "1" >
    		<tr>
    			<td style="background: Blue";
                     >Level3</td>
    		</tr>
    		<tr>
    			<td>L3-Good</td>
          <td>value</td>
          <td>value</td>
    		</tr>
    		<tr>
    			<td>L3-Bad</td>
    			<td>value</td>
          <td>value</td>
    		</tr>	
       
    </table>
    
    <!--create another sets of Level under no Power-->
    <table>
    <tr>
      <div border: border= "2"; >
           No Power
      </div>  
    </tr> 
    </table>

请参阅下面的示例图片。 Desired Result

Answer 1

这会起作用，应用这个 CSS:

table {
    border-collapse: collapse;
    width: 100%;
} 

table tr td {
    width: 120px;
    padding: 6px;
}