Табличный и блочный типы верстки

Задание:

Есть макет:

Необходимо сверстать html-документ согласно вышеприведенному макету с использованием табличного и блочного типов верстки.

Табличная верстка:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Табличная верстка html-документа</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <table>
      <tr>
       <td colspan=3>100%</td>
      </tr>
      <tr>
       <td colspan=2>50%</td>
       <td>50%</td>
      </tr>
      <tr>
       <td>30%</td>
       <td colspan=2>70%</td>
      </tr>
     </table>
    </body>
   
   </html>

Файл styles.css:

   body						{ margin: 0; }
   
   table					{ width: 100%; padding: 0; margin: 0; border-collapse: collapse; }
   td						{ width: 100%; padding: 20px; color: #ffffff; text-align: center; }
   
   tr:nth-of-type(1) > td:nth-of-type(1)		{ background-color: #ff8855; }
   tr:nth-of-type(2) > td:nth-of-type(1)		{ width: 50%; background-color: #008855; }
   tr:nth-of-type(2) > td:nth-of-type(2)		{ width: 50%; background-color: #003388; }
   tr:nth-of-type(3) > td:nth-of-type(1)		{ width: 30%; background-color: #000055; }
   tr:nth-of-type(3) > td:nth-of-type(2)		{ width: 70%; background-color: #ff00ff; }

Результат:

Блочная верстка:

Файл index.html:

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Блочная верстка html-документа</title>
     <link rel="stylesheet" href="styles.css">
    </head>
   
    <body>
     <div>100%</div>
     <div>50%</div>
     <div>50%</div>
     <div>30%</div>
     <div>70%</div>
    </body>
   
   </html>

Файл styles.css:

   body				{ margin: 0; }
   
   div				{ float: left; box-sizing: border-box; padding: 20px; text-align: center; color: #ffffff; }
   
   div:nth-of-type(1)		{ width: 100%; background-color: #ff8855; }
   div:nth-of-type(2)		{ width: 50%; background-color: #008855; }
   div:nth-of-type(3)		{ width: 50%; background-color: #003388; }
   div:nth-of-type(4)		{ width: 30%; background-color: #000055; }
   div:nth-of-type(5)		{ width: 70%; background-color: #ff00ff; }