| ano | webs | páxinas | Liñas | |
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | |
Aínda que moita xente emprega as táboas para maquetar (construir a plantilla ou layout), as táboas só se deben de empregar para gardar datos numéricos. Presento un pequeno exemplo sen funcionalidade ningunha, pero nel compártense filas e columnas e dáselle estilos con código css.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Táboa</title>
<style>
table{
width:70%;
margin:0 auto;
}
table, tr, th, td{
border:1px solid grey;
border-collapse: collapse;
}
table th[scope="col"]{
background-color:rgba(25,25,25,0.2);
}
table th[scope="row"]{
background-color:rgba(125,205,75,0.2);
}
td{
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>Lenda da táboa</caption>
<thead>
<tr>
<th colspan="2" scope="col">ano</th>
<th scope="col">webs</th>
<th scope="col">páxinas</th>
<th scope="col">Liñas</th>
</tr>
</thead>
<tbody>
<tr>
<th data-title="ano" scope="row">1</th>
<th data-title="ano" scope="row">2</th>
<td>3</td>
<td>4</td>
<td rowspan="2">5</td>
</tr>
<tr>
<th data-title="ano" scope="row">6</th>
<th data-title="ano" scope="row">7</th>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</body>
</html>