Ver Mensaje Individual
  #3 (permalink)  
Antiguo 10/09/2009, 20:25
Avatar de deirdre
deirdre
 
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 15 años, 6 meses
Puntos: 45
Respuesta: Creando links para tablas paginadas

Hola...

Mira esto otro, creo que se ajusta bastante a lo que necesitas:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabla sin tamaño definido siempre centrada y menu siempre centrado</title>
<style type="text/css">
* {
        outline: 0;
        font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
        font-size: 10px;
        color: #000;
	text-decoration: none;
}

.tabla {
	border-collapse: collapse;
	border: 1px solid #A6B0F8;
	margin: 0 auto;
}

.celda {
	border: 1px solid #A6B0F8;
}

div.paginacion {
	padding: 0;
	background-color: #A6FFE2;
	height: 30px;
	line-height: 30px;
}

div.paginacion .menu_paginacion {
	float: left;
	list-style-type: none;
	padding: 0 10px;
	font-size: 10px;
}

div.paginacion .actual {
	color: red;
	font-weight: bolder;
	font-size: 12px;				
}

div.paginacion .menu_paginacion a {
	text-decoration: none;
	color: #000;
	font-weight: bold;
}
.centrado {
	text-align: center
}
.sep {
	padding-left: 5px;
	padding-right: 5px;
}
</style>
</head>

<body>
<p class="centrado">Tabla sin tamaño definido siempre centrada (tamaño que se adapta a su contenido).</p>
<p class="centrado">Testado en iexplorer 7, firefox 3.5, opera 9 y safari 4</p>
<p class="centrado">Menu de navegación centrado en la última fila.</p>
<p class="centrado">Independientemente del ancho que ocupe la tabla (según los datos que lleve), siempre queda centrada y el menú también.</p>

<table class="tabla">
	<tr>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
		<td class="celda">Datos datos</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">Datos datos datos</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">Datos datos datos datos</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
		<td class="celda">&nbsp;</td>
	</tr>
	<tr>
		<td colspan="5" class="centrado">
		<div id="paginacion" class="paginacion">
		<span class="actual sep"><a href="">&lt&lt;</a></span>
		<span class="actual sep"><a href="">&lt</a></span>
		<span class="actual sep">1</span>
		<span class="actual sep"><a href="">2</a></span>
		<span class="actual sep"><a href="">3</a></span>
		<span class="actual sep"><a href="">&gt;</a></span>
		<span class="actual sep"><a href="">&gt;&gt;</a></span>
		</div>
		</td>
	</tr>
</table>

</body>

</html> 
Hazte un copia-pega y lo pruebas.

Bye