QY8XWB2528

App.css

@@ -0,0 +1,54 @@
+.App {
+  text-align: center;
+
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.table{
+  margin-top: 2em; 
+  margin-left: 4em;
+  text-align: center;
+  border: 3px solid purple;
+  font-size: 25px;
+  line-height: 2em;
+}
+
+.cap{
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  border: inherit;
+}

App.js

@@ -0,0 +1,32 @@
+import './App.css';
+
+let data=[
+  {name:'Страна',prop1:'18/19',prop2:'19/20',prop3:'20/21',sum:'Сумма'},
+  {name:'Англия',prop1:22.6,prop2:18.5,prop3:24.3,sum:92.3},
+  {name:'Испания',prop1:19.5,prop2:18.9,prop3:19.5,sum:83.9},
+  {name:'Италия',prop1:17.3,prop2:14.9,prop3:16.2,sum:66.9},
+  {name:'Германия',prop1:15.2,prop2:18.7,prop3:15.2,sum:64.9},
+  {name:'Франция',prop1:10.5,prop2:11.6,prop3:7.9,sum:48.0}
+]
+
+let Block=({name="England", prop1='3333', prop2="44444",prop3='5555',sum="99999"})=>
+  <tr>
+    <td>{name}</td>
+     <td>{prop1}</td>
+    <td>{prop2}</td>
+    <td>{prop3}</td>
+    <td>{sum}</td>
+  </tr>
+
+
+let App=()=>
+  <div className="App">
+      <table className='table'>
+          <caption className='cap'>Таблица УЕФА</caption>
+          {data.map(item=><Block {...item} />)}
+      </table>
+    </div>
+
+
+
+export default App;