Hola a todos, y bienvenidos de nuevo a una nueva clase del curso de Introducción a CSS 3.
En esta sexta clase, continuaremos trabajando en darle diferentes estilos a los elementos que ya conocemos gracias al curso de Introducción a html 5. En esta ocasión, le toca el turno a las tablas.
Aunque el elemento de tablas se esté utilizando cada vez menos, en consecuencia al mercado responsive, cuando hablamos de diseño web, las tablas son elementos fundamentales, gracias a la gran utilidad didáctica de aprender a usarlas en nuestro código.
¡Vamos a ello!
CÓDIGO DE EJEMPLO
<!DOCTYPE html>
<html>
<head>
<title>Sexta Clase</title>
<style>
table {
border-collapse: collapse;
}
td{
padding: 5px;
border: 1px solid black;
background-color: lightblue;
}
th {
padding: 5px;
border: 1px solid white;
background-color: black;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2"> Uso de la CPU</th> <th> Flash 10</th> <th>Flash 10.1</th> <th>HTML5</th>
</tr>
<tr>
<td rowspan="32"> Mac </td> <td>Safari</td>
<td> 37,41%</td>
<td> 32,07%</td>
<td> 12,39%</td>
</tr>
<tr>
<td>Chrome</td>
<td>50,39%</td>
<td>49,79%</td>
<td>49,89%</td>
</tr>
<tr>
<td>Firefox</td>
<td>40,25%</td>
<td>42,07%</td>
<td>n.d. (*)</td>
</tr>
<tr>
<td rowspan="4"> Windows</td>
<td>Safari</td>
<td>23,22%</td>
<td>7,43%</td>
<td>n.d.</td>
</tr>
<tr>
<td>Safari</td>
<td>23,22%</td>
<td>7,43%</td>
<td>n.d.</td>
</tr>
<tr>
<td>Safari</td>
<td>23,22%</td>
<td>7,43%</td>
<td>n.d.</td>
</tr>
</table>
</body>
</html>