A continuación aporto el ejercicio Entrega CU01024D del Tutorial básico del programador web: CSS desde cero de aprenderaprogramar.
Debo aclarar que aunque creo que el ejercicio estará correcto,en caso contrario me gustaría que se rebatiese, no es la primera opción que me planteé.
El codigo de html es prácticamente el mismo, pero en css, he tenido que cambiarlo, tomando la idea del foro. Pego el código y después pegaré el código tal como yo quise hacerlo sin conseguirlo. Si alguién que lo lea, me puede aclarar porque no funciona le estaré agradecido
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Unidades Css: absolutas y relativas</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
<table>
<thead>
<tr class="a">
<th>Título </th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
</thead>
<tbody>
<tr class="b">
<td><h1>h1 pred</h1></td>
<td class="a1">h1 32 px</td>
<td class="a2">h1 2em</td>
<td class="a3">h1 24 pt</td>
<td class="a4">h1 200%</td>
</tr>
<tr class="c">
<td><h2>h2 pred</h2></td>
<td class="b1">h2 24 px</td>
<td class="b2">h2 1.5em</td>
<td class="b3">h2 18 pt</td>
<td class="b4">h2 150%</td>
</tr>
<tr class="d">
<td><h3>h3 pred</h3></td>
<td class="c1">h3 19 px</td>
<td class="c2">h3 1.2em</td>
<td class="c3">h3 14 pt</td>
<td class="c4">h3 117.6%</td>
</tr>
<tr class="e">
<td><h4>h4 pred</h4></td>
<td class="d1">h4 16 px</td>
<td class="d2">h4 1em</td>
<td class="d3">h4 12 pt</td>
<td class="d4">h4 100%</td>
</tr>
<tr class="f">
<td><h5>h5 pred</h5></td>
<td class="e1">h5 13.4 px</td>
<td class="e2">h5 .83em</td>
<td class="e3">h5 10 pt</td>
<td class="e4">h5 80%</td>
</tr>
<tr class="f">
<td><h6>h6 pred</h6></td>
<td class="f1">h6 10 px</td>
<td class="f2">h6 .7em</td>
<td class="f3">h6 8 pt</td>
<td class="f4">h6 70%</td>
</tr>
</tbody>
</table>
</body>
</html>
table{border: 5px dotted pink; width: 100%; text-align:center;
background-color: #cdcdcd;}
th, td{border: 1px solid blue; font-weight: bold;}
.a{background-color: rgb(128,30,250,0.9);
color:rgb(221,221,221,.9); font-size: 24px; height: 48px;}
.a1{font-size: 32px;}
.a2{font-size: 2em;}
.a3{font-size: 24pt;}
.a4{font-size: 200%;}
.b{background-color: rgb(128,30,250,0.8); color:rgb(108,0,88,.4);}
.b1{font-size: 24px;}
.b2{font-size: 1.5em;}
.b3{font-size: 18pt;}
.b4{font-size: 150%;}
.c{background-color: rgb(128,30,250,0.7); color:rgb(108,0,88,.5);}
.c1{font-size: 19px;}
.c2{font-size: 1.2em;}
.c3{font-size: 14pt;}
.c4{font-size: 117.6%;}
.d{background-color: rgb(128,30,250,0.6); color:rgb(108,0,88,.6);}
.d1{font-size:16px;}
.d2{font-size:1em;}
.d3{font-size:12pt;}
.d4{font-size:100%;}
.e{background-color:rgb(128,30,250,0.5); color:rgb(108,0,88,.7);}
.e1{font-size:13.4px;}
.e2{font-size:.83em;}
.e3{font-size: 10pt;}
.e4{font-size: 80%;}
.f{background-color: rgb(128,30,250,0.4); color:rgb(108,0,88,.8);}
.f1{font-size: 10px;}
.f2{font-size: 0.7em;}
.f3{font-size: 8pt;}
.f4{font-size: 70%;}
Ahora pongo el código que no me ha resultado válido
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Unidades Css: absolutas y relativas</title>
<link rel="stylesheet" type="text/css" href="est.css">
</head>
<body>
<table>
<thead>
<tr class="a">
<th>Título </th>
<th>Tamaño px</th>
<th>Tamaño em</th>
<th>Tamaño pt</th>
<th>Tamaño %</th>
</tr>
</thead>
<tbody>
<tr class="b">
<td><h1>h1 pred</h1></td>
<td>h1 32 px</td>
<td>h1 2em</td>
<td>h1 24 pt</td>
<td>h1 200%</td>
</tr>
<tr class="c">
<td><h2>h2 pred</h2></td>
<td>h2 24 px</td>
<td>h2 1.5em</td>
<td>h2 18 pt</td>
<td>h2 150%</td>
</tr>
<tr class="d">
<td><h3>h3 pred</h3></td>
<td>h3 19 px</td>
<td>h3 1.2em</td>
<td>h3 14 pt</td>
<td>h3 117.6%</td>
</tr>
<tr class="e">
<td><h4>h4 pred</h4></td>
<td>h4 16 px</td>
<td>h4 1em</td>
<td>h4 12 pt</td>
<td>h4 100%</td>
</tr>
<tr class="f">
<td><h5>h5 pred</h5></td>
<td>h5 13.4 px</td>
<td>h5 .83em</td>
<td>h5 10 pt</td>
<td>h5 80%</td>
</tr>
<tr class="f">
<td><h6>h6 pred</h6></td>
<td>h6 10 px</td>
<td>h6 .7em</td>
<td>h6 8 pt</td>
<td>h6 70%</td>
</tr>
</tbody>
</table>
</body>
</html>
table{border: 3px solid pink; width: 100%;}
th, td{border: 1px solid lime; }
.a tr{background-color: #801EFA;}
.a tr:nth-child(2){font-size:32px;}
.a tr:nth-child(3){font-size: 2em;}
.a tr:nth-child(4){font-size:24pt;}
.a tr:nth-child(5){font-size:200%;}
.b tr{background-color: #964173;}
.b tr:nth-child(2){font-size: 24px;}
.b tr:nth-child(3){font-size: 1.5em;}
.b tr:nth-child(4){font-size: 18pt;}
.b tr:nth-child(5){font-size: 150px;}
.c tr{background-color: #7DEDF4;}
.ctr:nth-child(2){font-size: 19px;}
.c tr:nth-child(3){font-size: 1.2em;}
.c tr:nth-child(4){font-size: 14pt;}
.c tr:nth-child(5){font-size: 117.6%;}
.d tr{background-color: #56F765;}
.d tr:nth-child(2){font-size:16px;}
.d tr:nth-child(3){font-size:1em;}
.d tr:nth-child(4){font-size:12pt;}
.d tr:nth-child(5){font-size:100%;}
.e tr{background-color: #BAFA0C;}
.e tr:nth-child(2){font-size:13.4px;}
.e tr:nth-child(3){font-size:.83em;}
.e tr:nth-child(4){font-size: 10pt;}
.e tr:nth-child(5){font-size: 80%;}
.f tr{background-color: #F8A30E;}
.f tr:nth-child(2){font-size: 10px;}
.f tr:nth-child(3){font-size: 0.7em;}
.f tr:nth-child(4){font-size: 8pt;}
.f tr:nth-child(5){font-size: 70%;}