Foros del Web - Ver Mensaje Individual - Calendario mas semantico: tabla, div o lista?

lucasan · #7 (**permalink**) 17/07/2009, 13:04

Definitivamente, ese es el punto.

Que se va a hacer? un listado de eventos? o un calendario?

Como dice David, un calendario puede o no tener eventos.

Un listado de eventos, usemos listas.

Un calendario común y silvestre, usemos tablas.

(Los Divs definitivamente no encajan)

Dato extra: Navegando con Jaws (el lector de pantalla) se comprende mucho mejor un calendario basado en tablas que en listas. Es mucho mas accesible, acabo de hacer una pequeña prueba.

Me animé tanto con el tema que hice un pequeño calendario en tablas

aquí lo pongo para dinamizar el tema.

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="Lucas Torres" />

	<title>Calendario</title>

<style type="text/css">
body {
	font-size: 1em;
}

#calendario td, #calendario tr, #calendario th {
	border: #000 1px solid;
}

#calendario th {
	background-color: #E4E9FC;
}

.diaNumero {
	font-size: 0.7em;
}

.hoy {
	background-color: #FFFFD4;
}

</style>	
	
</head>

<body>

<table id="calendario">
	<thead>
		<tr>
			<th colspan="7" scope="col" class="anio">2009</th>
		</tr>
		
		<tr>
			<th colspan="7" scope="col" class="mes">Junio</th>
		</tr>
		
		<tr>
			<th scope="col" class="diaSemana">Lunes</th>
			<th scope="col" class="diaSemana">Martes</th>
			<th scope="col" class="diaSemana">Mi&eacute;rcoles</th>
			<th scope="col" class="diaSemana">Jueves</th>
			<th scope="col" class="diaSemana">Viernes</th>
			<th scope="col" class="diaSemana">S&aacute;bado</th>
			<th scope="col" class="diaSemana">Domingo</th>
		</tr>
	</thead>

<tr class="semana1">
	<td></td>
	<td></td>
	<td></td>
	<td><span class="diaNumero">1</span></td>
	<td><span class="diaNumero">2</span></td>
	<td><span class="diaNumero">3</span></td>
	<td><span class="diaNumero">4</span></td>
</tr>
<tr class="semana2">
	<td><span class="diaNumero">5</span></td>
	<td><span class="diaNumero">6</span></td>
	<td><span class="diaNumero">7</span></td>
	<td><span class="diaNumero">8</span></td>
	<td><span class="diaNumero">9</span></td>
	<td><span class="diaNumero">10</span></td>
	<td><span class="diaNumero">11</span></td>
</tr>
<tr class="semana3">
	<td><span class="diaNumero">12</span></td>
	<td><span class="diaNumero">13</span></td>
	<td><span class="diaNumero">14</span></td>
	<td><span class="diaNumero">15</span></td>
	<td><span class="diaNumero">16</span></td>
	<td class="hoy"><span class="diaNumero">17</span></td>
	<td><span class="diaNumero">18</span></td>
</tr>
<tr class="semana4">
	<td><span class="diaNumero">19</span></td>
	<td><span class="diaNumero">20</span></td>
	<td><span class="diaNumero">21</span></td>
	<td><span class="diaNumero">22</span></td>
	<td><span class="diaNumero">23</span></td>
	<td><span class="diaNumero">24</span></td>
	<td><span class="diaNumero">25</span></td>
</tr>
<tr class="semana5">
	<td><span class="diaNumero">26</span></td>
	<td><span class="diaNumero">27</span></td>
	<td><span class="diaNumero">28</span></td>
	<td><span class="diaNumero">29</span></td>
	<td><span class="diaNumero">30</span></td>
	<td><span class="diaNumero">31</span></td>
	<td></td>
</tr>
</table>

</body>
</html>