martes, 14 de diciembre de 2021

Solución CSS11

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
table {
    margin:auto;
    }

.table1, th, td {
 border:1px solid black;
 border-collapse: collapse;
}

.table1 {
 border-style: none solid none none;
}

.table1 th {
 border-style: none solid solid solid;
}

.table1 .borraborde {
 border-style: none solid solid none;
 text-align: center;
}

.table1 {
 width: 30%;
 text-align: right;

}

.borrabordebajo {
 border-style: solid solid none none;
  vertical-align:bottom;

}

.borrabordebajo2 {
 border-style: solid solid none none;
 text-align: center;
}

table.table4, .table4 th{
 border:3px solid #eeeeee;
 border-collapse: collapse;
 width:25%;
 text-align:right;
}

.table4 td{
 height: 30px;
}

.izda {
 background-color:#dddddd;
 text-align:left;
}

.borde {
 border-bottom:4px double black;
 border-left:4px double black;
}

.table2, .table2 th, .table2 td{
 border:1px solid black;
 border-collapse: collapse;
 text-align: center;
}

.table2 tr:nth-child(even) {
    background-color: #f1f1f1;
}

.table2 .borde2 {
 border-width: 1px 4px 1px 1px;
 border-style: solid solid solid solid;
}

.table2 .borde3 {
 border-width: 1px 4px 4px 1px;
 border-style: solid solid solid solid;
}

.table2 .bordes3{
 border-width: 1px 4px 1px 1px;
 border-style: solid solid solid solid;
}

.table2 .borraborde {
 border-width: 1px 0px 1px 1px;
 border-style: solid none solid solid;
}

.table2 .borraborde4 {
 border-width: 1px 1px 1px 0px;
 border-style: solid solid solid none;
}

.table2 .bordebajo {
 border-width: 1px 1px 4px 0px;
 border-style: solid solid solid solid;
}

.table2 .bordebajo2 {
 border-width: 1px 0px 4px 0px;
 border-style: solid none solid solid;
}

.table2 td{
 width: 100px;
}
</style>
<title>Tablas</title>
</head>
<body>
<table class="table1">
 <tr>
  <th class="borraborde"></th>
  <th>Alicante</th>
  <th>Castellón</th>
  <th>Valencia</th>
  <th>C.Valenciana</th>
 </tr>
 <tr>
  <td class="borraborde">Nacimientos</td>
  <td>13.879</td>
  <td>456502</td>
  <td>54655</td>
  <td>546555</td>
 </tr>
 <tr>
  <td class="borraborde">Defunciones</td>
  <td>15459</td>
  <td>546545</td>
  <td>44884</td>
  <td>555643</td>
 </tr>
 <tr>
  <td class="borraborde">Matrimonios</td>
  <td>15459</td>
  <td>546545</td>
  <td>44884</td>
  <td>555643</td>
 </tr>
 <tr>
  <td class="borrabordebajo2">Crecimiento vegetativo</td>
  <td class="borrabordebajo">15459</td>
  <td class="borrabordebajo">546545</td>
  <td class="borrabordebajo">44884</td>
  <td class="borrabordebajo">555643</td>
 </tr>
</table>
<br>
<table class="table2">
 <tr>
  <td rowspan="2" class="borde3">Población</td>
  <td colspan="3" class="borraborde">Poblacion de derecho, 1996</td>
  <td colspan="3" class="borraborde4">Poblacion de derecho, 1998</td>
 </tr>
 <tr>
  <td class="bordebajo">Total</td>
  <td class="bordebajo">Hombres</td>
  <td class="bordebajo2">Mujeres</td>
  <td class="bordebajo">Total</td>
  <td class="bordebajo">Hombres</td>
  <td class="bordebajo">mujeres</td>
 </tr>
 <tr>
  <td class="borde2">Castellón</td>
  <td>456.727</td>
  <td>22.406</td>
  <td class="borraborde">231.321</td>
  <td class="borraborde4">461.712</td>
  <td>228.231</td>
  <td>233.481</td>
 </tr>
 <tr>
  <td class="borde2">Valencia</td>
  <td>2.172.840</td>
  <td>1.059.657</td>
  <td class="borraborde">1.113.183</td>
  <td class="borraborde4">2.172.796</td>
  <td>1.060.156</td>
  <td>1.112.640</td>
 </tr>
 <tr>
  <td class="borde2">Alicante</td>
  <td>1.379.762</td>
  <td>677.118</td>
  <td class="borraborde">702.644</td>
  <td class="borraborde4">1.388.933</td>
  <td>682.380</td>
  <td>706.553</td>
 </tr>
 <tr>
  <td class="bordes4">*TOTALES</td>
  <td></td>
  <td></td>
  <td class="borraborde"></td>
  <td class="borraborde4"></td>
  <td></td>
  <td></td>
 </tr>
</table>
<br>
<table class="table4">
<caption>¿Sabe ud. lo que es Internet?</caption>
 <tr>
  <td class="izda"> </td>
  <td class="borde">%</td>
 </tr>
 <tr>
  <td class="izda">Lo sabe y lo utiliza</td>
  <td>17,3</td>
 </tr>
 <tr>
  <td class="izda">No lo sabe</td>
  <td>60,3</td>
 </tr>
 <tr>
  <td class="izda">Lo sabe pero no lo utiliza</td>
  <td>22,1</td>
 </tr>
 <tr>
  <td class="izda">N.C.</td>
  <td>0,3</td>
 </tr>
</table>

</body>
</html>