El tamaño de la tabla se define con estos atributos en función del diseño elegido.
width : indica el ancho de la tabla en pixeles o porcentaje.
height : indica a los navegadores el alto de la tabla, al igual que width también se puede indicar su valor en pixeles o en valor porcentual. Su uso ha sido desaprobado recomendándose las hojas de estilo.
Es recomendable no superar los 765 pixeles de ancho para que en pantallas con resolución de 800x600 para que pueda visualizarse todo el contenido.
Código de Ejemplo aplicando las características vistas anteriormente: Se ha aplicado un ancho (width) de 200 pixeles y una altura (height) de 100 pixeles. Solamente para que se vea en que punto del código se deben colocar estos atributos.
<html>
<head>
<title>Tabla - Alineación vertical de celdas</title>
</head>
<body>
<table width="200" height="100" border="1" bordercolorlight="red" bordercolordark="maroon" cellspacing="50"
cellpadding="50%">
<tr>
<th width="20%" >Nombre</th>
<th width="20%" >Telefono</th>
<th width="20%" >Otros</th>
<th width="20%">Comentarios</th>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="10%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
<tr>
<td width="20%" align="left">Izquierda</td>
<td width="20%" align="right">derecha</td>
<td width="20%" align="center">centro</td>
<td width="20%" align="justify">texto justificado izq. y derecha</td>
</tr>
</table>
</body>
</html>
Puedes probar el código haciendo copiar y pegar. Si tienes guardado el código de la lección anterior solo debes agregar estos nuevos atributos para probarlo.
Temas anteriores de curso HTML gratis 83 - HTML - Tablas - Atributos “cellspacing” y “cellpadding”
82.- HTML – Tablas – Atributos Celdas: "align"
81.- HTML – Tablas – Atributos Celdas: "background – bgcolor – width - height"
mas ... acceder al índice de temas ...
No hay comentarios:
Publicar un comentario
Gracias por tu comentario, en un maximo de 48 horas sera publicado.