Eventos - estrutura inicial

css/eventos.css

@@ -18,8 +18,60 @@ h1 {
 
 
 footer {
-    position: absolute;
+    position: fixed;
     bottom: 50px;
     text-align: center;
     margin-inline: 20px;
-}
+}
+
+.table-content {
+    display: flex;
+    justify-content: center;
+    margin-top: 80px;
+    min-height: 585px;
+  }
+  
+  .table-content table {
+    min-width: 700px;
+  }
+
+  th, tr:nth-child(odd) {
+    background-color: #eee;
+  }
+
+  .table-content table, .table-content th, .table-content td {
+    border-collapse: collapse;
+    border: 1px solid #999;
+    border-inline: none;
+    text-align: left;
+  }
+
+  [colspan] {
+    font-weight: bold;
+    width: 100%;
+    text-align: center;
+    padding-left: 0;
+  }
+
+  .table-content tr {
+    height: 35px;
+  }
+  
+  .caption {
+    display: flex;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 25px;
+    margin-bottom: 10px;
+  }
+
+  @media (max-width: 750px) {
+    .table-content th, .table-content td {
+        padding-inline: 10px;
+    }
+
+    .table-content table {
+        min-width: 0;
+        width: 90vw;
+    }
+  }

css/extincoes.css

@@ -36,19 +36,18 @@ footer {
 
 .table-content table, .table-content th, .table-content td {
   border-collapse: collapse;
-  border: 1px solid black;
+  border: 1px solid #999;
   border-inline: none;
   text-align: center;
-  border-color: #999
 }
 
 .table-content tr {
   height: 35px;
 }
 
-.tr-color {
-  background-color: #eee;  
-} 
+th, tr:nth-child(odd) td {
+  background-color: #eee;
+}
 
 .caption {
   display: flex;

css/parques-naturais.css

@@ -33,19 +33,18 @@
     min-width: 700px;
   }
 
-  .tr-color {
-    background-color: #eee;  
-  } 
-  
+  th, tr:nth-child(odd) {
+    background-color: #eee;
+  }
+
   .table-content table, .table-content th, .table-content td {
     border-collapse: collapse;
-    border: 1px solid black;
+    border: 1px solid #999;
     border-inline: none;
     text-align: left;
-    border-color: #999
   }
 
-  .colspan {
+  [colspan] {
     font-weight: bold;
     width: 100%;
     text-align: center;

paginas/eventos.html

@@ -30,8 +30,56 @@
 
     </nav>   
 
-    <h1>Eventos</h1>
 
+    <div class="table-content">
+      <div>
+        <caption><a class="caption">Eventos</a></caption>
+        <table>
+          <tr>
+            <th>Título</th>
+            <th>Data</th>
+            <th>Capacidade</th>
+            <th>Preço</th>
+            <th>Categoria</th>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+            <td></td>
+          </tr>
+        </table>
+      </div>
+    </div>
     
 
 

paginas/extincoes.html

@@ -35,7 +35,7 @@
       <div>
         <caption><a class="caption">Animais em extinção</a></caption>
         <table>
-          <tr class="tr-color">
+          <tr>
             <th>Animal</th>
             <th>Quantidade</th>
           </tr>
@@ -43,7 +43,7 @@
             <td>Lobo-guará</td>
             <td>23000</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Onça-pintada</td>
             <td>10000</td>
           </tr>
@@ -51,7 +51,7 @@
             <td>Panda-gigante</td>
             <td>2500</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Arara-azul-de-lear</td>
             <td>1200</td>
           </tr>

paginas/parques-naturais.html

@@ -34,7 +34,7 @@
       <div>
         <caption><a class="caption">Parques naturais</a></caption>
         <table>
-          <tr class="tr-color">
+          <tr>
             <th>Nome</th>
             <th>Área (m2)</th>
             <th>Local</th>
@@ -44,7 +44,7 @@
             <td>1.291.000.000</td>
             <td>Piauí</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Parque Estadual de Dois Irmãos</td>
             <td>3.874.000</td>
             <td rowspan="2">Pernambuco</td>
@@ -53,7 +53,7 @@
             <td>Parque Ecológico da Serra Negra</td>
             <td>32.400</td>
           </tr>
-          <tr class="tr-color">
+          <tr>
             <td>Parque Nacional de Ubajara</td>
             <td>5.630.000</td>
             <td>Ceará</td>
@@ -63,7 +63,7 @@
             <td>913.000.000</td>
             <td>Bahia</td>
           </tr>
-          <tr class="colspan tr-color">
+          <tr>
             <td colspan="3">Somatório das áreas: 2.213.536.400 m2</td>
           </tr>
         </table>